CSS编程框架 - SASS之旅
2018-06-27 09:08:02来源:未知 阅读 ()
CSS
开发网页样式,它不是一种编程语言,没法用它编程。这对程序员来说是很痛苦的,毫无语言规范可言,
借用大牛阮一峰的说法就是:CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有变量,也没有条件语句,只是一行行单纯的描述,写起来相当费事。
SASS
SASS是一种专门为CSS而服务的编程语言,是CSS的开发工具,通过编程语言进行网页样式设计,然后再编译成正常的CSS文件。
提供了许多便利的写法,可以将CSS代码模块化,分而治之。更好的CSS编码体验。配合gulp,webpack的自动化构建工具来做编译和文件合并。大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。
安装与配置
step1:安装Ruby
SASS是依赖于Ruby语言环境的,必须先安装Ruby环境
在安装的时候,请勾选Add Ruby executables to your PATH这个选项,添加环境变量,不然以后使用编译软件的时候会提示找不到ruby环境。
step2: 通过ruby命令 gem安装sass
安装完ruby之后,在cmd命令行中执行,如下图打开
淘宝RubyGems镜像安装 sass
1 gem sources -a http://gems.ruby-china.org
1 gem sources -l
安装命令
1 gem install sass
升级sass版本的命令行为
1 gem update sass
SASS编译
SASS编译的方式有多种:
1.通过gulp进行集成编译 /kaola(本文不做说明)
2.通过命令行的方式进行编译(本文不做详解)
sass scss目录地址:输出目录地址
如 sass scss/main.scss:style/main.css
SASS命令行工具可以对目录进行自动监视,这样我们的目录下的文件发生了变化,SASS帮助我们自动编译,
将sass scss/main.scss的SASS源码编译到style/main.css文件中去。
sass --watch 监视的目录地址:自动编译的目录地址
通过--watch命令让sass工具自动监视目录,并自动进行编译
sass --watch watchdir:outputdir --style nested|compact|compressed|expended
通过 --style nested(嵌套-默认)|compact(紧促型)|compressed(压缩)|expended(扩展)命令,可以为sass生成css样式指定生成的格式
SASS提供四种编译格式的选项
nested:嵌套缩进的css代码,它是默认值。
expanded:没有缩进的、扩展的css代码。
compact:简洁格式的css代码。
compressed:压缩后的css代码。
3.通过webstorm开发工具进行编译
setp1:配置环境
Webstorm -> File -> Setting -> Tool -> File Watchers -> 右侧“+” -> SCSS ->ok
setp2:新建一个SCSS文件
结果如下:SCSS文件自动生成CSS文件和MAP关联文件
SASS语法结构
1.嵌套语法使用定义变量
$+变量名 : 值
1 $color : #ffff ;
2 $border : 1px solid red(多值);
2.嵌套语法使用
使用嵌套语法的好处,我们可以去掉样式里面的公共重复的部份,在使用嵌套语法时,
如果使用:hover这种伪类选择器时,嵌套语法会保留空格,我们为元素定义伪类是不能在元素和伪类之间有空格。(ie: a:hover)。
& : 用于引用父类名称 (如: & &-title{} => .nav .nav-title {} )
这个时候我们就必须使用一个符号 "&:hover" 的方式,直接使用父类名称,不保留空格。可以在属性中使用嵌套:
1 .circle {
2 background-color: red;
3 background-origin: border-box;
4 background-repeat: no-repeat;
5 background-size: cover;
6 }
7 .circle2 {
8 background :{ //注意需要添加 ":" color: #000;
9 origin: border-box;
10 repeat: no-repeat;
11 size: cover;
12 }
13 }
3.@mixin语法
mixin 是一种预先定义好的样式块,我们可以在其它的任何地方重复使用这个样式块。
语法结构:
1 @mixin 名称 ($参数..,$参数){
2 .......
3 }
4 //使用@include进行mixin的调用
5 @include 名称 ($参数,... ) {
6 .......
7 }
4.@extend 继承语法
我们通过继承来减少重复的定义
1 .mm {
2 background-color: red;
3 a {
4 text-align: center;
5 }
6 }
7 .mm2 {
8 @extend .mm; background-origin: border-box;
9 }
当子类从父类继承后,子类可以继承父类相关的引用 ie: a的嵌套
5.占位符 %placeholder
1 %icon {
2 transition: background-color ease .2s;
3 margin: 0 .5em;
4 }
5 .error-icon {
6 @extend %icon;
7 /*错误图标指定的样式... */
8 }
9 .info-icon { @extend %icon;
10 /* 信息图标指定的样式... */
11 }
6.@import 引入partial样式语法
SASS扩展了@import的功能,
SASS使我们可以在一个CSS文件里面可以引入多个文件,并且编译成一个文件;
因些我们就可以把一个大的css文件,
分为多个 partials (partials 需要以下划线开头 ie: _header.scss),
引入时,我们只需要在文件的头部添加
1 @import "header"
这个时候,header.scss的下划线和扩展名都不需要添加了!@import "header";
7.Interpolation 把一个值插入到别一个值中
#{$变量名} : 用于引用定义的字符串
1 $version:"0.0.1";
2 /* hello test comments #{$version} */
3 $nns : "txt";
4 .nav-#{$nns} {
5 background-size: cover;
6 }
8.SASS 控制语名
1 $theme :"ddd";
2 .testif {
3 @if($theme == light) {
4 background-color: lightblue;
5 } @else if($theme == red){
6 background-color: red;
7 } @else {
8 background-color: black;
9 }
10 }
11 @for $i from 1 through 5 {
12 .col-#{$i} {
13 width:10% *$i;
14 }
15 }
16 @each $var in <list/map>
17 $list: zhangsan lisi wangwu; $map:(red:#dddd) -> map-get($map,key)
18 @each $name in $list {
19 .photo-#{$name}{
20 background: url("#{$name}.jpg");
21 }
22 }
9.SASS 自定义函数
1 $ccs:(light:#ffffff,dark:#000000); //定义function
2 @function getColor($key){
3 @return map_get($ccs,$key);
4 }
5 @mixin aa(){ //调用@function
6 color: getColor(light);
7 }
8 //使用mixin
9 .testff {
10 @include aa()
11 }
敬请留言指正补充交流!!
(未完待续~~)
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash