一直使用的都是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;

}


 
 

sass 与 less 的区别与学习的更多相关文章

  1. Sass和Less的区别？

    这篇文章主要解答以下几个问题,供前端开发者的新手参考. 1.什么是Sass和Less? 2.为什么要使用CSS预处理器? 3.Sass和Less的比较 4.为什么选择使用Sass而不是Less? 什么 ...

  2. (转)由su和su -的区别谈学习linux运维方法

    由su和su -的区别谈学习linux运维方法 原文:http://blog.51cto.com/oldboy/1053606 由su和su -的区别谈学习linux运维方法一例 老男孩Linux培训 ...

  3. 机器学习如何选择模型 & 机器学习与数据挖掘区别 & 深度学习科普

    今天看到这篇文章里面提到如何选择模型,觉得非常好,单独写在这里. 更多的机器学习实战可以看这篇文章:http://www.cnblogs.com/charlesblc/p/6159187.html 另 ...

  4. less和sass的定义和区别

    less是单独的一种文件,可以理解为css的升级版: sass是一个相对新的编程语言,为web前端开发而生,可以用它来定义一套新的语法规则和函数: 区别: ①   表现方式不同:less基于javas ...

  5. 【转】取模（mod）与取余（rem）的区别——Matlab学习笔记

    昨天在学习Matlab的数学函数时,教程中提到取模(mod)与取余(rem)是不同的,今天在网上具体查了一下: 通常取模运算也叫取余运算,它们返回结果都是余数.rem和mod唯一的区别在于:    当 ...

  6. 动态样式语言Sass&Less介绍与区别

    一. Sass/Scss&Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,语法跟css一样(但多了些功能),比css好写, ...

  7. IO - 同步 异步 阻塞 非阻塞的区别，学习Swoole有帮助

    同步(synchronous) IO和异步(asynchronous) IO,阻塞(blocking) IO和非阻塞(non-blocking)IO分别是什么,到底有什么区别?本文较长需耐心阅读,基础 ...

  8. SASS 和 LESS 的区别

    1.编译环境不同 SASS 的安装需要 Ruby 环境,是在服务端处理的: LESS 需要引入 less.js 来处理代码输出 CSS 到浏览器,也可以在开发环节使用 LESS,然后编译成 CSS 文 ...

  9. sass与less的区别？Stylus又是啥？

    现在写样式大家基本上都会用上CSS预处理器,而比较流行的预处理器就是这三位老哥了Less.Sass 和 Stylus: 在这之前,我们先了解一点,sass和scss有什么区别? SCSS 是 Sass ...

随机推荐

  1. ES2：ElasticSearch 集群配置

    ElasticSearch共有两个配置文件,都位于config目录下,分别是elasticsearch.yml和logging.yml,其中,elasticsearch.yml 用来配置Elastic ...

  2. js-面试题1

    //1. y 和 z的值? ; ; ; function add(n){n=n+;} y = add(x); function add(n){n=n+;} z = add(x); //y,z输出und ...

  3. css实现页面居中的一种方法

    在网页制作的过程中,为方便读者的阅读,会把网页内容限定在一个较小的方框中,并居中显示,如何实现这一功能呢? 1)把正文放在一个<div>标签中,只要这个标签居中整个网页就居中了. < ...

  4. SysLog简介和java操作实例

    什么是SysLog syslog协议属于一种主从式协议:syslog发送端会传送出一个小的文字讯息(小于1024字节)到syslog接收端.接收端通常名为“syslogd”.“syslog daemo ...

  5. php面向对象（OOP）---- 验证码类

    PHP常用自封装类--验证码类 验证码是众多网站登陆.注册等相关功能不可以或缺的功能,实现展示验证码的方式有很多,这篇文章作者以工作中比较常用的方法进行了封装. 逻辑准备 要实现一个完整的验证码,需要 ...

  6. jQuery --checkbox全选和取消全选简洁高效的解决办法

    最近在公司做了一个小项目,其中有一个全选和取消全选的这么一个模块,搞了半天找不到一种最佳的解决方案!后来通过各种努力找到了一种简洁高效的解决办法,这里想和大家分享一下.有问题的话,还望各路大神指导一二 ...

  7. Android微信朋友圈全文、收起功能

    在众多的社交类软件中,朋友圈是必不可少的,可以与好友.同学等分享自己的日常和有意思的事情,在开发社交类App时,朋友圈发表的内容你不可能让他全部显示,全部显示的话用户体验度会非常不好,这时就要用到全文 ...

  8. 浅谈 MVC中的ViewData、ViewBag和TempData

    ViewBag和TempData的区别 ViewData ViewBag 它是Key/Value字典集合 它是dynamic类型对像 从Asp.net MVC 1 就有了 ASP.NET MVC3 才 ...

  9. C语言 一维数组叠加为二维数组样例

    这里参看memcpy的用法,将一个一维整型数组不停的叠加为二维数组 使用宏定义来控制二维数组的行列 代码如下: #include <stdio.h> #include <stdlib ...

  10. C# 添加、获取及删除PDF附件

    C# 添加.获取及删除PDF附件 前言 附件在PDF文档中很常见,这些附件可以是PDF或其他类型的文件.在PDF中,附件有两种存在方式,一种是普通的文件附件(document-level file a ...