web前端：less&sass

作者:Amy_Lin 更新于： 2020-03-03 11:04:45

　　css提供了丰富的文档样式外观，以及设置文本和背景属性的能力;允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离;允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

　　定义：

　　less是一种动态样式语言，对css赋予了动态语言的特性，比如变量、继承、运算、函数，既可以运行在客户端，也可以运行在服务器端，依赖Javascript

　　sass是一种动态语言，属于缩排语法，比css多出很多功能，比如变量、嵌套、运算、混入、继承、函数等，更容易阅读；

　　sass与scss关系：sass的缩排语法，对于阅读者很不直观，因此sass对语法进行改良，sass3就变成scss，与原来的语法兼容，只是用{}取代了原来的缩进

　　为什么要使用less和sass：

　　因为css只是单纯的属性描述，并不具有变量、条件语句等，css的特性导致了它难组织和维护。

　　less与sass相同之处：

　　1.混入class中的class

　　2.参数混入可以传递参数的class

　　3.嵌套规则class中嵌套class，从而减少重复的代码

　　4.运算使用数学

　　5.颜色功能可以编辑颜色

　　6.名字空间

　　7.作用域-局部修改样式

　　8.JavaScript赋值，在css中使用JavaScript表达式赋值

　　区别之处：

　　1.less基于JavaScript，是在客户端处理的

　　很多开发者不会选择Less因为javaScript引擎需要额外的时间来处理代码然后输出修改过的Css到浏览器，【解决：只在开发阶段使用Less,一旦开发完成，复制Less输出的到一个压缩器，然后用一个单独的css文件来代替Less文件；另一种方式是使用Lessapp来编译和压缩你的Less文件；这两种方式都是最小化样式输出】

　　2.sass是基于ruby的，是在服务器端处理的

　　变量在less和sass中唯一的区别就是，less使用@，sass使用$

　　3.变量、使用方面的区别

　　less:

　　1.变量：使用@变量名：变量值

　　2.混合：无参混合，代参混合

　　3.less的匹配模式，会根据调用时提供的条件只寻找与之匹配的mixins执行，其中@_表示永远需要执行的部分

　　4.less中的运算，加减乘除可带、可不带单位；颜色运算时，分红绿蓝三组进行运算，组内可进位，组间互不干涉

　　5.包含了传进来的所有参数：border：@arguments；

　　6.less中的嵌套保留了html的代码结构1）嵌套默认是后代选择器，如果需要子代选择器，则在子代前加>2）.&表示上一层&：表示上一层的hover事件

　　sass：

　　1.使用$变量名：变量值，如果变量需要需要在字符中嵌套，则需使用#加大括号包裹：border-#{$left}:10pxsolid#ccc;

　　2.会使用单位

　　3.嵌套：选择器嵌套伪类嵌套属性嵌套

　　选择器嵌套ul{li{}}后代ul{>li{}}子代&表示上一级属性嵌套：属性名与大括号之间必须有：border：{color：red}

　　4、混合宏、继承、占位符

　　①混合宏：声明：@mixinname($param:value){}

　　调用：@includename(value);

　　>>>声明时，可以有参，可以无参；可带默认值，也可不带；但是，调用时，必须符合声明规范。同less

　　>>>优点；可以传参，不会生成同名class；

　　>>>缺点：会将混合宏中的代码，copy到对应的选择器中，产生冗余代码！

　　②继承：声明：.class{}调用：@extend.class;

　　>>>优点：继承的相同代码，会提取到并集选择器中，减少冗余代码

　　>>>缺点：无法进行传参，会在css中，生成一个同名class

　　③占位符：声明：&class{}调用：@extend%class;

　　>>>优点：继承相同代码，会提前到并集选择器；不会生成同名的class选择器

　　>>>缺点：无法进行传参

　　综上所述：当需要传递参数时，用混合宏；当有现成的class时用继承；当不需要参数，也不需要class时，用占位符

　　5、if条件结构：

　　@if条件{}

　　@else{}

　　6、for循环结构：

　　@for$ifrom1to10{}不包含10;

　　@for$ifrom1through10{}包含10;

　　7、while循环结构：

　　$j:1;

　　@while$j<10{

　　.while#{$j}{

　　border:#{$j}pxsolidred;

　　}

　　$j:$j+1;

　　}

　　8、each循环遍历

　　@eachitemina,b,c,d{

　　//item表示每一项

　　}

　　9、函数：

　　@functionfunc($length){

　　$length1:$length*5;

　　@return$length1;

　　}

　　调用：func(10px);

　　10、使用...将传进来的所有参数，接收到一个变量中

　　@mixinbordeRadius($param1...){

　　//使用...将传进来的所有参数，接收到一个变量中

　　border-radius:$param1;

　　-webkit-border-radius:$param1;

　　}

　　简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。