属性声明的排序

  1. 属性声明

    首先列出除去 @include 和嵌套选择器之外的所有属性声明。

    1.  .btn-green {
    2.    background: green;
    3.    font-weight: bold;
    4.    // ...
    5.  }

  2. @include 声明

    紧随后面的是 @include，这样可以使得整个选择器的可读性更高。

    1.  .btn-green {
    2.    background: green;
    3.    font-weight: bold;
    4.    @include transition(background 0.5s ease);
    5.    // ...
    6.  }

  3. 嵌套选择器

    如果有必要用到嵌套选择器，把它们放到最后，在规则声明和嵌套选择器之间要加上空白，相邻嵌套选择器之间也要加上空白。嵌套选择器中的内容也要遵循上述指引。

    1.  .btn {
    2.    background: green;
    3.    font-weight: bold;
    4.    @include transition(background 0.5s ease);
    6.    .icon {
    7.      margin-right: 10px;
    8.    }
    9.  }