less

[转载]再谈 CSS 预处理器

CSS 预处理器是什么?一般来说,它们基于 CSS 扩展了一套属于自己的 DSL,来解决我们书写 CSS 时难以解决的问题:语法不够强大,比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器;没有变量和合理的样式复用机制,使得逻辑上相关的属性值必须以字面量的形式重复输出,导致难以维护。所以这就决定了 CSS 预处理器的主要目标:提供 CSS 缺失的样式层复用机制、减少冗余代码,提高样式代码的可维护性。这不是锦上添花,而恰恰是雪中送炭。网上已经有不少对比目前最主流的三个预处理器 Less、Sass 和 Stylus(按字母顺序排名)的文章了,但是似乎都不是很详细,或者内容有些过时。下面我会更详细地探讨一下这三种预处理器的特性和它们的差异。

预处器的对比——Sass、LESS和Stylus

发挥CSS预处器的作用是一种很有挑战性的事情。CSS预处器有不同的语言,有不同的语法和功能。在这篇文章中,我们将介绍三种不同CSS预处器的蛮量、功能以及他们的好处——SassLESSStylus 。CSS预处理器是一种语言,用来编写一些CSS的特性,而且无需考虑浏览器兼容性的问题。CSS预处器有成千上万的特性。本文根据的《Sass vs. LESS vs. Stylus: Preprocessor Shootout》所译,让我们开始学习CSS的三种预处器对比。

Sass新手指南

Sass是一门非常优秀的CSS预处理语言,他是由Hampton Catlin创立,其中他还有另外一个名称SCSS,这个SCSS看起来更像CSS。最近迷上了CSS预处理器方面的东东,所以开始在针对性的学习Less、Sass和Stylus三个流行的预处器语言的基础知识,希望具有一定的基础后可以针对一些优秀的框架,研读他们的源码。所以今天给大家介绍的是Sass新手方面的指南。这篇文章是根据Andrew Chalkley的《The Absolute Beginner’s Guide to Sass》所译,希望这篇译文能帮助大家对Sass有一个概念性的了解,当然要深入的介绍的话,我想我们可以用一本书来描述,此处只是做引导性的学习,今后我也会加强这方面的分享,有兴趣的同学就观注一下相关更新吧,让我们一起来学习这几种CSS预处理器语言。更好的帮助大家开发CSS、维护CSS,从而提高自己的效率。

Less介绍及其与Sass的差异

自从一个月前偶然发现Less之后我就开始坚定的使用它了。就CSS本身而言,对于我来说从来就不是问题,但是我很好奇的相法,使用变量来沿着一个调色板为我的网站或者模板创建一些东西。拥有一个提供固定数量给我选择的调色板,可以让我避免颜色太过跳跃,以致于从一个已定的风格中脱离。

LESS和CSS3动态制作按钮

昨天我在《CSS3 Gradient Buttons》介绍了如何使用CSS3的一些属性(特别是《CSS3 Gradient》)来制作Buttons。然而,制作一个基本的Buttons很简单,无外呼包括以下几步:

CSS——LESS

去年就初次接触了LESS,并用他制作了一个Less.org的首页页面,但由于CSS的固有模式,没有让自己喜欢上他。由于前段时间学习bootstrap from twitter再次让我接触了这个Less(我在《CSS——Bootstrap From Twitter》有简单的提到过Less),又发现了他的强大与方便,于是横下心来又重新开始学习Less。这次的学习中让我发现了他的更强大,从而也让自己更喜欢上了Less

返回顶部