简介

Sass 有两种语法规则(syntaxes),目前新的语法规则（从 Sass 3开始）被称为 “SCSS”( 时髦的css（Sassy CSS）),它是css3语法的的拓展级，就是说每一个语法正确的CSS3文件也是合法的SCSS文件，SCSS文件使用.scss作为拓展名。第二种语法别成为缩进语法（或者 Sass），它受到了Haml的简洁精炼的启发，它是为了人们可以用和css相近的但是更精简的方式来书写css而诞生的。它没有括号，分号，它使用 行缩进 的方式来指定css 块，虽然sass不是最原始的语法，但是缩进语法将继续被支持，在缩进语法的文件以 .sass 为拓展名。

安装

1. sass依赖于ruby环境，所以安装sass之前先确认安装了ruby
   ps：安装时注意勾选添加到path
2. 在command中输入gem install sass安装sass，若安装失败，可以使用淘宝镜像
3. 安装成功后使用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写法，左侧为编译之后的。

Paste_Image.png