|
自从一个月前偶然发现Less之后我就开始坚定的使用它了。就CSS本身而言，对于我来说从来就不是问题，但是我很好奇的相法，使用变量来沿着一个调色板为我的网站或者模板创建一些东西。拥有一个提供固定数量给我选择的调色板，可以让我避免颜色太过跳跃，以致于从一个已定的风格中脱离。
事实证明，Less——以及Sass对于这个功能，远不止这些。LESS和Sass在语法上有些共性，比如下面的这些：
LESS和Sass之间的主要区别是他们的实现方式不同，LESS是基于JavaScript运行,所以LESS是在客户端处理。 另一方面，Sass是基于Ruby的，是在服务器端处理的。很多开发者不选择LESS是因为LESS输出修改过的CSS到浏览器需要依赖于Javascript引擎，而Javascript引擎需要额外的时间来处理代码。关于这个有很多种方式，我选择的是只在开发环节使用LESS。一旦开发完成，我就复制粘贴LESS输出的到一个压缩器，然后到一个单独的CSS文件来替代LESS文件。另一种方式是使用LESS APP来编译和压缩你的LESS文件。两种方式都将是最小化你的样式输出，从而避免由于用户的浏览器不支持Javascript而可能引起的任何问题。尽管这不大可能，但终归是有可能的。
更新：在Twitter的评论上，LESS和Sass对比讨论也是相当的热烈。也请考虑Adam Stacoviak回复。现实情况，Sass确实需要在Ruby上运行,然而他不需要在服务器上编译CSS。它也可以在本地编译（正如前面提到的LESS）,编译后的CSS可以运用到你的项目上，Wordpress主题中.引擎模板，或者任何服务器就像你的CSS文件。正如Smashiing Magazine读者和其他读者存在很大的差异，我猜想有很大一部分读者正在使用Mac阅读这评论一样。Mac也默认提供了对Sass的安装和支持，只需要一行命令就可以（sudo gem install sass）。 如果你安装了Sass，你在本地就可以将Sass转译成CSS，并将转译的代码用到你的项目中。如果你还不知道如何安装Sass(或者Compass)，我们也写了一份详细的指南Getting Started with Sass and Compass，可以很好的帮你清除这个障碍。 LESS Is More安装 在你的项目中引入LESS很简单：
请注意“link”的“rel”属性。你需要在属性值后面使用“/less”，LESS才起作用。你也需要在“link”样式表后面引入'script'。如果你正在使用“HTML5”语法，我无法想像为什么你不会用呢？你可以少去“type=‘text/css’”和“type='text/javascript'”。
LESS还有一个服务器端的版本。可以通过Node Package Manager简单的在服务器上安装LESS。 变量 如果你是一个开发人员，变量应该是你最好朋友之一。如果你要重复使用一个信息（比如例中的颜色color），将它设置为一个变量就可以。使用这种方式，你就可以保证自己的一致性并可能减少滚动代码来查找颜色值、复制和粘贴等繁琐的工作了。你甚至可以使用加或者减颜色值，从而得到你需要的颜色值，例如： @blue: #00c;/*定义蓝色变量*/@light_blue: @blue + #333;/*定义浅蓝色变量*/@dark_blue: @blue - #333;/*定义深蓝变量*/ 如果我们将这些样式应用到3个div上面，我们就可以看到加上和减掉十六进度的颜色值和原始的蓝色形成的渐变效果： 从@light_blue到@blue到@dark_blue的渐变效果
LESS和Sass中的变量的唯一区别就是，LESS使用@，而Sass使用$。同时还有一些作用域上的差别，我们后面会介绍。 混合（Mixin）有时，我们会创建一些样式，目的是在样式中重复使用这些样式规则。没有人会阻止你在一个HTML中使用多少个class，但是你可以使用LESS，在样式表中完成。为了说明这一点，我粘贴了一些代码示例： .border { border-top: 1px dotted #333;}article.post { background: #eee; .border;}ul.menu { background: #ccc; .border;} 这和你在两个元素中分别添加类名“.bordered”得到同样的效果，而且你仅仅在样式表中就完成了。并且它工作的很好： 两个文章列表和无序列表都共享同一个边框样式。 在Sass中，你要在样式规则前面添加@minix声明，规则它是个嵌套。然后，通过@include来调用它： @mixin border { border-top: 1px dotted #333;}article.post { background: #eee; @include border;}ul.menu { background: #ccc; @include border;} 带参数混合（Parametric mixins）在CSS中也有像函数的功能,这些对于那些CSS中看似多余代码非常有用。最好和最有用的例子就是CSS2到CSS3中各浏览器的私有属性前缀。Nettuts+有一篇Jeffre Way写的很赞的视频和文章，内容中包含了有用的参数组成的文件，他们涵盖了大部分使用各个浏览器私有前缀的CSS3属性。例如，在他们的格式中，一个简单的处理圆角的mixin是这样的： .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中没有提供的。通过这个功能，你可以将一个选择器附加到已经预先定义的选择器上，而无需再使用逗号将两者分开的写法了： .menu { border: 1px solid #ddd;}.footer { @extend .menu;}/* 上面的规则和下面的规则是一样的效果 */.menu, .footer { border: 1px solid #ddd;} 嵌套规则(Nested rules)在CSS中嵌class和id是避免样式干扰或者被别的样式干扰的唯一方式。但是可能变得很乱。使用一个选择器，类似于'#site-body .post .post-header h2'是毫无用处，而且还占用大量没必要的空间。使用LESS,你可以嵌套ID、class以及元素标签。对于前面提到的例子，你可以这样写： #site-body { … .post { … .post-header { … h2 { … } a { … &:visited { … } &:hover { … } } } }} 上面的代码最终效果和上面的一大串选择器效果一样，但是要更容易阅读和理解的多，而且它占用很少的空间。你也可以通过&来引用元素样式到他们的伪元素上，这个功能类似于javascript中的this。 运算（Operations）你很可能期望在CSS中使用数字或者变量实现数学运算！ @base_margin: 10px;@double_margin: @base_margin * 2;@full_page: 960px;@half_page: @full_page / 2;@quarter_page: (@full_page / 2) / 2; 声明一下，在取得“@quarter_age”变量时，我们也可以直接除以4，但是在这里，我们只是想演示一下圆括号组成的“运算顺序”（这个运算顺序可能小学生也知道的）。在复合型运算中，小括号也是很有必要的，例如：“ border: (@width / 2) solid #000”。 Sass在数字上要比LESS更专业,他已经可以直接换算单位了。Sass可以处理无法识别的度量单位，并将其输出。这个特性很明显是一个对未来的尝试——证明W3C作出的一些改变。 /* Sass */2in + 3cm + 2pc = 3.514in/* LESS */2in + 3cm + 2pc = Error Color函数前面，我提到了LESS如何帮我们用编码来实现一个调色板。在这里功能最大的一部分就是颜色函数。假设您在样式中使用一个标准的蓝色风格,然后，你想要使用这个颜色在一个表单中制作一个渐变的“提交”。你可以打开Photoshop或者另一个编辑器来得到一个比蓝色稍亮或变暗的十六进制值色作为一个渐变色。或者你可以只使用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);} lighten函数很明显就是用百分比值来减轻颜色。在这个例子中，它将在蓝色的基础上减少10%。这种方法使我们只需要简单的改变基础颜色就可以修改渐变的元素或者其他元素的颜色。这对于制作主题模板来说是非常有用的。而且，如果你使用参数函数，像上面提到的，你还可以更简单的应用到一些浏览器私有前缀的声明中，就像这个例子：“.linear-gradient(lighten(@blue), @blue, 100%);”。 无论哪种方式,你都会得到一个不错的效果: 很赞的渐变的、基于变量的”Submit”按钮。 还有很多颜色函数，比如变暗或者调整颜色的饱和度，甚至你可以旋转色盘来使用其他颜色。我建议你亲自尝试下你能想出的用法。 Sass似乎有更多的颜色函数选择——但我们并不需要这么多。我个人最常用的还是lighten和darken函数功能。如果您想了解更多的东西，你可以详细的阅读这里介绍。 条件语句和控制这是一个很强大的功能，也是LESS不支持的功能。使用Sass，你可以使用if{}else{}这样的条件语句，以及for{}循环语句，他甚至还支持and、or和not，以及<、>、<=、>=和==等操作符。 /* Sass中简单的if语句 */@if lightness($color) > 30% { background-color: #000;} @else { background-color: #fff;}/* Sass中简单的for循环语句*/@for $i from 1px to 10px { .border-#{i} { border: $i solid blue; }} 命名空间（namespaces）命名空间可以用于组织我们的CSS，从而提高到另一个层次，我们将一些公用的样式创建分组，然后在使用的时候直接调用。例如，如果我们创建了一个名为“default”的样式分组，我们就可以在使用到的时候直接从该组中调用。/p> #defaults { .nav_list () { list-style: none; margin: 0; padding: 0; } .button () { … } .quote () { … }} 然后，在我们的代码中，如果我们正好在一个nav元素中使用了ul元素，我们就会想到我们需要default样式。那么我们就可以简单的调用它，它也会被直接应用。 nav ul { #defaults > .nav_list;} 作用域（scope）作用域是程序中的一个标准，LESS中也是。如果你在你样式表的root级声明一个变量，它在整个文档中都是可以调用的。然而，如果你在一个选择器，比如id或者class中，重新定义了这个变量，那么，它就只能在这个选择器中可用了——当然是重新定义后的新值。 @color: #00c; /* 蓝色 */#header { @color: #c00; /* 红色 */ 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}来调用。 @base_url = 'http://coding.';background-image: url('@{base_url}/images/background.png'); 转义(Escaping)有时候,你需要引入一个值,它是无效的CSS语法或者LESS不能识别。通常是一些IE的Hack。要避免抛出异常并破坏LESS，你将需要避开它们。 .class { filter: ~'progid:DXImageTransform.Microsoft.Alpha(opacity=20)';}/* 实际上会输出下面的代码: */.class { filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);} javascript的表达式这是LESS中我最中意的部分：在样式表中使用Javascript——相当精彩。你可以使用表达式，也可以参考环境方向来使用反单引号。 @string: `'howdy'.toUpperCase()`; /* @string becomes 'HOWDY' *//* You can also use the previously mentioned interpolation: */@string: 'howdy';@var: ~`'@{string}'.topUpperCase()`; /* becomes 'HOWDY' *//* Here we access part of the document */@height = `document.body.clientHeight`; 输出格式然而LESS并没有输出设置，而Sass提供4中输出选项：nested, compact, compressed 和 expanded。 总结这两者有很多共同点。对于写代码的设计师来说，他们都是很棒的工具，并且他们还可以帮助开发者更有效、更快速的工作。如果你是Ruby或HAML的爱好者，那么Sass会是你的好助手。对我来说，一个PHP和Javascript极客，我更倾向于LESS，因为它便于引入和能够使用JavaScript表达式以及文档属性。我怀疑我甚至接近真正理解在样式表中编程的可能行了，但是我仍坚持尝试。如果你在工作中有用到它们中的一个，或者两个都用，我很乐意听到关于它的更多内容，并看到你的成果。当然，技巧、诀窍、更正一直是很欢迎的。 译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！ 如需转载烦请注明出处： |
|
|
