scss

• 变量

变量的声明：

$/^[A-Za-z_]+\w*/ : value

变量类型：

1. 数字（e.g. 2，3，10px）
2. 有引号或者没有引号的文本字符（e.g. foo,"foo",'foo'）
3. 色值（e.g. blue，#333，rgba(255,255,255,0.5)）
4. 布尔型（e.g. true，false）
5. 空（e.g. null）
6. 列表值，用空格或逗号分隔（e.g. 3px solid #333, Arial, sans-serif）
7. sass 3.3.4中新增加一种数据类型map(映射类型)（e.g. $map:(key1:value1,key2:value2,key3:value3) ）

使用变量的注意事项：

1. 变量名称首字母不可以是数字
2. 1px+1pt，此种做法虽然也可以编译成功，但却增加了维护人员的理解成本

• 嵌套结构：

  形如：

    .box1 {
        .box2 {
            .box3 {
                ...
            }
        }
    }

使用嵌套结构的注意事项：

1. 嵌套切忌过深，以1-2层为宜

• mixin（宏）：

    // 定义：
    @mixmin mmm($width) {
        width: $width;
        height:100px;
    }

    // 使用：
    .box {
        @include: mmm(100px);
    }

使用mixin的注意事项：

1. mixin在命名上应当以其代码功能命名，因其意义仅为引用它的某个类添加某一项功能。比如现在有一个mixin，它的功能是文字超出时显示...，那么命名应当为words-overflow-ellipsis，这样维护者一看这个mixin就知道这个mixin是干嘛的。
2. mixin的参数可以省略，省略时定义和使用都不需要加括号

• 继承
  子类是父类的扩展，父类是子类的抽象。

    .message {
      border: 1px solid #ccc;
      padding: 10px;
      color: #333;
    }
    .success {
      @extend .message;
      border-color: green;
    }
    .error {
      @extend .message;
      border-color: red;
    }

可以看到继承和mixin有些相像，那我们就来说一下两者的区别：

1. 定义好的mixin无法直接使用，必须include到某个类中才会起作用；而定义好的父类则可以直接使用。
2. 何时使用mixin，何时使用继承？仅为某一个类添加某个功能时用mixin，两个类有明显继承关系的时候用继承。

• 注释
  scss中的注释有两种，一种是单行注释 // ，此种注释编译后不会存在于css文件中。另一种注释是传统的css注释，即形如 /* 这里是注释 */ 这样的注释，此种注释编译后会存在于css文件中。推荐使用第一种注释，因为我们直接编写和维护的都是scss代码，并不接触css代码，所以保留注释没有意义，且保留注释还会增加文件体积。

• 命名空间
  ！ 此命名空间与css中的namespace没有任何关联，仅是字面意思。
  我们的项目在打包时都会把所有的scss文件import到一个文件里，最后生成一个css文件，那么这就产生了一个问题：不同的人写的class可能会重复名字。这个问题有两种解决方案：第一种就是嵌套式地组织scss代码，比如我们的项目结构如下：
  
  那么就应该这样嵌套

    .win {
        .implement {
            .upload{ ... }
        }
    }

这样做就不会产生命名冲突的问题了，但是我们在前文中也讲过，嵌套切忌过深。现在我们为了组织代码就产生了3层结构，在业务代码中稍微嵌套一下层数就到六七层了，这会产生一定的性能问题。为了避免这样的问题，就有了第二种解决方案，此种解决方案从命名上入手，顶级目录的scss就以顶级目录命名，下层目录以上层目录为前缀。以上图为例，win-win是顶级目录，他的scss代码中设置一个.win的类，业务代码中的样式都写在.win这个class的内部。这个implement文件夹是win-win文件夹的子文件夹，它的样式代码应该都写在.win-implement的类里，这个upload的scss应该都用
.win-implement-upload包起来。因为我们的项目结构最多也就嵌套3层，所以这样做在命名上也不会太难看。关于component中的scss我建议都加上component-这样的前缀。最后在引入的时候顺次将全局变量、全局样式、组件样式、业务代码样式引进来，并添加必要的注释，这样一个清晰无冲突的scss结构就搭建好了。

这里我有几点书写scss的建议：

1. 添加适量的注释
2. 尽量少嵌套
3. 尽量不要用元素和ID选择器。样式代码应当只与HTML中的class有关系，不能因为我把ul换成ol这个代码就不work了。正确的做法是给ul添加一个xxlist的class，今后不管我把ul变成什么了，只要把这个xxlist的class加上，我的代码就能立刻work。样式代码与HTML代码耦合越紧，所带来的维护难度就越大。在代码中为了避免嵌套可以使用加前缀的class，前缀以逻辑上的父级的class 为宜。
4. 类的命名：类命名应当以其本质命名，而非表现。换句话说，class应当是一个事物是什么，而非它有什么或者能做什么。举个例子，class：人；It’s a good class.class：有手；It’s a bad class。如果说仅仅是为了符合标准，那我们这么做的意义其实并没有那么大。那么我们这样做的好处在哪里呢？
5. 一定不要出现box1这样的class。哪怕你的命名加了很多个前缀也比无意义要强。比如xx-error-link-xx-xx，这样你写出来的class虽然丑了点，但最起码还是可维护的。
6. css是不区分大小写的，所以不要使用驼峰命名法。