Less和Sass
Less和Sass
CSS预处理器
css预处理器基本思想就是用一种专门的编程语言，为css增加了一些编程的特性，将css作为目标生成文件，然后开发者就只要使用这种语言进行编码的工作通俗来讲：“css预处理器用一种专门的编程语言，进行web页面样式的设计，然后再编译成正常的css文件，以供项目使用。css预处理器为css增加一些编程的特性，无需考虑浏览器的兼容性问题”
下面介绍了常用的两种css预处理器
Sass
Sass语法是Sass最初的语法格式，通过tab键控制缩进的一种语法规则，不带任何分号和大括号，以.sass为扩展名
Scss:
Scss是Sass的新语法格式，不过他的语法更符合前端人员的书写习惯，即代码包裹在大括号里，并且末尾借书处有分号，以.scss为扩展名
Sass的编译
- 命令编译
- GUI工具编译
- 自动化编译
变量
sass的变量必须$开头，后面紧跟变量名，变量值和变量名之间用冒号隔开（同css），如果值后面加上!default则表示默认值
嵌套
sass嵌套分为：
1.选择器嵌套
2.属性的嵌套
一般用到的都是选择器嵌套
选择器嵌套
选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了sass文件的结构性和可读性。
在选择器嵌套中，可以使用 &表示父元素选择器
例如：
#top_nav{
line-height: 40px;
text-transform: capitalize;
background-color:#333;
li{
float:left;
}
a{
display: block;
padding: 0 10px;
color: #fff;
&:hover{
color:#ddd;
}
}
}编译成功后的css为：
#top_nav{
line-height: 40px;
text-transform: capitalize;
background-color:#333;
}
#top_nav li{
float:left;
}
#top_nav a{
display: block;
padding: 0 10px;
color: #fff;
}
#top_nav a:hover{
color:#ddd;
}属性嵌套
属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头,可以在sass编写中省去相同开头
例如：
.fakeshadow {
border: {
style: solid;
left: {
width: 4px;
color: #888;
}
right: {
width: 2px;
color: #ccc;
}
}
}编译成功：
.fakeshadow {
border-style: solid;
border-left-width: 4px;
border-left-color: #888;
border-right-width: 2px;
border-right-color: #ccc;
}@at-root跳出选择器嵌套
混合(mixin)
sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用。
//sass style
//-------------------------------
@mixin opacity($opacity:50) {
opacity: $opacity / 100;
filter: alpha(opacity=$opacity);
}
//css style
//-------------------------------
.opacity{
@include opacity; //参数使用默认值
}
.opacity-80{
@include opacity(80); //传递参数
}参数可以使用无参，也可以多个参数
继承
sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词@extend，后面紧跟需要继承的选择器
//sass style
//-------------------------------
h1{
border: 4px solid #ff9aa9;
}
.speaker{
@extend h1;
border-width: 2px;
}
//css style
//-------------------------------
h1,.speaker{
border: 4px solid #ff9aa9;
}
.speaker{
border-width: 2px;
}关于sass的语法还有很多，例如函数，运算，条件判断，循环等等
推荐一个学习sass的网站：
Less
LESS和Sass的主要不同就是他们的实现方式，LESSS是基于JavaScript，所以，是在客户端处理的。Sass是基于Ruby的，是在服务器端处理的
- 变量
Less和Sass的语法规则大同小异，不过Less引用变量的形式为@变量名值
- 混合(mixin)
在Sass中，要在样式规则前面添加@mixin声明，规定它是个嵌套。然后，通过@include来调用它：
@mixin border { border-top: 1px dotted #333; } article.post { background: #eee; @include border; } ul.menu { background: #ccc; @include border; }但在Less中：
.border { border-top: 1px dotted #333; } article.post { background: #eee; .border; } ul.menu { background: #ccc; .border; }即可完成注释：
LESS中允许两种注释写法。标准的CSS注释，/* comment */，是有效的，而且能够通过处理并正确输出。当行注释，// comment，同样可以用但是不能够通过处理也不能被输出
分享一篇比较Less和Sass的文章：