less/sass

Less：

是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量、继承、运算、函数。
Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行。

Sass：

是一种动态样式语言，Sass语法属于缩排语法，
比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。

Sass 3就变成了Scss

Sass与Scss是什么关系?
Sass的缩排语法，对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到Sass里面，因此sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。

二、less和sass的 相同点

都可以视为一种基于CSS之上的高级语言，
其目的是使得CSS开发更灵活和更强大，
语法上有些共性，比如下面这些：
1、混入(Mixins)——class中的class；
2、参数混入——可以传递参数的class，就像函数一样；
3、嵌套规则——Class中嵌套class，从而减少重复的代码；
4、运算——CSS中用上数学；
5、颜色功能——可以编辑颜色；
6、名字空间(namespace)——分组样式，从而可以被调用；
7、作用域——局部修改样式；
8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

三、 less和sass的区别

1、 主要不同就是他们的实现方式。
less是基于JavaScript，是在客户端处理的。Sass是基于Ruby的，是在服务器端处理的。
2、作用域不一样，less是块级作用域
3、关于变量在Less和Sass中的唯一区别就是Less用@，Sass用$。
4、sass支持条件语句，如if{}else{}，for{}循环等，但是less不行

四.Sass比less的优势

1、因为Less与Sass处理机制不一样，
前者是通过客户端处理的，
后者是通过服务端处理，
相比较之下前者解析js会比后者慢一点。
2、丰富的sass库：Compass/Bourbon；
Sass的功能比Less强大,基本可以说是一种真正的编程语言了.Bootstrap/Foundation等使用scss；
less
优点
Less则相对清晰明了,易于上手,对编译环境要求比较宽松。
可以在浏览器中运行，实现主题定制功能；
缺点
编程能力弱，不直接支持对象，循环，判断等

考虑到编译Sass要安装Ruby,而Ruby官网在国内访问不了,个人在实际开发中更倾向于选择Less，
但也会去尝试使用sass，毕竟为以后的工作做准备。

1、Less：【两种注释方式】
①//less中的注释，但这种不会被编译
②/*

• 这也是less中的注释，但是会被编译
  */

【less中的变量】
1、声明变量:@变量名:变量值;
使用变量: @变量名

less中变量的类型：
①数字类 1 10px
②字符串：无引号字符串 red ;有引号字符串 “haha”
③颜色类：red #000000 rgb()
④值列表类型：用逗号和空格分隔 10px solid red
变量使用原则：
多次频繁出现的值、需要修改的值，设为变量
2、混合(MiXins)①无参混合
声明：.name{}
选择器中调用：.name;
②代参混合
无默认值
声明：.name(@param){}
调用：.name(parValue);
有默认值
声明：.name(@param:value){}
调用：.name(parValue); //parValue可省
如果声明时，参数没有默认值，则调用时必须赋值，否则报错！
无参混合，会在css中编译除同名的class选择器，有参的不会

3、less的匹配模式：使用混合进行匹配，类似于if结构
声明：
.name(条件一，参数){}
.name(条件二，参数){}
.name(@_,参数){}
调用：
.name(条件值，参数值);
匹配规则：根据调用时提供的条件值去寻找与之匹配的"MiXins"执行，其中@_表示永远需要执行的部分
4、less中的运算+ - * / 可带、可不带单位
颜色运算时，红绿蓝分三组计算，组内可进位，组间互不干涉
5、包含了传进来的所有参数：border:@arguments;
6、less中的嵌套：保留HTML中的代码结构①嵌套默认是后代选择器，如果需要子代选择器，则在子代前加>
②.&表示上一层 &:表示上一层的hover事件

2、Sass：
1、Sass中的变量使用 KaTeX parse error: Expected 'EOF', got '#' at position 33: …量需要在字符串中嵌套，则需使用#̲加大括号包裹； border-…left}:10px solid blue;
2、Sass中的运算会将单位也进行运算，使用时需注意最终单位例：10px10px=100pxpx
3、sass中的嵌套：选择器嵌套，属性嵌套，伪类嵌套

选择器嵌套：
ul{ li{} } 后代
ul{ >li{} } 子代
&:表示上一层 div{ ul{ li{ &==“div ul li” } } }
属性嵌套：
属性名与大括号之间必须有:
例如:border:{color:red;}
伪类嵌套：ul{li{ &:hover{ “ul li:hover” } } }
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循环结构：//不包含10;
@for $i from 1 to 10{}
//包含10;
@for $ifrom1through107、while循环结构：$j: 1;
@while KaTeX parse error: Expected '}', got '#' at position 14: j<10 { .while#̲{j} {　　　　border:#{$j}px solid red;
}
$j: KaTeX parse error: Expected 'EOF', got '}' at position 6: j+1; }̲ 8、each循环遍历@eac…length) {　　$length1:$length*5;　　@return KaTeX parse error: Expected 'EOF', got '}' at position 9: length1;}̲//调用： func(10px…param1…) {　　//使用…将传进来的所有参数，接收到一个变量中
border-radius:$param1;-webkit-border-radius:$param1;}
四. 总结不管是Sass，还是Less，
都可以视为一种基于CSS之上的高级语言，
其目的是使得CSS开发更灵活和更强大，
Sass的功能比Less强大,
基本可以说是一种真正的编程语言了，
Less则相对清晰明了,易于上手,对编译环境要求比较宽松。
考虑到编译Sass要安装Ruby,而Ruby官网在国内访问不了,个人在实际开发中更倾向于选择Less，
但也会去尝试使用sass，毕竟为以后的工作做准备。
五.扩展思考处理机制不一样会带来什么不同？
因为Less与Sass处理机制不一样，
前者是通过客户端处理的，
后者是通过服务端处理，
相比较之下前者解析js会比后者慢一点。