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)
}