工作中用到了Bootstrap，涉及到了LESS，对其做了一个简单的了解，CSS的预处理器使用最广泛的就是LESS和Sass，都是努力把CSS武装成为开发语言，让它从简单的描述性语言过渡到具有程序式特性的语言，主要的特性就是：变量、Mixins、嵌套、继承等。就像教程里说的：CSS的预处理器就是让CSS从设计师的工具，变为开发人员的工具。但是看完之后觉得，作为对CSS研究尚不透彻的前端小生，我最好还是不要高攀，况且在我目前的项目中拿LESS来写CSS有点儿杀鸡用牛刀的感觉。但回过头来说，技不压身。。。bulabulabula~~好了，且正题，摘了一篇非常不错的干货，分享给大家：非常明晰地介绍一下LESS和Sass的基本特性他们的区别。

事实证明，LESS——以及Sass——功能比这个要多太多。LESS和Sass在语法上有些共性，比如下面这些：

● 混入(Mixins)——class中的class；

● 参数混入——可以传递参数的class，就像函数一样；

● 嵌套规则——Class中嵌套class，从而减少重复的代码；

● 运算——CSS中用上数学；

● 颜色功能——可以编辑颜色；

● 名字空间(namespace)——分组样式，从而可以被调用；

● 作用域——局部修改样式；

● JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

LESS和Sass的主要不同就是他们的实现方式，LESSS是基于JavaScript，所以，是在客户端处理的。

另一方面，Sass是基于Ruby的，然后是在服务器端处理的。很多开发者不会选择LESS因为JavaScript引擎需要额外的时间来处理代码然后输出修改过的CSS到浏览器。关于这个有很多种方式，我选择的是只在开发环节使用LESS。一旦我完成了开发，我就复制然后粘贴LESS输出的到一个压缩器，然后到一个单独的CSS文件来替代LESS文件。另一个选择是使用LESS.app来编译和压缩你的LESS文件。两个选择都将最小化你的样式输出，从而避免由于用户的浏览器不支持JavaScript而可能引起的任何问题。尽管这不大可能，但终归是有可能的。

LESS Is More

介绍

在你的项目中引入LESS很简单：

1.下载less.js;

2.创建一个文件来放你的样式，比如style.less;

3.添加以下代码到你的HTML的<head>中:

1
2
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

请注意link的rel属性。你需要在属性值的最后面使用/less以使LESS起作用。然后在link后面引入scirpt也是必须的。如果你在用HTML5语法——为什么不用呢？——你可以省去type=”text/css”和type=”text/javascript”。

其实也有一个服务器端的LESS版本。在服务器上安装LESS的最简单的办法就是使用Node Package Manager (NPM，一看就知道是基于Node.js的)。

变量

如果你是个开发者，变量应该是你最好的朋友。如果你要重复的使用一个信息(本例中就是color)，将它设置为一个变量就可以。这样，你就可以保证自己的一致性并可能减少滚动代码来查找颜色值、复制、粘贴等繁琐的工作了。你甚至可以加或者减一些你需要渲染的HEX值到这些颜色上面。看下例子：

1
2
3
@blue: #00c;
@light_blue: @blue + #333;
@dark_blue: @blue - #333;

如果我们将这些样式应用到3个div上面，我们就可以看到由加上和减掉的HEX值形成的渐变的效果：

从@light_blue到@blue到@dark_blue的渐变效果

关于变量在LESS和Sass中的唯一区别就是，LESS用@，Sass用$。同时还有一些作用域上的差别，我后面会提到。

混入(mixin)

偶尔，我们会创建一些会在样式表中重复使用的样式规则。没有人会阻止你在一个HTML的元素中使用多个class，但是你可以用LESS，在样式表中完成。为了描述这一点，我写了一点儿例子：

1
2
3
4
5
6
7
8
9
10
11
.border {
    border-top: 1px dotted #333;
}
article.post {
    background: #eee;
    .border;
}
ul.menu {
    background: #ccc;
    .border;
}

这可以给到你与你在两个元素中分别添加.bordered class同样的效果——而且仅仅在样式表中就完成了。而且它工作的很好：

文字和无序列表都被用上了边框样式

在Sass中，你要在样式规则前面添加@mixin声明，规定它是个嵌套。然后，通过@include来调用它：

1
2
3
4
5
6
7
8
9
10
11
@mixin border {
    border-top: 1px dotted #333;
}
article.post {
    background: #eee;
    @include border;
}
ul.menu {
    background: #ccc;
    @include border;
}

参数混入

就像在CSS中有函数功能一样，这些对于那些在现在的CSS工作中多余的工作非常有用。最好和最有用的例子就是我们正在经历的从CSS2到CSS3过渡过程中的很多浏览器私有前缀。Nettuts+有一篇Jeffrey Way写的很赞的视频和文章，内容是包含着由有用的参数组成的文件，他们涵盖了大部分使用各个浏览器私有前缀的CSS3属性。例如，在他们的格式中，一个简单的处理圆角的mixin是这样的：

1
2
3
4
5
.border-radius( @radius: 3px ) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}

在这个例子中，.border-radius有个默认的3px的圆角，但是你可以使用你需要的任何值。.border-radius(10px)将会生成半径为10px的圆角。

Sass中的语法很像LESS，只是使用$声明变量，然后使用前面提到的@mixin和@include来调用。

选择器继承

这个东西LESS并没有提供。通过这个功能，你可以将一个选择器附加到已经预先定义的选择器上，而无需再使用逗号将两者分开的写法了：

1
2
3
4
5
6
7
8
9
10
11
.menu {
    border: 1px solid #ddd;
}
.footer {
    @extend .menu;
}
 
/* 上面的写法规则和下面的效果是一样的： */
.menu, .footer {
    border: 1px solid #ddd;
}

嵌套规则

在css中嵌套class和ID是避免你的样式干扰或者被别的样式干扰的唯一方法了。但是这可能会很凌乱。使用一个类似于#site-body .post .post-header h2 的选择器毫无吸引力而且会占用大量不必要的空格。使用LESS，你可以嵌套id、class以及标签。对于前面提到的例子，你可以这样写：

1
2
3
4
5
6
7
8
9
10
11
#site-body { …
    .post { …
        .post-header { …
            h2 { … }
            a { …
                &amp;:visited { … }
                &amp;:hover { … }
            }
        }
    }
}

上面的代码最终和上面的例子（那一长串的选择器）的效果一样，但是要更容易阅读和理解的多，而且它占用很少的空间。你也可以通过&来引用元素样式到他们的伪元素上，该功能类似于JavaScript中的this。

运算

这可能是你所期望的：使用数字或者变量在你的样式表中实现数学运算！

1
2
3
4
5
@base_margin: 10px;
@double_margin: @base_margin * 2;
@full_page: 960px;
@half_page: @full_page / 2;
@quarter_page: (@full_page / 2) / 2;

声明下，我也意识到我可以除以4来获得@quarter_page变量，但是这里我只是想要演示下圆括号组成“运算顺序”在这里也是可以用的。在使用简写的规则中，小括号也是必须的，比如 border: (@width / 2) solid #000。

Sass在数字上比LESS更专业。它已经可以换算单位了。Sass可以处理无法识别的度量单位并将其输出。这个特性很明显是一个对未来的尝试——证明W3C作出的一些改变。

1
2
3
4
5
/* Sass */
2in + 3cm + 2pc = 3.514in
 
/* LESS */
2in + 3cm + 2pc = Error

Color函数

在文章开头，我提到了LESS如何帮我在编码过程中处理围绕着一个调色板。对此贡献最大的一部分就是颜色函数。加入你用一个标准的蓝色贯穿到你的样式中，然后你想要在表单中用这个蓝色来做一个渐变的按钮。你可以打开Photoshop或者其它的编辑器来获取一个比蓝色较浅的或者较暗的HEX色值来作为渐变色。或者，你可以只是使用LESS中的颜色函数。

1
2
3
4
5
6
7
8
9
10
11
12
@blue: #369;
.submit {
    padding: 5px 10px;
    border: 1px solid @blue;
    background: -moz-linear-gradient(top, lighten(@blue, 10%), @blue 100%); /*Moz*/
    background: -webkit-gradient(linear, center top, center bottom, from(lighten(@blue, 10%)), color-stop(100%, @blue)); /*Webkit*/
    background: -o-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*Opera*/
    background: -ms-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*IE 10+*/
    background: linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*W3C*/
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
}

lighten函数很明显就是用百分比值来减轻颜色，在这个例子中，它将减轻这个基础的蓝色的10%。这种方法可以让我们变化的元素或者其它任何元素的颜色值——只是简单的改变基础颜色而已。这对于主题(模板)来说非常有用。而且，如果你使用参数功能，像上面提到的，你还可以更简单的应用到一些浏览器私有前缀的声明中，比如：.linear-gradient(lighten(@blue), @blue, 100%);。

嗯，最终的效果的确很赞：

很赞的渐变的、基于变量的”Submit”按钮

还有很多其它的色彩函数，比如变暗或者调整颜色的饱和度，甚至你可以旋转色盘来使用其它颜色。我建议亲自尝试下你能想出的（用法）。

Sass貌似有更多的选项——但我并不需要这么多。我个人最常用的还是lighten和darken。如果你想了解更多，可以看一下这篇很详细的介绍。

条件语句与控制

这是一个的确很赞的东东，也是另一个LESS不支持的功能。使用 Sass，你可以使用if { } else { } 条件语句，以及for { }循环。它甚至支持 and、 or和 not，以及 <、 >、 <=、 >= 和 == 等操作符。

1
2
3
4
5
6
7
8
9
10
11
12
13
/* Sample Sass "if" statement */
@if lightness($color) &gt; 30% {
    background-color: #000;
} @else {
    background-color: #fff;
}
 
/* Sample Sass "for" loop */
@for $i from 1px to 10px {
    .border-#{i} {
    border: $i solid blue;
    }
}

名字空间(Namespaces)

名字空间可以用于组织我们的CSS到另一个档次，我们可以将一些公用的样式分组，然后在用的时候直接使用。例如，如果我们创建了一个名为default的样式分组，我们就可以在用到的时候直接从该组中调用。

1
2
3
4
5
6
7
8
#defaults {
    .nav_list () {
        list-style: none;
        margin: 0; padding: 0;
    }
    .button () { … }
    .quote () { … }
}

然后，在我们的代码中，如果我们正好在一个nav元素中使用了ul元素，我们就会想到我们需要default样式。那么我们就可以简单的调用它，它也会被直接应用。

1
2
3
nav ul {
    #defaults &gt; .nav_list;
}

作用域

作用域是编程中的标配，LESS中也是。如果你在你样式表的root级声明一个变量，它在整个文档中都是可以用的。然而，如果你在一个选择器，比如id或者class中，重新定义了这个变量，那么，它就只能在这个选择器中可用了——当然是重新定义后的新值。

1
2
3
4
5
6
7
8
@color: #00c; /* 蓝色 */
#header {
    @color: #c00; /* red */
    border: 1px solid @color; /* 红色边框 */
}
#footer {
    border: 1px solid @color; /* 蓝色边框 */
}

因为我们在#header中重新定义了color变量，变量的值将会是不同的而且只会在该选择器中有效。它之前或者之后的所有地方，如果没有被重新定义，都会保持那个原始的值。

作用域在Sass中稍有不同。在上面的代码中，当@color变量变为红色后，代码中，此处之后的该变量的值，将会被重写（成为红色）。

注释

这一部分比较基础。LESS中允许两种注释写法。标准的CSS注释，/* comment */，是有效的，而且能够通过处理并正确输出。当行注释，// comment，同样可以用但是不能够通过处理也不能被输出，然后，结果是，“无声的”。

导入

导入也相当符合标准。标准的 @import: ‘classes.less’; 处理的很好。然而，如果你想要导入其它的LESS文件，那么文件的扩展名是可选的，所以 @import ‘classes’; 也是可行的。如果你想要导入一些无需LESS处理的内容，你可以使用 .css 扩展 (比如， @import: ‘reset.css’;)。

字符串插入

字符串也是可以用于变量中的，然后通过@{name}来调用。

1
2
@base_url : 'http://www.qianduan.net';
background-image: url("@{base_url}/images/background.png");

转义(Escaping)

可能偶尔会需要引入一个CSS中非法或者LESS无法识别的值。通常是一些IE的hack。要避免抛出异常并破坏LESS，你将需要避开它们。

1
2
3
4
5
6
7
8
.class {
    filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";
}
 
/*实际上将会输出下面的代码: */
.class {
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);
}

JavaScript 赋值

这是LESS中我最中意的部分：在样式表中使用Javascript——相当精彩。你可以使用表达式，也可以参考环境方向来使用反单引号。

1
2
3
4
5
6
7
8
@string: `'howdy'.toUpperCase()`; /* @string 变成 'HOWDY' */
 
/* 你也可以使用前面提到的插值： */
@string: 'howdy';
@var: ~`'@{string}'.topUpperCase()`; /* 变为 'HOWDY' */
 
/* 获取文档的信息 */
@height = `document.body.clientHeight`;

输出格式

然而LESS并没有输出设置，而Sass提供4中输出选项：nested, compact, compressed 和 expanded。

结语

这两个方法有很多共同点。对写代码的设计师来说，它们都是很酷的工具，它们也可以帮助开发者更有效和快速的工作。如果你是Ruby或HTML的粉丝，那么Sass会是你的好助手。对我来说，一个PHP和JavaScript极客，我倾向于LESS，因为它便于引入和能够使用JavaScript的表达式以及文档属性。我怀疑我甚至接近真正理解在样式表中编程的可能行了，但是我仍坚持尝试。如果你在工作中有用到它们中的一个，或者两个都用，我很乐意听到关于它的更多内容，并看到你的成果。当然，技巧、诀窍、更正一直是很欢迎的。

（英文原文：An Introduction To LESS, And Comparison To Sass，翻译：前端观察）

LESS与SASS的伯与仲的更多相关文章

  1. 【FZSZ2017暑假提高组Day1】华容道游戏

    [问题描述] 华容道是一种有趣的滑块游戏,大概是下面这个样子的. 游戏局面由一个2*2的曹操滑块,五个2*1的蜀将滑块(横竖是不定的).四个1*1的小兵滑块以及两个空的位置构成,玩家需要利用空的位子移 ...

  2. CSS3与页面布局学习总结（七）——前端预处理技术（Less、Sass、CoffeeScript、TypeScript）

    CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...

  3. CSS3与页面布局学习笔记（七）——前端预处理技术（Less、Sass、CoffeeScript、TypeScript）

    CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...

  4. wepack+sass+vue 入门教程（三）

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  5. wepack+sass+vue 入门教程（二）

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  6. wepack+sass+vue 入门教程（一）

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  7. 前端CSS预处理器Sass

    前面的话   "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...

  8. SASS教程sass超详细教程

    SASS安装及使用(sass教程.详细教程) 采用SASS开发CSS,可以提高开发效率. SASS建立在Ruby的基础之上,所以得先安装Ruby. Ruby的安装: 安装 rubyinstaller- ...

  9. Sass之坑Compass编译报错

    前段时间在使用Compass时遇到了其为难处理的一个坑,现记录到博客希望能帮助到各位. 一.问题: 利用Koala或者是gulp编译提示如下,截图为koala编译提示错误: 二.解决办法 从问题截图上 ...

随机推荐

  1. 巧用TexturePacker命令行

    游戏开发使用TexturePacker来生成图片的atlas sheet, 工具非常好用. 一般GUI的方法, 新建一个tps文件, 将要图片加载进来,调整参数和输出路径, 最后点publish. 在 ...

  2. （实用篇）php数组查找函数in_array()、array_search()、array_key_exists()使用

    php在数组中查找指定值是否存在的方法有很多,记得很久以前我一直都是傻傻的用foreach循环来查找的,下面我主要分享一下用php内置的三个数组函数来查找指定值是否存在于数组中,这三个数组分别是 in ...

  3. super.onCreate(SavedInstanceState);

    super.onCreate(SavedInatanceState)时调用父类的构造方法,SavedInstanceState是保存当前Activity的状态信息. onCreate方法的参数是Bun ...

  4. python数据结构与算法——队列

    队列结构可以使用数组来模拟,只需要设定头和尾的两个标记 参考自<啊哈> # 按书中的代码会出现索引越界的问题(书中申请了超量的空间) # 尝试令tai初始为len(q)-1则不会出错但少了 ...

  5. iOS 常用设计模式和机制之 KVC

    KVC 1  key Value Coding,键值编码,是一种间接访问实例变量的方法 2  KVC 提供了一种使用字符串(key)而不是访问器方法,去访问一个对象实例变量的机制 3  KVC 常用方 ...

  6. JavaScript中的document.cookie的使用

    转:http://blog.csdn.net/liuyong0818/article/details/4807473 我们已经知道,在 document 对象中有一个 cookie 属性.但是 Coo ...

  7. C#中动态读写App.config配置文件

    转自:http://blog.csdn.net/taoyinzhou/article/details/1906996 app.config 修改后,如果使用cofnigurationManager立即 ...

  8. CSS id 选择器

    id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. id 选择器以 "#" 来定义. 下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二 ...

  9. TMS320C54x系列DSP指令和编程指南——第1章 汇编语言工具概述

    第1章 汇编语言工具概述 TMS320C54x DSP的汇编语言开发工具包括: ■  Assembler      ■  Archiver      ■  Linker      ■  Absolut ...

  10. 伯克利包过滤（Berkeley Packet Filter,BPF）语言

    libpcap支持一种功能非常强大的过滤语言——“伯克利包过滤”语法.使用BPF过滤规则,你可以确定该获取和检查哪些流量,忽略哪些流量.BPF让你能够通过比较第2.3.4层协议中各个数据字段值的方法对 ...