[repost ]Less介绍及其与Sass的差异

original:http://ift.tt/XATFqs 自从一个月前偶然发现Less之后我就开始坚定的使用它了。就CSS本身而言，对于我来说从来就不是问题，但是我很好奇的相法，使用变量来沿着一个调色板为我的网站或者模板创建一些东西。拥有一个提供固定数量给我选择的调色板，可以让我避免颜色太过跳跃，以致于从一个已定的风格中脱离。 Less英文官网需要开启VPN才能正常访问，如果你无法打开Less官网，建议您移步到Alexis Sellier领导的团队所译的中文官网Less中文。 ——大漠 事实证明，Less——以及Sass对于这个功能，远不止这些。LESS和Sass在语法上有些共性，比如下面的这些： 混合（Mixins）：class中的class; 参数混合（Parametric）：可以像函数一样传递参数的class; 嵌套规则（Nested Rules）：class中嵌套class，从而减少重复的代码； 运算（Operations）：css中的数学计算； 颜色功能（Color function）：可以编辑你的颜色； 命名空间（Namespaces）：样式分组，从而方便被调用； 作用域（Scope）：局部修改样式； JavaScript表达式(Javascript evaluation)：在CSS样式中使用Javascript表达式赋值。 上面八条在LESS和Sass中是一个很重要的概念，只有把上面的概念理解清楚了，才能更好的学习LESS和Sass，在这里我借花献佛，从各处摘抄了一下，对这几个概念的简单的介绍： 1、Mixins，此处我译成了混合，也有很多同行朋友将其译成混入，不管是混合也好，还是混入也罢。其主要意思是将一个定义好的class A引入到另一个class B中，从而简单实现class B继承了class A的所有属性。 2、Parametric，带参数混合，像函数一样在class A中定义一个参数的默认值、或者参数属性集合，还可以是@arguments蛮量，然后将定义好的class A引入class B中 3、Nested Rules译成嵌套规则，指的是在一个选择器中嵌套另一个选择器来实现继承。从而减少了代码量，并且增加了代码的可读性。 4、Operations运算，在CSS中使用加、减、乘、除进行数学运算，主要运用于属性值和颜色的运算，可以轻松实现属性值之间的复杂关系。 5、Color function颜色功能，颜色的函数运算，颜色会先被转化成HSL色彩空间，然后在通道级别操作。 6、Namespaces命名空间，将一些变量或者混合模块打包封装，更好的组织CSS和属性集的重复使用； 7、Scope作用域，先从本地查找变量或者混合模块，如果没有找到的话就会去父级作用域中查找，直到找到为止，这一点和其他程序语言的作域非常的相似； 8、Javascript evaluation，javascript的表达式,在Less或sass文件中可以使用js的表达式,用来赋值。 ——大漠 LESS和Sass之间的主要区别是他们的实现方式不同，LESS是基于JavaScript运行,所以LESS是在客户端处理。 另一方面，Sass是基于Ruby的，是在服务器端处理的。很多开发者不选择LESS是因为LESS输出修改过的CSS到浏览器需要依赖于Javascript引擎，而Javascript引擎需要额外的时间来处理代码。关于这个有很多种方式，我选择的是只在开发环节使用LESS。一旦开发完成，我就复制粘贴LESS输出的到一个压缩器，然后到一个单独的CSS文件来替代LESS文件。另一种方式是使用LESS APP来编译和压缩你的LESS文件。两种方式都将是最小化你的样式输出，从而避免由于用户的浏览器不支持Javascript而可能引起的任何问题。尽管这不大可能，但终归是有可能的。 LESS转译工具除了LESS APP之外，现在目前流行的主要有：SimpLess、WinLess、CodeKit.app、LESS编译辅助脚本-LESS2CSS。 ——大漠 更新：在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，可以很好的帮你清除这个障碍。 [...]



via WordPress http://ift.tt/1erDMvw