CSS扩展“less"和”sass“

　　css扩展技术是对css原生代码一种扩展，其中less和sass就是css扩展技术两种方式，通过扩展技术，可以使我们在写css代码时候，更加的方便和快捷。

　　首先要了解css扩展技术的含义；扩展技术并不是另外一种全新的技术，它是建立在css基础上进行扩展，实现一些css原生代码所不能实现的功能，其次less和sass不能单独在浏览器上运行，需要进行编译；

　　less能实现同js一样的变量、函数、混合参数等功能，通常用@标志开始，后面接变量名字，具体如实例：@winth、@color、@height等等，这就是代表一个变量；然后在css进行编译时候实现 div{color：red，p{font-size：10px .cls{width：@width；height：@height}}；在css里就会显示出在css里显示会出div{}；div p{}；div p .cls{}；在显示伪类时候less用&符号表示，例如：&：hover；&表示当前父元素；

　　sass是我们比较常用一个扩展技术，首先他在webstorm上无法直接编译，需要一款第三方软件进行编译我们一般常用的环境需求是基于Rubg；

　 sass后缀名版本：“sass”“scss”；区别是sass语法没有大括号，而scss有大括号；sass与less不同点还有使用sass需要先进行声明：@mini，然后接收时候需要有接收命令：@import； 变量声明：$+变量； 默认变量：需要在后面加上！default即可；

　 变量在less 和 sass的全部变量和局部变量不同

1. less当中变量是按需加载，需要时候全局搜索；

2. sass变量是从上到下加载；
　 3. 默认值在封装代码时候很有用；
特殊变量 #{} - 对里面东西进行转义

1. $border:top;

2. .border-#{$border}{color:$color}

　　less和sass最重要一点就是可以嵌套

1. 里面元素加冒号表示是元素一个属性， 不加冒号表示一个子元素

2. @at-root 跳出父元素

　　sass同less一样有css原生代码所不具有的特殊功能和用途，他也可以有继承、占位选择器%、函数 、运算、 判断、 三目运算符、for循环等等功能

　　总之，通过css扩展技术我们可以更快更高效完成css代码的工作，让我们的工作更加的简单和重复利用；