简介
Sass 有两种语法规则(syntaxes),目前新的语法规则（从 Sass 3开始）被称为 “SCSS”( 时髦的css（Sassy CSS）),它是css3语法的的拓展级，就是说每一个语法正确的CSS3文件也是合法的SCSS文件，SCSS文件使用.scss作为拓展名。第二种语法别成为缩进语法（或者 Sass），它受到了Haml的简洁精炼的启发，它是为了人们可以用和css相近的但是更精简的方式来书写css而诞生的。它没有括号，分号，它使用 行缩进 的方式来指定css 块，虽然sass不是最原始的语法，但是缩进语法将继续被支持，在缩进语法的文件以 .sass 为拓展名。
安装
- sass依赖于ruby环境，所以安装sass之前先确认安装了ruby
ps：安装时注意勾选添加到path - 在command中输入gem install sass安装sass，若安装失败，可以使用淘宝镜像
- 安装成功后使用sass -v查看sass版本
使用
在scss文件所在目录下，输入sass 目标文件名 重命名可编译sass，比如sass index.scss index.css
ps：windows系统下，按住shift键，右键点击文件夹，可选择“在此处打开命令窗口”快速定位，不用一直cd
基本用法
- 变量以$开头
如果变量需要嵌套在字符串中，就必须写在#{}中
$side:left;
.rounded{
border-#{side}-radius:5px;
} - 允许出现加减乘除算法
- 允许选择器嵌套；注意，嵌套时可以使用&引用父元素
a{
&:hover{color:red}
} - 注释一共有两种注释风格
/** dsada* /，会保留到编译后的文件。（/ *后面增加！代表重要注释，压缩模式下也会保留）
//dasdas，单行注释，只保留在sass源文件中 - 允许继承，关键字@extend
- 代码块，使用关键字@mixin定义代码块，使用@include使用代码块，允许在括号中传递参数，以及指定缺省值
@minxin left($value:10px){
float:left;
margin-right:$value;
}
div{
@include left(20px);
} - 使用@import命令插入外部文件
高级语法
@if可以用来判断
p{
@if 1+1==2{border:1px solid;}
@if5<3{border:2px dotted}
}for循环
@for $i from 1 to 10{
.border-#{$i}{
border:#{$i}px solid blue;
}
}while循环
$i:6;
@while $i>0{
.item-#{$i}{width:2em*$i;}
$i:$i-2;
}each
@each $member in a,b,c,d{
.#{$member}{
background-img:url("/image/#{$member}.jpg");
}
}自定义函数
sass允许用户编写自己的函数
@function double($n){
@return $n*2;
}
/#sidebar{
width:double(5px);
}
写法示例：右侧为sass写法，左侧为编译之后的。
