Sass,Syntactically Awesome StyleSheets,语法样式表。
Sass有两种实现,ruby-sass与lib-sass,前者用ruby实现,后者用C/C++实现。
一、Sass的安装方案
1、标准安装
A、先安装Ruby,再安装Sass。
gem install sass
B、查看版本
sass -v
C、查看帮助(3.5.1)
sass -h
D、安装compass
gem install compass
compass是sass的工具库,在sass的基础上封装了一系列有用的模板和模块,补充sass的功能,compass和sass的关系类似于jQuery和JavaScript的关系。
E、检验compass是否安装成功
compass -v
2、借助npm安装
二、创建Sass文件
1、sass文件类型
- 以xxx.sass结尾的文件,不使用花括号和分号;
- 以xxx.scss结尾的文件,和xxx.css文件一样使用花括号和分号。scss(Sassy CSS),是一个css3语法的扩充版本,是Sass3的新语法格式。
2、温馨提示
- 在创建Sass文件时,记得将文件编码设置为“utf-8”;
- 如果文件以.sass结尾,请用旧语法书写;
- 如果文件以.scss结尾,请用新语法书写,千万不要混用混写;
- 配置好ruby的环境变量,否则会导致编译失败;
- 文件目录请用英文,不要用中文。
3、文件引用
一般情况下,书写sass文件,编译成css后,用link引用,而不是直接引入.scss文件。当然,如果结合webpack使用,那就另当别论了,具体引用方式请看下文。
三、Sass的语法(3.5.1)
1、注释
//单行注释
单行注释,不会出现在编译后的css文件中。
/*多行注释*/
多行注释,只会出现在编译后的代码格式为expanded的css文件中。
/*!强制注释*/
强制注释,会出现在任何代码格式的css文件中。
2、嵌套
嵌套不要超过3层。
A、选择器嵌套
div{ margin: 100px; em{ font-weight: normal; color: red; } }
B、属性嵌套
p{ border:{ color: blue; } }
C、伪类嵌套
a{ color: orange; &:hover{ color: blue; } }
3、变量
$blue : #1875e7; div { color: $blue; }
如果变量需要镶嵌在字符串之中,就必须写在#{}之中。
$direction: left; div { border-#{$direction}-radius: 5px; }
4、作用域(尽量少用)
变量支持块级作用域,嵌套规则内定义的变量只能在嵌套规则内使用(局部变量),不在嵌套规则内定义的变量则可在任何地方使用(全局变量)。将局部变量转换为全局变量可以添加 !global 声明。
A、降低优先级
!default
$blue : #1875e7 !default; div { color: $blue; }
B、提升优先级
!global
$blue : #1875e7; div { $blue : #00f !global; color: $blue; }
除非元素自身重置变量,才能覆盖!global的变量。
5、数据类型
- 数字:1, 2, 13, 10px
- 字符串:有引号字符串与无引号字符串,"foo", 'bar', baz
- 颜色:blue, #04a3f9, rgba(255,0,0,0.5)
- 布尔型:true, false
- 空值:null
- 数组 (list):用空格或逗号作分隔符,1.5em 1em 0 2em, Helvetica, Arial, sans-serif
- maps:相当于JavaScript的object,(key1: value1, key2: value2)
6、计算
$num: 5; div { margin: (14px/2); top: 50px + 100px; right: $num * 10%; }
7、数组
在Sass的列表中,你可以使用空格符或者逗号作为列表项与列表项之间的分隔符。Sass中的列表索引值和JavaSctript数组中的索引值不一样,它是从1开始,而不是从0开始。
$list: a, b, c, d, e, f
//scss $list:(#f00,5,"normal"); div { color: nth($list,1); font-size: nth($list,2) * length($list) + px; font-weight: nth($list,3); } //css div { color: #f00; font-size: 15px; font-weight: "normal"; }
8、代码重用之继承@extend
.parent{ font-size: 15px; color: blue; } .child{ @extend .parent; border: 1px solid #f00; }
好处:可以继承所有样式,编译出来的css会将所有选择器合并在一起,代码比较干净。继承仅仅是重复选择器,而不会重复属性,所以使用继承往往比混合器生成的css体积更小。
弊端:不能传参。
9、代码重用之占位符%
%placeholder声明的代码,如果不被@extend调用,就不会产生任何代码,只是静静的躺在你的某个SCSS文件中。
%mt5 { margin-top: 5px; } %pt5 { padding-top: 5px; } .btn { @extend %mt5; @extend %pt5; }
占位符和继承相似,通过@extend调用的占位符,编译出来的代码会将相同的代码合并在一起。
10、代码重用之混合宏@mixin
A、无参
@mixin eleLeft{ float: left; margin-left: 5px; } div{ @include eleLeft; }
B、单参
@mixin eleLeft($val: 5px){ float: left; margin-left: $val; } div{ @include eleLeft(10px); }
C、可枚举多参
@mixin rounded($vert, $horz, $num: 10px) { margin-#{$vert}: $num; padding-#{$horz}: $num; } div { @include rounded(top, left); } p { @include rounded(top, left, 5px); }
D、不可枚举参数
当混合宏传的参数过多时,可以使用参数“...”来替代。
@mixin box-shadow($shadow...) { @if length($shadow) >= 1 { box-shadow: $shadow; } @else { $shadow: 0 0 4px rgba(0,0,0,.3); box-shadow: $shadow; } } .block { @include box-shadow; } .hidden { @include box-shadow(inset 0 0 1px rgba(red,.5),0 0 2px rgba(red,.25)); }
好处:可以传参数;
弊端:编译出来的css相同代码不会合并。比如.div和.p内部样式相同,但是分开输出了。如果在样式文件中调用同一个混合宏,会产生多个对应的样式代码,造成代码的冗余。
11、条件语句
$bg-color: black; @if $bg-color == black { background-color: #000; } @else { background-color: #fff; }
12、循环语句
A、for循环
a.1、$i取值范围只包含start,不包含end。
@for $i from 1 to 10 { .border-#{$i} { border: #{$i}px solid blue; } }
a.2、$i取值范围既包含start,也包含end。
@for $i from 1 through 3 { .tab-#{$i} { width: 2rem * $i; } }
B、while循环
$i: 6; @while $i > 0 { .item-#{$i} { width: 2px * $i; } $i: $i - 2; }
C、each循环
@each $item in a, b, c, d { .bg-#{$item} { background-image: url("/image/#{$item}.jpg"); } }
13、相关函数
A、三元条件函数
if($condition,$if-true,$if-false)
B、颜色函数
C、数组函数
D、自定义函数
@function double($n) { @return $n * 2; } div { width: double(5px); }
14、引用外部文件
A、顶部导入
@import "grid";
@import "grid.scss";
当通过@import把sass样式分散到多个文件时,你通常只想生成少数几个css文件。那些专门为@import命令而编写的sass文件,并不需要生成对应的独立css文件,这样的sass文件称为局部文件,sass局部文件的文件名规定以下划线开头。
如果需要导入SCSS或者Sass文件,但又不希望将其编译为CSS,只需要在文件名前添加下划线,这样会告诉Sass不要编译这些文件,但导入语句中却不需要添加下划线。
B、内部导入
有一个名为_blue-theme.scss的局部文件,内容如下:
aside { background: blue; color: white; }
给main.scss导入某个css规则
.blue-theme { @import "blue-theme" }
温馨提示:不可以在混合指令或控制指令中嵌套@import。
C、css文件导入
@import "cssfile.css";
@import "cssfile" screen;
@import "http://cssfile.com/bar";
@import url(cssfile);
sass兼容原生的css,所以它也支持原生的CSS@import。如果不想造成浏览器额外下载,可以写一个css文件,然后命名为.scss文件,再导入。
15、如何使用compass
四、Sass的编译方案
1、命令行实现编译
A、生成css文件
sass sassfile.scss
B、单文件转换
sass sassfile.scss cssfile.css
C、单文件监听
sass --watch sassfile.scss:cssfile.css
D、监听文件夹sass/main中所有Sass文件,并自动编译为css,放到dist/css目录下。
sass --watch sass/main:dist/css
--sourcemap表示开启sourcemap调试。开启sourcemap调试后,会生成一个后缀名为.css.map文件。
E、4种编译风格
e.1、嵌套式,它是默认值。
sass --style nested sassfile.scss cssfile.css
.box{ width:250px; height:100px; background:red; } .left{ float:left; width:50px; } .right{ float:right; }
e.2、展开式
sass --style expanded sassfile.scss cssfile.css
.box{ width:250px; height:100px; background:red; } .left{ float:left; width:50px; } .right{ float:right; }
e.3、紧凑式,一行一行显示。
sass --style compact sassfile.scss cssfile.css
.box { width:250px; height:100px; background:red; } .left { float:left; width:50px; } .right { float:right; }
e.4、压缩式,常用于生产环境。
sass --style compressed sassfile.scss cssfile.css
.box{width:250px;height:100px;background:red;}.left{float:left;width:50px;}.right{float:right;}
2、借助sublime完成编译
Sass
Sass Build:ctrl + b,编译。
SublimeOnSaveBuild:ctrl + s,保存文件的时候自动编译。
在sublime中安装以上3个插件,即可实现自动编译。
新建一个scss文件,第一次保存编译的时候,sublime会提示SASS和SASS-Compressed两个选项。
- SASS:编译成普通的css文件,默认不压缩;
- SASS-Compressed:编译成压缩格式的css文件。
假设被编译文件是demo.scss,则会在当前目录默认生成demo.css文件和demo.css.map文件(用于调试)。
如果希望demo.scss和demo.css分别在不同文件夹,修改css文件默认生成目录,这里提供两种方式。
//方案A 通过Sublime Text -> Tools -> Build System -> New Build System,自定义规则。 //方案B Sublime Text -> Preferences -> Browse Packages,打开Packages文件夹,进入Sublime Text 3Installed Packages文件夹; 找到SASS Build.sublime-package压缩包,用winrar打开; 找到SASS - Compressed.sublime-build和SASS.sublime-build文件,用sublime打开他们; 把这两个文件中的 "$file:${file_path}/${file_base_name}.css" 改成 "$file:${file_path}/../css/${file_base_name}.css"。
5、在线编译