您的位置：首页 > 其它

sass 与 less 的区别与学习

2015-06-29 11:28 309 查看

一直使用的都是sass，公司提出新需求要用less，看了一下less的官方文档，感觉记不住。在这我想用与sass的比较学习，加深印象。也希望可以帮助到一些人。

一、安装sass与less

sass

基于

Ruby

语言开发而成，因此安装

sass

前需要安装Ruby。（注:mac下自带Ruby无需在安装Ruby!）；方法如下geminstallsass、geminstallcompass

less在服务器端最容易的安装方式就是通过npm（node.js的包管理器），方法如下：$npminstall-gless

less在客户端使用“.less”（LESS源文件），只需要在官网载一个javascript脚本文件主“less.js”，然后在我们需要引入LESS源文件的html的<head>中加入如下代码：

<linkrel="stylesheet/less"type="text/css"href="文件路径/styles.less">
<scriptsrc="文件路径/less.js"type="text/javascript"></script>

二、变量

sass是以$开头定义的变量，如：$mainColor:#963;
less是以@开头定义的变量，如@mainColor:#963;

三、作用域
sass没有全局变量，满足就近原则，但是实际中可以将需要定义的全局属性放在base.scss文件中。注意变量名重复；
less中的作用域和其他程序语言中的作用域非常的相同，他首先会查找局部定义的变量，如果没有找到，会像冒泡一样，一级一级往下查找，直到根为止，同样上面的例子，我们来看看他在LESS下所起的变化。

四、混合（Mixins）
Sass的混合

sass样式中声明Mixins时需要使用“@mixin”，然后后面紧跟Mixins的名，他也可以定义参数，同时可以给这个参数设置一个默认值，但参数名是使用“$”符号开始，而且和参数值之间需要使用冒号（：）分开。

在选择器调用定义好的Mixins需要使用“@include”，然后在其后紧跟你要调用的Mixins名。不过在Sass中还支持老的调用方法，就是使用加号“+”调用Mixins，在“+”后紧跟Mixins名。

一起来看个简单的例子，比如说在你的Sass样式中定义了一个名叫“error”的Mixin，这个“error”设置了一个参数“$borderWidth”，在没特别定义外，这个参数的默认值设置为“2px”：

/*声明一个Mixin叫作“error”*/
@mixinerror($borderWidth:2px){
border:$borderWidthsolid#f00;
color:#f00;
}
/*调用errorMixins*/
.generic-error{
@includeerror();/*直接调用errormixins*/
}
.login-error{
@includeerror(5px);/*调用errormixins，并将参数$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:@borderWidthsolid#f00;
color:#f00;
}
/*调用errorMixins*/
.generic-error{
.error();/*直接调用errormixins*/
}
.login-error{
.error(5px);/*调用errormixins，并将参数@borderWidth的值重定义为5px*/
}

五、嵌套

section{
margin:10px;
}
sectionnav{
height:25px;
}
sectionnava{
color:#0982c1;
}
sectionnava:hover{
text-decoration:underline;
}

==========================》

section{
margin:10px;
nav{
height:25px;
a{
color:#0982c1;
&:hover{
text-decoration:underline;
}
}
}
}

六、继承
sass的继承：@extend

.block{
margin:10px5px;
padding:2px;
}
p{
@extend.block;/*继承.block选择器下所有样式*/
border:1pxsolid#eee;
}
ul,ol{
@extend.block;/*继承.block选择器下所有样式*/
color:#333;
text-transform:uppercase;
}
====================================>

.block,p,ul,ol{
margin:10px5px;
padding:2px;
}
p{
border:1pxsolid#eee
}
ul,ol{
color:#333;
text-transform:uppercase;
}

less的继承：类似于mixins

.block{
margin:10px5px;
padding:2px;
}
p{
.block;/*继承.block选择器下所有样式*/
border:1pxsolid#eee;
}
ul,ol{
.block;/*继承.block选择器下所有样式*/
color:#333;
text-transform:uppercase;
}
====================================>

.block{
margin:10px5px;
padding:2px;
}
p{
margin:10px5px;
padding:2px;
border:1pxsolid#eee
}
ul,ol{
margin:10px5px;
padding:2px;
color:#333;
text-transform:uppercase;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航