sass 与 less 的区别与学习

一直使用的都是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的<head>中加入如下代码:

<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 中的作用域和其他程序语言中的作用域非常的相同,他首先会查找局部定义的变量,如果没有找到,会像冒泡一样,一级一级往下查找,直到根为止,同样上面的例子,我们来看看他在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;
}


 
 
posted @ 2015-06-29 11:28  奋斗中的草根  阅读(...)  评论(...编辑  收藏