什么是SASS?
SASS(Syntactically Awesome Stylesheets)是一种动态样式语言,为CSS融入了编程元素,提供了很多便利的写法,使得CSS的开发变得简单、可维护。先来回顾一下CSS,接触过WEB开发的同学,肯定都了解CSS(级联样式表)。通常,我们使用CSS定义页面需要的样式规则,然后为页面中的目标元素设置或者更改样式。作为一种样式表语言,CSS旨在方便的分离设计和内容展现,便于我们去维护页面的样式。
然而对于大部分编程人员来说,写css样式往往是一件非常痛苦的事情。他们会感觉到各种约束,为什么我不能定一个变量来避免那些类似“变量”的重复书写?为什么我不能继承上个class的样式定义?...SASS正是帮编程人员解开了这些疑惑,让css看起来更像是一门编程语言。
到底是SASS还是SCSS?
SASS最初的语法规则是缩进语法,它没有括号、分号、使用两个空格缩进来定义代码的嵌套方式,该语法形式的文件以 .sass
为后缀名。
然而SASS的缩排语法,对于写惯css前端的web开发者来说很不直观,也不能将css代码加入到SASS里面,因此SASS语法进行了改良,SASS 3就变成了SASS(sassy css)。与原来的语法兼容,只是用{}
取代了原来的缩进,文件以 .scss
为后缀名。
So,到底是用SASS还是SCSS,各位同学依个人口味酌量添加~
安装
SASS基于Ruby语言开发而成,因此安装SASS前需要安装Ruby。ruby安装完成后,我们就可以安装SASS了,命令如下:
gem install sass
安装完后,验证下是否安装成功,我们继续输入如下命令:
sass -v
如安装成功后,会显示当前SASS的版本号:
Sass 3.x.x (Selective Steve)
常用命令
无论是SASS还是SCSS都支持CSS的写法,个人还是习惯SCSS的语法规则。
将SCSS文件转译成CSS文件,命令如下:
sass base.scss base.css
SASS提供四种编译风格:
- nested:嵌套缩进的css代码(默认);
- expanded:没有缩进的、扩展的css代码;
- compact:简洁格式的css代码;
- compressed:压缩后的css代码;
生产环境当中,一般使用最后一个选项,例:
sass --style compressed test.sass test.css
你也可以让SASS监听某个文件或目录,一旦源文件有变动,就自动生成编译后的版本。
// 监听一个SASS文件
sass --watch input.scss:output.css
// 监听文件夹下面的SASS文件
sass --watch app/sass:public/stylesheets
更多命令可参考SASS的帮助选项,命令行内输入sass -h
即可。
基本语法规则
变量
SASS要求变量需要以$
开头声明,如下:
// 定义变量
$var : left;
div {
float : $var;
}
// 编译后
div {
float : left;
}
变量名中不区分下划线和中划线,如:
// 变量名中含有下划线或中划线
$margin-left : 20px;
div {
margin-left : $margin_left;
}
// 编译后
div {
margin-left : 20px;
}
字符串中引用变量,需要用#{}
将变量包起来引用,如下:
// 字符串中引用变量
$right : 20;
.mr-#{$right} {
margin-right : #{$right}px;
}
// 编译后
.mr-20 {
margin-right : 20px;
}
注释
SASS共有两种注释风格:
- 标准的CSS注释 /* comment */ ,会保留到编译后的文件;
- 单行注释 // comment,只保留在SASS源文件中,编译后被省略;
嵌套
我们之前在维护CSS文件的时候,一定遇到过这种情况。当我们写后代选择器时,需要指定父选择器,同样的父选择器会重复写好多次,比如:
#content article h1 { color : #333 }
#content article p { margin-bottom : 1.4em }
#content aside { background-color : #EEE }
...
在SASS里面支持嵌套的方式,规避了上述问题,并且提高了代码的可读性,上例中代码可以在SASS中定义如下:
// 嵌套CSS规则
#content {
article {
h1 {
color : #333;
}
p {
margin-bottom : 1.4em;
}
}
aside {
background-color : #EEE;
}
}
在嵌套规则中,我们可以用&
来表示父选择器的引用,往往在一些伪类样式中会用到,例如:
// 父选择器标识符
article a {
color : blue;
&:hover { color : red }
}
// 编译后
article a {
color : blue;
}
article a : hover {
color : red;
}
除了选择器的嵌套,SASS中还支持属性的嵌套,如下:
// 属性嵌套
nav {
border : 1px solid #ccc {
left : 0px;
right : 0px;
}
}
// 编译后
nav {
border : 1px solid #ccc;
border-left : 0px;
border-right : 0px;
}
@import 导入
@import命令,用来导入外部文件:
@import "path/filename.scss";
如果插入的是.css文件,则等同于css的import命令:
@import "foo.css";
混合器
SASS中还提供一种混合器(mixin),它可以帮我们规避大段样式的重用,混合器通过@mixin
标识声明,示例如下:
// 混合器示例
@mixin rounded-corners {
-moz-border-radius : 5px;
-webkit-border-radius : 5px;
border-radius : 5px;
}
notice {
background-color : green;
border : 2px solid #00aa00;
@include rounded-corners;
}
// 编译后
.notice {
background-color : green;
border : 2px solid #00aa00;
-moz-border-radius : 5px;
-webkit-border-radius : 5px;
border-radius : 5px;
}
混合器支持我们传入自定义参数和设置默认参数,当设置默认参数时使用$name: default-value
的声明形式,默认值可以是任何有效的css属性值,例:
// 带参数的混合器
@mixin link-colors (
$normal,
$hover: $normal,
$visited: $normal
) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
a {
@include link-colors(red);
}
// 编译后
a {
color: red;
&:hover { color: red; }
&:visited { color: red; }
}
@extend 继承
SASS中支持选择器的继承,通过@extend
关键字实现,例如:
// 选择器的继承
.class1 {
background-color : #fff;
}
.class2 {
@extend .class1;
color : black;
}
// 编译后
.class1 {
background-color : #fff;
}
.class2 {
background-color : #fff;
color : black;
}
通过继承的实现,往往可以精简我们的css文件。
条件分支
@if可以用来判断:
p {
@if 1 + 1 == 2 { border : 1px solid; }
@if 5 < 3 { border : 2px dotted; }
}
// 编译后
p {
border : 1px solid;
}
同时还支持@else命令:
body {
@if 1 > 0 {
background-color : #000;
} @else {
background-color : #fff;
}
// 编译后
body {
background-color : #000;
}
循环
SASS支持for循环和while循环:
// for循环
@for $i from 1 to 3 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
// while循环
$i : 1;
@while $i < 3 {
.border-#{$i} {
border: #{$i}px solid blue;
}
$i: $i + 1;
}
// 编译后
.border-1 {
border: 1px solid blue;
}
.border-2 {
border: 2px solid blue;
}
.border-3 {
border: 3px solid blue;
}
each命令用来遍历指定参数集合:
@each $member in a, b, c {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
// 编译后
.a {
background-image: url("/image/a.jpg");
}
.b {
background-image: url("/image/b.jpg");
}
.c {
background-image: url("/image/c.jpg");
}
自定义函数
SASS允许用户编写自定义函数,用@function
声明,可以传递参数或者设置默认参数,@return
返回处理结果:
// 自定义函数
@function double($n:5px) {
@return $n * 2;
}
#sidebar {
width: double();
}
// 编译后
#sidebar {
width: 10px;
}
参考
http://www.sass.hk/sass-course.html
http://www.ruanyifeng.com/blog/2012/06/sass.html