概念

  • 是Ruby语言写的
  • 以.scss 作为拓展名
  • 编译成css后才能被浏览器识别
  • CSS设计师专用，Sass程序员专用，使CSS可编程
  • 提供编程语言才有的特性：如变量，条件语句，循环语句，宏，函数

命令行

1
2
3
4
5
6
7
8
9
10
11
//安装Sass，安装前需要安装Ruby
gem install sass
//在屏幕上显示.scss文件转化的css代码
sass test.scss
//将显示结果保存成.css文件
sass test.scss test.css
//让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本
//监听一个文件
sass --watch input.scss:output.css
//监听一个目录
sass --watch app/sass:public/stylesheets

注释

  • 标准的CSS注释 /* comment */ ，会保留到编译后的文件。

  • 单行注释 // comment，只保留在SASS源文件中，编译后被省略。

  • 在/*后面加一个感叹号，表示这是”重要注释”。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

    1
    2
    3
    4
    body {
      color: #333; // 这种注释内容不会出现在生成的css文件中
      padding: 0; /* 这种注释内容会出现在生成的css文件中 */
    }

变量

  • 可以在外部声明，也可以在规则块内声明

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    $nav-color:#F90;
    nav {
      $width: 100px;
      width: $width;
      color: $nav-color;
    }
    //编译后
    nav {
      width: 100px;
      color: #F90;
    }

嵌套

  • 标签嵌套

    1
    2
    3
    4
    5
    6
    7
    8
    9
    div {
      hi {
        color: red;
      }
    }
    //编译后
    div h1 {
      color: red;
    }

  • 属性嵌套

    1
    2
    3
    4
    5
    6
    7
    8
    9
    p {
      border: {
        color: red;
      }
    }
    //编译后
    p {
      border-color: red;
    }

  • 父选择器&，主要解决伪类问题

    1
    2
    3
    4
    5
    6
    7
    8
    9
    a {
      &:hover { 
        color: #ffb3ff; 
      }
    }
    //翻译后
    a:hover {
      color: #ffb3ff;
    }

  • 群组选择器嵌套

    1
    2
    3
    4
    5
    6
    7
    8
    9
    div {
      h1, h2, h3 {
        color: red
      }
    }
    //翻译后
    div h1, div h2, div h3 {
      color: red
    }

  • 子选择器嵌套

    1
    2
    3
    4
    5
    6
    7
    8
    9
    div {
      >p {
        >color: red
      }
    }
    //翻译后
    div > p {
      color: red
    }

@import导入

  • 在一个scss文件中导入另一个scss文件比如在a.scss中导入b.scss

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    //a.scss中的内容
    aside {
      background: blue;
      color: white;
    }
    //在b.scss中导入a.scss
    .blue-theme {
      @import "blue-theme"
    }
    //生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。
    .blue-theme {
      aside {
        background: blue;
        color: #fff;
      }
    }
    //翻译后
    .blue-theme aside {
      background: blue;
      color: #fff;
    }

  • 不能在.scss中直接导入.css，但可以把原始的.css文件改名为.scss后缀后导入

@mixin混合器

  • 类似c语言中的宏

  • 当有大段重用样式时，可以用混合器来定义

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    //使用@mixin来定义一段样式快
    @mixin left {
      float: left;
      margin-left: 10px;
    }
    //使用@include命令，调用这个mixin。
    div {
      color: red; 
      @include left;
    }
    //编译后
    div {
      float: left;
      margin-left: 10px;
    }
    //混合器可以指定参数和缺省值。
    @mixin rounded($vert, $horz, $radius: 10px) {
    　　　　border-#{$vert}-#{$horz}-radius: $radius;
    　　　　-moz-border-radius-#{$vert}#{$horz}: $radius;
    　　　　-webkit-border-#{$vert}-#{$horz}-radius: $radius;
    }
    //使用的时候，可以像下面这样调用：
    #footer { @include rounded(top, left, 5px); }

条件与循环

  • @if判断

    1
    2
    3
    4
    p {
    　　@if 1 + 1 == 2 { border: 1px solid; }
    　　@if 5 < 3 { border: 2px dotted; }
    }

  • @else

    1
    2
    3
    4
    5
    @if lightness($color) > 30% {
    　　background-color: #000;
    } @else {
    　　background-color: #fff;
    }

  • @for循环

    1
    2
    3
    4
    5
    @for $i from 1 to 10 {
    　　.border-#{$i} {
    　　　　border: #{$i}px solid blue;
    　　}
    }

  • @while循环

    1
    2
    3
    4
    5
    $i: 6;
    @while $i > 0 {
    　　.item-#{$i} { width: 2em * $i; }
    　　$i: $i - 2;
    }

  • @each循环，与for类似

    1
    2
    3
    4
    5
    @each $member in a, b, c, d {
    　　.#{$member} {
    　　　　background-image: url("/image/#{$member}.jpg");
    　　}
    }

自定义函数

1
2
3
4
5
6
@function double($n) {
　　@return $n * 2;
}
#sidebar {
　 width: double(5px);
}

继承

  • SASS允许一个选择器，继承另一个选择器。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    //比如，现有class1：
    .class1 {
    　　border: 1px solid #ddd;
    }
    //class2要继承class1，就要使用@extend命令：
    .class2 {
    　　@extend .class1;
    　　font-size:120%;
    }

计算

  • SASS允许在代码中使用表达式计算

    1
    2
    3
    4
    5
    body {
    　　margin: (14px/2);
    　　top: 50px + 100px;
    　　right: $var * 10%;
    }