一直使用的都是sass，公司提出新需求要用less，看了一下less的官方文档，感觉记不住。在这我想用与sass的比较学习，加深印象。也希望可以帮助到一些人。
一、安装sass与less
sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。（注:mac下自带Ruby无需在安装Ruby!）；
方法如下：
gem install sass、 gem install compass
less在服务器端最容易的安装方式就是通过 npm （node.js 的包管理器），方法如下：
$ npm install -g less
less 在客户端使用“.less”（LESS源文件），只需要在官网载一个javascript脚本文件主“less.js”，然后在我们需要引入LESS源文件的html的中加入如下代码：
<link rel="stylesheet/less" type="text/css" href="文件路径/styles.less">
<script src="文件路径/less.js" type="text/javascript"></script>
二、变量
sass 是以$开头定义的变量，如：$mainColor: #963;
less 是以@开头定义的变量，如 @mainColor: #963;
三、作用域
sass 没有全局变量，满足就近原则，但是实际中可以将需要定义的全局属性放在base.scss 文件中。注意变量名重复;
less 中的作用域和其他程序语言中的作用域非常的相同，他首先会查找局部定义的变量，如果没有找到，会像冒泡一样，一级一级往下查找，直到根为止。
四、混合（Mixins）
Sass的混合
sass样式中声明Mixins时需要使用“@mixin”，然后后面紧跟Mixins的名，他也可以定义参数，同时可以给这个参数设置一个默认值，但参数名是使用“$”符号开始，而且和参数值之间需要使用冒号（：）分开。
在选择器调用定义好的Mixins需要使用“@include”，然后在其后紧跟你要调用的Mixins名。不过在Sass中还支持老的调用方法，就是使用加号“+”调用Mixins，在“+”后紧跟Mixins名。
一起来看个简单的例子，比如说在你的Sass样式中定义了一个名叫“error”的Mixin，这个“error”设置了一个参数“$borderWidth”，在没特别定义外，这个参数的默认值设置为“2px”：
/*声明一个Mixin叫作“error”*/
@mixin error($borderWidth:2px){
border:$borderWidth solid #f00;
color: #f00;
}
/*调用error Mixins*/
.generic-error {
@include error();/*直接调用error mixins*/
}
.login-error {
@include error(5px);/*调用error mixins，并将参数$borderWidth的值重定义为5px*/
}
less 的混合
在LESS中，混合是指将定义好的“ClassA”中引入另一个已经定义的“Class”，就像在当前的“Class”中增加一个属性一样。
不过LESS样式中声明Mixins和Sass声明方法不一样，他更像CSS定义样式，在LESS可以将Mixins看成是一个类选择器，当然 Mixins也可以设置参数，并给参数设置默认值。不过设置参数的变量名是使用“@”开头，同样参数和默认参数值之间需要使用冒号（：）分隔开。
正如Sass混合是的示例，同样在LESS样式中定义一个名叫“error”的Mixin，这个“error”设置了一个参数“@borderWidth”，在没有特别定义外，这个参数的默认值是“2px”：
/*声明一个Mixin叫作“error”*/
.error(@borderWidth:2px){
border:@borderWidth solid #f00;
color: #f00;
}
/*调用error Mixins*/
.generic-error {
.error();/*直接调用error mixins*/
}
.login-error {
.error(5px);/*调用error mixins，并将参数@borderWidth的值重定义为5px*/
}
五、嵌套
section {
margin:10px;
}
section nav {
height:25px;
}
section nav a {
color: #0982c1;
}
section nav a:hover {
text-decoration: underline;
}
==========================
section {
margin:10px;
nav {
height:25px;
a {
color:#0982c1;
&:hover {
text-decoration:underline;
}
}
}
}
六、继承
sass的继承：@extend
.block{
margin: 10px 5px;
padding: 2px;
}
p {
@extend .block;/*继承.block选择器下所有样式*/
border: 1px solid #eee;
}
ul,ol {
@extend .block; /*继承.block选择器下所有样式*/
color: #333;
text-transform: uppercase;
}
====================================
.block,p,ul,ol {
margin: 10px 5px;
padding:2px;
}
p {
border: 1px solid #eee;
}
ul,ol {
color:#333;
text-transform:uppercase;
}
less的继承：类似于mixins
.block {
margin: 10px 5px;
padding: 2px;
}
p {
.block;/*继承.block选择器下所有样式*/
border: 1px solid #eee;
}
ul,ol {
.block; /*继承.block选择器下所有样式*/
color: #333;
text-transform: uppercase;
}
====================================>
.block {
margin: 10px 5px;
padding:2px;
}
p {
margin: 10px 5px;
padding:2px;
border: 1px solid #eee;
}
ul,ol {
margin: 10px 5px;
padding:2px;
color:#333;
text-transform:uppercase;
}
网友评论