sass学习笔记

sass学习笔记

• Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器

  
  #main p {
  
      color: #00ff00;
      width: 97%;
  
      .redbox {
          background-color: #ff0000;
          color: #000000;
      }
  }
  
  编译为
  
  
  #main p {
  
      color: #00ff00;
      width: 97%; 
  }
  
  #main p .redbox {
  
      background-color: #ff0000;
      color: #000000; 
  }

  • 父选择器 &: 代表嵌套规则外层的父选择器

    a {
        font-weight: bold;
        text-decoration: none;
        &:hover { text-decoration: underline; }
        body.firefox & { font-weight: normal; }
    }
    
    编译为
    
    a {
        font-weight: bold;
        text-decoration: none; 
    }
    a:hover {
        text-decoration: underline; 
    }
    body.firefox a {
        font-weight: normal; 
    }

  • 属性嵌套: CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中

    .funky {
        font: {
            family: fantasy;
            size: 30em;
            weight: bold;
        }
    }
    
    编译为:  
    
    .funky {
        font-family: fantasy;
        font-size: 30em;
        font-weight: bold; 
    }

  • 注释： Sass 支持标准的 CSS 多行注释 /* */，以及单行注释 //，前者会 被完整输出到编译后的 CSS 文件中，而后者则不会

  • 变量 $:
    变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明。
    可以在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。

    $width: 5em;
    
    直接使用即调用变量：
    
    
    #main {
    
        width: $width;
    }

  • 数据类型: 支持 6 种主要的数据类型

    数字，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)

  • 运算

    1. 数字运算
    2. 颜色值运算
    3. 字符串运算
    4. 布尔运算

  • 函数

  • 插值语句 #{}: 通过 #{} 插值语句可以在选择器或属性名中使用变量

    $name: foo;
    $attr: border;
    p.#{$name} {
        #{$attr}-color: blue;
    }
    编译为
    
    p.foo {
        border-color: blue; 
    }

  • @extend 引用另一个类的样式

    .error {
    border: 1px #f00;
        background-color: #fdd;
    }
    .seriousError {
        border-width: 3px;
    }
    
    -->
    
    .error {
        border: 1px #f00;
        background-color: #fdd;
    }
    .seriousError {
        @extend .error;
        border-width: 3px;
    }

  • 控制指令: @if @for @each @while

  • 混合指令 (Mixin Directives)
    混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的 class，比如 .float-left。混合指令可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式。

    1. 定义混合指令 @mixin

       @mixin large-text {
           font: {
               family: Arial;
               size: 20px;
               weight: bold;
           }
           color: #ff0000;
       }

    2. 引用混合样式 @include

       .page-title {
           @include large-text;
           padding: 4px;
           margin-top: 10px;
       }

    3. 参数

       @mixin sexy-border($color, $width) {
       border: {
           color: $color;
           width: $width;
           style: dashed;
       }
       }
       p { @include sexy-border(blue, 1in); }