css全称是 Cascading Style Sheets，翻译过来就是层叠样式表的意思，是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。 无论是网页设计师还是前端工程师，掌握css是必备的技能。是前端三大件html、javascript、css之一。

而在使用css的时候，有一些痛点相信大家都能感受得到，最大问题就是重复代码太多，不同样式只有细微差别也是一一重复书写，而且调整定义要全部手工一一改写，效率不仅太低，而且很容易出错。

因此能不能让css定义象其它开发语言一样的，能进行代码重用呢？ 因此在 2010年，ruby公司推出了scss,它在css在基础引入变量，函数，继承之类语法，让css编写更高效方便。

scss的全称是Sassy CSS，时尚的样式表？因为它是css的预编译语言，就是在css增加一些高级语言的特性，经过scss编译器会生成对应的css的定义，所以scss的语法是兼容css,会的前端上手很快。

当然这是ruby语言社区搞来出来的，Node.js社区的也推出一个类似的Stylus语言，只不过使用没那么广泛。

scss扩展的语法

我这里重点讲一些scss的扩展出来的语法，

变量

第一个是变量，即以$打头就是变量，如果你在scss各处引用这个变量，当值发生变化时，你只要改一个定义就行，比如你定义app的基准色 primary-color，当由blue变为yellow，不需要到css一个一个改。

$primary-color:blue; //变量定义
body{
    background-color:$primary-color; //变量引用
}

编译后代码

body {
  background-color: blue;
}

注释

在css中只能用/* */这种注释，在临时关闭一行代码或非常不方便，在scss这种注释会被输出到编译后的 CSS 文件中

scss支持 // 这种高级语言支持的单行注释，不会被输出到编译后的 CSS 文件中

还有一个/* ! xxx*/ 特别重要注释,就是经过压缩后的css文件也不会去掉

// This comment won't be included in the CSS.

/* But this comment will, except in compressed mode. */

/* It can also contain interpolation:
 * 1 + 1 = #{1 + 1} */

/*! This comment will be included even in compressed mode. */

p /* Multi-line comments can be written anywhere
   * whitespace is allowed. */ .sans {
  font: Helvetica, // So can single-line commments.
        sans-serif;
}

数据运算

对于属性值是可以计算的，并且可以带变量计算。css支持通过calc函数计算，但没这么功能全

heigth: 100px - 80px + 300px; //减法
heigth: 100px * 100 //乘法,注scss的乘法和除法是带单位的
heigth: (100px/3)  //注意这里需要带括号,如果不带括号会当场分割数子
heigth: $width / 3 //也可以不带括号,但是里面计算的一定要有声明的变量,因为这个语法css不认识,那么就会被解析成SCSS
heigth: 100 % 3px //
heigth:calc(100px+20px)

函数

用@function 定义，可以传入参数进行运算后，用@return 返回样式

//定义函数，实现px与rem的转化
@function px2rem($px, $base-font-size: 100px) {
    @if (unitless($px)) {
        @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
        @return j($px + 0px); // That may fail.
    }

    @else if (unit($px)==rem) {
        @return $px;
    }

    @return ($px / $base-font-size) * 1rem;
}

.box{
    width:px2rem(200); //引用函数
    height:px2rem(200);//引用函数
}

最终函数不会出现最终的css当中，而用计算结果直接代替了引用函数的地方,输出结果

//转换CSS
.box {
    width: 2rem;
    height: 2rem;
}

继承

这是一个最重要特性之一，类似于面向对象语言的继承，这样可以把一些共享的样式用继承的方式扩展起来，即简化代码，也方便调整。继承是通过@extend 关键字实现的。

.full-screen {
  	position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
}
.container{
	  @extend .full-screen
	}
.bg-set{
    @extend .full-screen
    z-index: -1;
}
  

在继承中有一个特殊父类，就是以%打头的类，你可以认为这一种类是类似于C的宏，即没有引用不会在css出现，这样可以进一步缩小css的生成大小。

%flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.top {
    z-index:-1；
    @extend %flex-center;
}

.container {
    background-color:red；
    @extend %flex-center;
}

混和 @mixin

这种语法跟继承一样也是样式重用的一种方式，类似于高级语言中类横向扩展。

它用@mixin 来定义共享类，而用@include来引用这个混合，上面一个例子改写成混合

//定义混合
@mixin flex-center () {
    display: flex;
    align-items: center;
    justify-content: center;
}

.top {
    @include flex-center(); //混入代码
}

.container {
    @include flex-center(); //混入代码
}

引用

引用另外一个scss文件内容采用@import 指令

嵌套类选择器

这是可以在样式中嵌套样式，这样一是让代码更清晰，二是可以简单定某一些父类下的子类特定样式，以免污染其它子类。

.father {
    color: red;
    .son {
        color: green;
        .grandSon {
            color: blue;
        }
    }
}
//嵌套展开的css类
.father {
    color: red;
}
.father .son {
    color: green;
}
.father .son .grandSon {
    color: blue;
}

混合和继承的区别？

看起来混合和继承的作用是一样的，那为什么scss会有两种语法呢？主要两大区别，一是最终css代码不一样，二是混合可以带参数初始化。

继承生成css中，原有子类定义不会动，会另外把所有子类再生成一个共享样式

以上一个继承为例

//继承生成共享样式
.container, .top {
    display: flex;
    align-items: center;
    justify-content: center;
}

//原来定义
.top {
   z-index:-1 
}

.container {
    background-color:red；
}

而混合是直接把代码加入到子类当中

//混合展开的样子
.top {
    z-index:-1 
    display: flex;
    align-items: center;
    justify-content: center;
}

.container {
    background-color:red；
    display: flex;
    align-items: center;
    justify-content: center;
}

因此混合实际上是类似于C语言的参数宏，会生成更多的代码。

而且想带参数来初始化共享代码，只能用混合

@mixin main-button($bk-url,$width,$basis,$order) {
  width: 21.5rem;
   background-image: url($bk-url);
   background-color:transparent; /* f去掉默认白色 */
   border: none;
   order: $order;
   align-self: auto;
 flex-basis: 5rem;
 flex-grow: 0;
 flex-shrink: 0;
}

.button1 {
  @include main-button("/static/images/button1.png",21.5rem,5rem,2)
}