sass.md

Posted on | In

  1. 变量

    1
    2
    3
    4
    5
    6
    7
    // 定义
    $main-fonts: Arial, sans-serif;
    $secound-color: ;
    // 使用
    p {
        color: $headings-color;
    }

  2. 嵌套这个很简单就不说了。但是记得&符号

  3. Mixin：可重用代码段

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // 定义
    @mixin box-shadow($x, $y, $blur, $c){
      -webkit-box-shadow: $x, $y, $blur, $c;
      -moz-box-shadow: $x, $y, $blur, $c;
      -ms-box-shadow: $x, $y, $blur, $c;
      box-shadow: $x, $y, $blur, $c;
    }
    // 使用
    div {
        @include box-shadow(0px, 0px, 4px, #fff)
    }

  4. if-else分支语句
    该分支语句只能用在mixin里

而这个最大的作用就是控制主题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@mixin make-bold($bool) {
  @if $bool == true {
    font-weight: bold;
  }
}

@mixin text-effect($val) {
  @if $val == danger {
    color: red;
  }
  @else if $val == alert {
    color: yellow;
  }
  @else if $val == success {
    color: green;
  }
  @else {
    color: black;
  }
}

  1. for循环

    1
    2
    3
    4
    // scss网格布局
    @for $i from 1 through 12 {
      .col-#{$i} { width: 100%/12 * $i; }
    }

  2. each循环

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    // 迭代数组
    @each $color in blue, red, green {
      .#{$color}-text {color: $color;}
    }

    @each $color in blue,black,red {
      .#{$color}-bg {background: $color;}
    }

    // 迭代类对象
    $colors: (color1: blue, color2: red, color3: green);

    @each $key, $color in $colors {
      .#{$color}-text {color: $color;}
    }

  3. while循环

    1
    2
    3
    4
    5
    $x: 1;
    @while $x< 13 {
      .col-#{$x} { width: 100%/12 * $x;}
      $x: $x + 1;
    }

  4. 命名规范
    使用下划线命名： _mixin.scss

    1
    2
    // 引入
    @import 'mixin'

  5. extend 元素重用样式

1
2
3
4
5
6
7
8
9
10
11
.panel{
  background-color: red;
  height: 70px;
  border: 2px solid green;
}

.big-panel{
  @extend .panel;
  width: 150px;
  font-size: 2em;
}