SASS学习记录

前言

很久没有用文章记录自己的学习历程了，主要是因为实在写的不行，相比大牛写的博客，我这只能算是东拼西凑或者说是读书笔记。但是今天还是拾起笔来了，虽然没什么干货，但是对自己而言，总结的过程可以加深对零碎知识的了解，将来自己如果忘记某些知识，可以迅速查找并捡起来；如果以后忘了自己的当初的目标，也能回头看看自己曾经做过的努力。

想起总结的另一个原因，就是自己在最近的实习中学到了很多东西，终于把自己看过的零碎知识用起来了。应了那句话，“纸上得来终觉浅，绝知此事要躬行”。当前参与的项目是一个基于React做的单页应用，技术栈采用React+Redux+Webpack，样式部分采用SCSS书写。以前我只使用外部CSS，现在的SCSS更加好用，所以在学习过程中记了一些笔记。SCSS和CSS基本没什么区别，只是增加了一些编程方法，这些方法都很简单，用起来受益匪浅。SASS和SCSS区别不大，所以我在本文仅提及SCSS。

SASS简介

SASS（Sassy CSS）是一种CSS开发工具，提供了CSS的便利写法，通过编译生成最终的CSS文件（补充，SASS的预编译就是针对下述语法的再排版，没有任何额外的处理加工，我以前觉得会将冲突样式覆盖掉什么的，目前看来并没有）。
SASS安装：SASS是用Ruby写的，但是语法上没有联系，仅仅是需要安装Ruby而已，然后在Ruby中安装SASS，在Ruby的命令行中输入以下命令即可：
gem install sass

将SASS编译为CSS很简单：

    sass <filename.scss> //将SASS转化为CSS并显示在命令行上，
    sass <filename.scss> <filename.css>//将SASS转换为CSS并保存在fileName.css中。
    sass -watch <input:scss>:<output.scss> //监听目标文件，一旦有变动就自动生成编译后的版本。

SASS的编译风格有四种：
nested: 嵌套缩进的CSS代码，是默认值；
expanded:没有缩进的、扩展的CSS代码；
compact: 简洁格式的CSS代码；
compressed: 压缩后的CSS代码，也就是去掉注释和空格。生产环境中，一般采用compressed风格降低代码体积。一个完整的sass转换命令如下：

        sass --style compressed test.sass test.css
        //--style compressed表示编程风格

SASS简单编程风格

SASS的简单用法包含使用变量、选择器嵌套以及加减乘除运算，复杂用法包括extend实现样式继承、Mixin实现代码块、颜色函数、@import插入外部CSS或SCSS文件、@if/@while/@each/@function实现的函数功能。
1允许使用变量，变量以$开头，定义方式类似于CSS。如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。变量使用场景是那些需要全局复用的值，例如字体样式，定义完之后直接调用有利于保持较大型CSS文件中字体的一致性。

　　$side : left;
　　.rounded {
　　　　border-#{$side}-radius: 5px;
　　}

一个有意思的特点是变量定义具有类似作用域的特性，嵌套的内部标签能使用外部标签的变量，但是如果不存在嵌套关系或者在外部使用内部定义的变量，会导致错误：
1)不存在嵌套关系不能引用：

2) 外部定义内部可以使用：

3) 内部定义外部不能使用：

如果一个变量想在全局引用，可以通过!global关键字实现这一点：

2允许使用加减乘除，最终结果会在编译后的CSS文件中体现出来：

3 SASS允许选择器嵌套，好处是避免了父级选择器的重复，复杂CSS样式可以借助类似HTML式的嵌套结构表示出来。比如，下面的CSS代码：

    　　div h1 {
    　　　　color : red;
    　　}

可以写成：

    　　div {
    　　　　hi {
    　　　　　　color:red;
    　　　　}
    　　}

属性也可以嵌套，比如border-color属性，可以写成：

    　　p {
    　　　　border: {
    　　　　　　color: red;
    　　　　}
    　　}

注意，border后面必须加上冒号。
在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：

&必须位于复合选择符的起始位置，但是可以加后缀。如果父级不能添加后缀，SASS会抛出错误。

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}

嵌套式写法对具有命名空间的CSS属性可以进一步简化，例如font-family, font-size, and font-weight可以写成

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

4 SASS共有两种注释风格。标准的CSS注释 / comment / ，会保留到编译后的文件。单行注释 // comment，只保留在SASS源文件中，编译后被省略。在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

SASS高级用法

1 实现继承
SASS允许一个选择器继承另一个选择器，实现继承的关键字和ES6实现class继承的关键字类似是extend，例如希望class2继承class1，在class2的样式声明中加入 @extend .class1即可。

2 实现Mixin
Mixin类似于c语言的宏，也就是可以重用的代码块，使用@mixin命令可以定义一个代码块。使用@include命令调用这个minxin即可。

代码块中可以指定默认参数，调用时可以赋值：

一个更经典的例子是加入浏览器前缀，用法如下：

3 颜色函数生成系列颜色。

    lighten(#cc3, 10%) // #d6d65c
　　darken(#cc3, 10%) // #a3a329
　　grayscale(#cc3) // #808080
    complement(#cc3) // #33c

4 插入文件
@import命令插入外部文件，sass的导入(@import)规则和CSS的有所不同，编译时会将@import的scss文件合并进来只生成一个CSS文件。但是如果你在sass文件中导入css文件如@import 'reset.css'，那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以@import方式存在。
使用@import的一个好处是所有外部文件的引入仅需要一个HTTP请求，但是CSS中使用@import命令就会引入多个HTTP请求，就网页优化而言在SASS中使用@import更有优势。
所有的sass导入文件都可以忽略后缀名.scss，但是CSS导入文件不可以省略后缀名。一般来说基础的文件命名方法以_开头，如_mixin.scss。这种文件在导入的时候可以不写下划线，可写成@import "mixin"。

5 条件语句
使用@if和$else表示判断

　　@if lightness($color) > 30% {
　　　　background-color: #000;
　　} @else {
　　　　background-color: #fff;
　　}

6 循环语句使用@for、@while和$each语句。

@for $i from 1 to 10 {
　　　　.border-#{$i} {
　　　　　　border: #{$i}px solid blue;
　　　　}
}

$i: 6;
　　@while $i > 0 {
　　　　.item-#{$i} { width: 2em * $i; }
　　　　$i: $i - 2;
}

@each $member in a, b, c, d {
　　　　.#{$member} {
　　　　　　background-image: url("/image/#{$member}.jpg");
　　　　}
　　}

7 自定义函数

可以看出循环以及函数的使用类似于JavaScript，只是需要在关键字前加上@字符。