你的位置:首页 > 软件开发 > 网页设计 > 新鲜出炉的less与sass较量

新鲜出炉的less与sass较量

发布时间:2017-04-29 00:00:14
最近接触了Bootstrap,涉及到了LESS,CSS的预处理器使用最广泛的就是LESS和Sass,都是努力把CSS武装成为开发语言,让它从简单的描述性语言过渡到具有程序式特性的语言,主要的特性就是:变量、Mixins、嵌套、继承等。就像教程里说的:CSS的预处理器就是让CSS从 ...

 

     最近接触了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文件。另一个选择是使用koala来编译和压缩你的LESS文件。两个选择都将最小化你的样式输出,从而避免由于用户的浏览器不支持JavaScript而可能引起的任何问题。

LESS Is More

介绍

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

1.下载less.js;

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

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

<link rel="stylesheet/less" type="text/css" href="styles.less"><script src='/images/loading.gif' data-original="less.js" type="text/javascript"></script>

变量

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

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

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

.border-radius( @radius: 3px ) {-webkit-border-radius: @radius;-moz-border-radius: @radius;border-radius: @radius;}

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

选择器继承

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

.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以及标签。对于前面提到的例子,你可以这样写:

#site-body { …  .post { …    .post-header { …      h2 { … }      a { …        &amp;:visited { … }        &amp;:hover { … }      }    }  }}

运算

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

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

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

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

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

@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);}

嗯,最终的效果的确很赞:

新鲜出炉的less与sass较量

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

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

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

条件语句与控制

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

/* 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;  }}

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

#defaults {  .nav_list () {    list-style: none;    margin: 0; padding: 0;  }  .button () { … }  .quote () { … }}
       nav ul {

作用域

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

@color: #00c; /* 蓝色 */#header {  @color: #c00; /* red */  border: 1px solid @color; /* 红色边框 */}#footer {  border: 1px solid @color; /* 蓝色边框 */}

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

注释

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

导入

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

字符串插入

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

@base_url : 'http://www.qianduan.net';

转义(Escaping)

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

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

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

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

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

结束语

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

 

原标题:新鲜出炉的less与sass较量

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录