less&sass

定义：

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文件；另一种方式是使用Less App来编译和压缩你的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}:10px solid #ccc;

2.会使用单位

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

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

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

 

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

调用：@include name(value);

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

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

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

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

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

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

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

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

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

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

5、if条件结构：

@if 条件{}

@else{}

 

6、for循环结构：

@for $i from 1 to 10{} 不包含10;

@for $i from 1 through 10{} 包含10;

 

7、while循环结构：

$j:1;

@while $j<10{

.while#{$j}{

border:#{$j}px solid red;

}

$j:$j+1;

}

 

8、each循环遍历

@each item in a,b,c,d{

//item表示每一项

}

 

9、函数：

@function func($length){

$length1:$length*5;

@return $length1;

}

调用：func(10px);

 

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

@mixin bordeRadius($param1...){

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

border-radius:$param1;

-webkit-border-radius:$param1;

}