一直使用的都是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. 部署LNMP架构Blog博客平台 ---惟净

    部署环境:VM虚拟机 操作系统:CentOS-6.8-x64 IP地址:192.168.31.91Mysql数据库版本:5.6.34 Cmake软件包版本:3.5.2Nginx软件包版本:1.10.2 ...

  2. web前端 兼容性问题

    1:position属性使用过多或使用位置不恰当引起滚动时页面错乱 浏览器环境:ie7 position:relative; 网页上最直接表现就是极具破坏性的滚动错位,问题产生来自ie7自身渲染解析出 ...

  3. VS编辑器主题变换插件-EasyVS

    主题功能是这个版本的亮点. 我收集了七个比较流行的编辑器主题样式,有了这个功能再也不用到网上寻找安装这样那样的主题了. 增加文件右键“在资源管理器中打开”功能 我们知道VS2010对文件夹支持“在资源 ...

  4. phpcms 替换首页

    利用phpcms制作企业站,首先要将静态的企业主页替换成后台可编辑的动态主页. 首先做一个静态的企业站主页: <!DOCTYPE html> <html> <head&g ...

  5. MATLAB中的分类器

    MATLAB中的分类器   目前了解到的MATLAB中分类器有:K近邻分类器,随机森林分类器,朴素贝叶斯,集成学习方法,鉴别分析分类器,支持向量机.现将其主要函数使用方法总结如下,更多细节需参考MAT ...

  6. 读书笔记 effective c++ Item 7 在多态基类中将析构函数声明为虚析构函数

    1. 继承体系中关于对象释放遇到的问题描述 1.1 手动释放 关于时间记录有很多种方法,因此为不同的计时方法创建一个TimeKeeper基类和一些派生类就再合理不过了: class TimeKeepe ...

  7. Linux 7.2 + LAMP + Nagios-4.2.4 + 简单部署监控项

    Nagios详细文档 监控端 一.安装依赖包并设置Apache服务. yum -y install httpd php gcc gd perl unzip openssl-devel vi /etc/ ...

  8. 【CNMP系列】CentOS7.0下安装Nginx服务

    话步前言,CNMP之路,系统起步:http://www.cnblogs.com/riverdubu/p/6425028.html 这回我来讲解下CentOS7.0下如何安装和配置Nginx服务 Ngi ...

  9. cura-engine学习（1）

    cura-engine为开源3D打印软件cura的核心引擎代码,详细介绍参看github主页.现在学习的是一个简单版的https://github.com/repetier/CuraEngine,最新 ...

  10. JS中的作用域链

    在js中数据的声明方式有两种: 1.用var声明,例如:var num = 10: 2.直接声明,例如:num = 10: 两种声明方式在某些情况下是有区别的: var data = 10; func ...