一直使用的都是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. gulp源码解析（二）—— vinyl-fs

    在上一篇文章我们对 Stream 的特性及其接口进行了介绍,gulp 之所以在性能上好于 grunt,主要是因为有了 Stream 助力来做数据的传输和处理. 那么我们不难猜想出,在 gulp 的任务 ...

  2. quagga源码学习--BGP协议路由更新

    BGP的核心就是交换路由,所以关键的部分还是在路由的更新与撤销上面,这之间包含了冗长的属性,community等等处理过程,不做详述. bgp_read函数是路由更新的事件处理函数,在收到BGP_MS ...

  3. html 一般标签 常用标签 表格

    body的属性: bgcolor                页面背景色 background            背景壁纸.图片 text                    文字颜色 top ...

  4. 日月如梭，玩转JavaScript日期

    一.Date对象 下面出现的源码都可以codepen在线查看. 1)时间戳毫秒计算 Date对象是基于"1970-01-01 08:00:00"到指定日期的毫秒数,不是" ...

  5. Ionic start 创建项目报错 Error with start undefined

    转自:http://blog.csdn.net/wenzigui_qy/article/details/52874542 在Installing npm packages的时候报错,如下: Insta ...

  6. nagios安装及监控Linux主机

    服务端的操作:##################################安装lamp环境及依赖包##########################   24  rpm -ivh gd-de ...

  7. iOS Touch ID 身份认证

    iOS Touch ID 身份认证 iOS 8 及以后录了指纹的设备可以使用 touch ID 进行身份认证,指纹符合录入的指纹才能认证成功. 步骤 导入 LocalAuthentication 框架 ...

  8. C++程序员的阅读清单

    link:http://www.who1753.com/must-read-c-book-list/ 多读一些优秀的书籍,对于开发者稳固编程基础.提高编程技能有很大帮助.但是,大多时候,初学者不知道应 ...

  9. CentOS7.0安装Nginx

    安装Nginx yum install nginx 正常情况下必定是: 已加载插件:fastestmirror, langpacks base | :: docker-main | :: extras ...

  10. 读书笔记 effective c++ Item 23 宁可使用非成员非友元函数函数也不使用成员函数

    1. 非成员非友元好还是成员函数好? 想象一个表示web浏览器的类.这样一个类提供了清除下载缓存,清除URL访问历史,从系统中移除所有cookies等接口: class WebBrowser { pu ...