sass基础

　　Scss是css的预处理器，是css的扩展；它允许使用变量、嵌套规则、混合(mixins)、函数、导入等功能，并且完美的兼容 css 语法。

　　scss 和 sass 其实是两个可以互相转化的语法版本；sass 是一种缩排语法，提供了一种更简洁的 css 书写方式；它不适用花括号，而是通过缩排的方式来表达选择符的嵌套层级，就像 .pug 文件格式一样，而且也不使用分号，而是使用换行符来分割属性；scss 的全称是 sassy css，是一个 css3 语法的扩充版本。

基本使用：

　　1、变量

　　　　scss中所有变量的定义是以 $ 开头的；

　　　　在 scss 中允许使用的变量主要有六种：

　　　　　　1)、数字(例如：1.2、13、10px)；

　　　　　　2)、文本字符串，无论是否有引号(例如“foo”,'bra',baz)；

　　　　　　3)、颜色(例如blue、#04a3ddd、rgba(100,100,100,.5))；

　　　　　　4)、布尔值;

　　　　　　5)、空值；

　　　　　　6)、值列表，用空格或者逗号隔开(例如1.5rem 1rem 1.0rem、10、12、11);

　　　　　　此外，scss 还支持 css 的其他的属性值类型，例如unicode范围和 !important；

　　　　例如： $width: 20px；width:$width;   如果是插在字符串之间的就必须用 #{}；例如： $side: left ; border-#{$side}-radius: 4px;

运算

　　scss 支持的运算包括：加、减、乘、除、取余，以及>、>=、<、<=、 == 、!=；

　　　　例如：width: 100px/100px; width: $width/2; width: round(2.3)/2; width: 5px + 10px/2;

　　scss 支持的运算不仅是数字之间的运算，也支持颜色的运算；

　　　　例如：color: #012345 + #234123;

scss 嵌套

　　1)、选择器的嵌套

　　　　div {

　　　　　　width: 100%;

　　　　　　div {

　　　　　　　　width: 80%;

　　　　　　}

　　　　}

　　2)、属性嵌套

　　　　div {

　　　　　　border: {

　　　　　　　　width: 1px;

　　　　　　　　color: #eee;

　　　　　　}

　　　　}

　　3)、代码块内的嵌套，利用'&'表示对父元素的引用

　　　　div {

　　　　　　color: #eee;

　　　　　　&:hover {
　　　　　　　　color: #fff;

　　　　　　}

　　　　}

代码的复用

　　1、继承

　　　　.class1 { width: 10px; height: 20px; }  .class2 { @extend .class1; font-size: 12px; }

　　2、mixin的定义和引用

　　　　@mixin text( $width) { width: $width; height: 30px; }  div { @include text(20px); }

　　　　mixin其实就像函数一样，或者 c 语言以及 java 中宏的概念；在使用的时候，如果没有参数的时候，我们就不能带 小括号，如果存在参数的时候就要带小括号了，而且这里也是可以利用 es6 的结构赋值，进行设定默认值的；

　　3、自定义函数

　　　　@function fn($val) { return $val - 1 }  div { width: fn(20px)}

逻辑判断

　　1、if...else

　　　　div {  @if (true) { color: red; } @else { color: blue}　

　　2、for循环

　　　　div {

　　　　　　@for $index  from 1 to 10 {
　　　　　　　　&:nth-of-type($index) {

　　　　　　　　　　width: 10px * $index;

　　　　　　　　}

　　　　　　}

　　　　}

　　3、each循环

　　　　@each $name in one,two,three{

　　　　　　.#{$name} {

　　　　　　　　color: red;

　　　　　　}

　　　　}

引用和注释

　　引用： @import './a.scss

　　注释： // 单行注释

　　　　　/* 标准的css注释 */

　　　　　/* ! 重要的注释 ! */