一直使用的都是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. [CSS3] 学习笔记-CSS入门基本知识

    1.CSS概述 CSS指层叠样式表 CSS样式表极大的提高了工作效率 1)CSS基础语法: selector{ propery:value } 例1:h1{color:red;font-size:14 ...

  2. js中的3种弹出式消息提醒（警告窗口，确认窗口，信息输入窗口）的命令式

    alert("A"); confirm("B");var name = confirm("B");if(name){ alert(" ...

  3. 新年上班第一天，我的 IDE 挂了

    新的一年又开始了 你年前的总结还记得么?你新年的计划做好了么?反正我都没做. 上班第一天大家都在晒着开工红包,看着一个比一个刷到的红包多,庆幸自己幸好没结婚:开心的聊着过年又被七大姑八大姨爷爷奶奶爸爸 ...

  4. 蓝桥网试题 java 基础练习 十六进制转十进制

    ---------------------------------------------------------------------------------------- 貌似用int类型不会超 ...

  5. 计算机程序的思维逻辑 (64) - 常见文件类型处理: 属性文件/CSV/EXCEL/HTML/压缩文件

    对于处理文件,我们介绍了流的方式,57节介绍了字节流,58节介绍了字符流,同时,也介绍了比较底层的操作文件的方式,60节介绍了随机读写文件,61节介绍了内存映射文件,我们也介绍了对象的序列化/反序列化 ...

  6. JAVA传值与传址

    要了解JAVA中的传值与传址问题,必要先要了解JVA中的栈内存和堆内存,>>>>点些查看<<<<昨天写的学习记录 栈:基本数据类型.数据的引用变量,这两 ...

  7. OVS VxLAN Flow 分析 - 每天5分钟玩转 OpenStack（149）

    OVS 的数据流向都是由 Flow 规则控制的,今天我们就来分析 VxLAN 的 Flow 规则.提个醒:这可能是本教程最烧脑的一节,let's rock it ! 下面分析控制节点上的 flow r ...

  8. 模块化写法-IIFE解析

    一.IIFE解释 全拼Imdiately Invoked Function Expression,立即执行的函数表达式.  像如下的代码所示,就是一个匿名立即执行函数: (function(windo ...

  9. SQL语句的优化建议

    重中之重---语句执行顺序   我们先看看语句的执行顺序 如果我没记错这是<SQL SERVER 2005技术内幕--查询>这本书的开篇第一章第一节.书的作者也要让读者首先了解语句是怎么样 ...

  10. Hbase数据库安装

    一.环境准备 1.Ubuntu14.04-server 2.ssh 3.jdk1.6 4.hbase-0.98.19-hadoop2-bin.tar.gz(下载地址http://www.apache. ...