【React前置知识】01. SASS

其实sass一直有在使用，但是只是非常简单基础的嵌套，没有发挥到其真正作用的10%，这次趁有空，整理一下sass的知识点。主要学习慕课网的视频教程【Sass和Compass必备技能之Sass篇】的笔记，感恩✿✿ヽ(°▽°)ノ✿

.sass和.scss

// .sass：类ruby语法，空格敏感
h1
    color: #000
    background: #fff

// .scss：类css语法，花括号
h1 {color: red;}

sass安装及使用

安装ruby和rvm（可选，用于版本管理）

通过gem(ruby安装自带的一个包管理器)安装sass。

gem sources -l // 显示当前的源
gem sources --remove ... // 删除源...
gem sources -a ... // 添加源..
gem install sass // 安装sass
gem install sass --version=3.5.6 // 安装版本为3.5.6的sass
gem uninstall sass // 卸载sass

sass语法介绍

sass main.scss main.css // 编译成css文件
sass-convert main.scss main.sass // .sass和.scss

变量：存储一些后期可能会修改的通篇使用的量，如字体等等，一般放在文件头部；
```
$headline-ff: Braggadocio, Arial, Verdana, Helvetica, sans-serif;
```
文件引入@import：类似于全局变量通常会单独放在一个文件中（_variables.scss）需要时通过import引入。
```
@import "variables";
// 多个import可用,分割
@import "variables", "compass/reset";
```
注意：这里的@import并不是css原生的@import（缺点：CSS原生的@import必须要放在代码的最前边才能生效；当a.css引入了b.css，只有当浏览器将a下载下来，解析渲染时读到import时才回去下载b，此时浏览器处于阻塞过程，大大影响渲染时间，所以不建议使用）。sass在被编译时会将import的文件输出到相应的css文件，并且import指令可以放在任何地方。
```
以下情况使用的是css原生import
1. 文件名为.css结尾 
@import "variables.css";
2. "http://"开头的字符串 
@import "http://variables.css";
3. url()函数
@import url("variables.css");
4. 跟有media queries
@import "variables" projection tv;
```

嵌套语法和父类选择器

// 类的嵌套
.head {
    .content { color: red; }
    &:hover { background: green; } // 父类选择器&
    font: { // 属性嵌套
        family: Arial;
        size: 16px;
    }
}

变量操作
- 操作方式
  (1) 直接操作变量，即变量表达式；
  (2) 通过函数操作，函数包含以下几种：
  a. functions：跟代码块无关的函数，多为内置函数
  b. 可重用的代码块（类似于C中的宏macro）
  b.1. 使用时以复制拷贝的方式存在，称为mixin，通过@include调用
  b.2. 使用时以组合声明的形式存在，通过@extend调用
- 支持的运算操作符包含：<,>,<=,>=,!=, ==, ()。sass中的数值计算可以带单位，所以单位并不能混用。
- sass支持css3中添加的hsl功能，自动转换为16进制色值，解决了不兼容问题。
- mixin代码块的声明：一般放在页面顶部@import之后，或者单独抽离出一个文件，引入方法如下：
```
@mixin col-6 {
    width: 50%;
    float: left;
}
.webdemo {
    @include col-6();
}

// 一种可以实现但是不建议的方法，
// 规范建议类名最好有语义化的作用，而非视觉化
@mixin col-6 {
    .col-6 {
        width: 50%;
        float: left;
    }
}

@include col-6();

// 带参数的mixin, 50%为默认参数
@mixin col ($width: 50%) {
    width: $width;
    float: left;
}
```
- 组合声明：以一种继承的形式来避免CSS的冗余。工作原理是把继承者的选择器，插入到被继承者选择器所在的位置。
```
.error.instruction {
    color: #0f0;
}

.error {
    color: #f00;
}

.serious-error {
    @extend .error;
    border: 1px #f00;
}

<div class="serious-error instruction">serious</div> // #0f0
```
  注意：extend不能继承选择器序列（即@extend .A .B不可行，会报错）；使用%可构建仅用于继承的选择器（%name {...}），不会出现在生成文件中。
sass中的媒体查询：sass中的media query可以内嵌在css规则中，在生成css的时候，media query才会被提到样式的最高层级。避免重复书写选择器，同时避免打乱样式表的流程。
sass提供了非常好的嵌套能力，但是嵌套带来的副作用也是不可忽视的：
- 浏览器解析css文件是按照从右往左的顺序。即对于.main .headline会先找到类名为headline的元素，然后再向上查找父级元素是否类名为main，否则继续向上直到查找到类名对应的元素或者html元素。这样导致渲染效率的低下；
- 增加了样式修饰的权重；
- 制造了样式位置的依赖；
最佳实践是在命名的时候对类名进行语义化的命名，比如.main-headline，同时为了保留嵌套清晰易维护的优点，可以通过at-root指令指明将嵌套的内容输出到样式表顶层。

mixin的参数校验示例

@mixin col-sm ($width: 50%) {
    /*输入校验*/
    @if type-of($width) != number {
        @error "$width必须是一个数值类型，目前输入的width是#{$width}.";
    }

    @if not unitless($width) { /* 没有单位 */
        @if unit($width) != "%" {
            @warn "$width必须是一个百分值，目前输入的width是#{$width}.";
        }
    } @else {
        @warn "$width必须是一个百分值，目前输入的width是#{$width}.";
        $width: (percentage($width) / 100); /*数值变成百分号表示形式时会增加100倍*/
    }
    @media (min-width: 768px) {
        width: $width;
        float: left;
    }  
}

sass的四种输出格式config.rb中的output_style：
- expanded：默认，样式展开，与手动书写css习惯一致；
- nested：反映css样式修饰的html的结构，根据嵌套对应缩进样式；
- compact：将所有属性汇总到一行，关注选择器之间的关系，而非选择器内的属性；
- compressed：样式表压缩以占用最少的空间。
其他：@each @for @while
常用网址
- Sass中的functions详情页：http://sass-lang.com/documentation/Sass/Script/Functions.html
- Sass和Compass必备技能之Sass篇（视频教程）：https://www.imooc.com/video/7155

【React前置知识】01. SASS

.sass和.scss

sass安装及使用

sass语法介绍

猜你喜欢