发挥CSS预处器的作用是一种很有挑战性的事情。CSS预处器有不同的语言,有不同的语法和功能。
不同CSS预处器的蛮量、功能以及他们的好处——Sass、LESS
介绍
CSS预处理器是一种语言,用来编写一些CSS的特性,而且无需考虑浏览器兼容性的问题。他们通过编译的代码编写成一般的CSS,不要在停留在石器时代了。
Sass和LESS
Sass和LESS都使用的是标准的CSS语法。这使用CSS预处器非常容易的将预处器代码转换成CSS代码。默认Sass使用“.scss”扩展名,而LESS使用“.less”扩展名。Sass和LESS基本设置可以像下面所示:
/* style.scss 或者 style.less */ h1 { color: #0982C1; }
变量(Variables)
你可以在CSS预处理器中声明变量,并在整个样式表中使用。CSS预处理器支持任何变量(例如:颜色、数值(不管是否包括单位)、文本)。然后你可以在任意地方引用变量。
Sass
Sass声明变量必须是“$”开头,后面紧跟变量名和变量值,而且变量名和变量值需要使用冒号(:)隔开。就像CSS属性一样:
$mainColor: #0982c1; $siteWidth: 1024px; $borderStyle: dotted; body { color: $mainColor; border: 1px $borderStyle $mainColor; max- $siteWidth; }
LESS
LESS声明变量和Sass声明变量一样,唯一区别是变量名前面使用是的“@”字符:
@mainColor: #0982c1; @siteWidth: 1024px; @borderStyle: dotted; body { color: @mainColor; border: 1px @borderStyle @mainColor; max- @siteWidth; }
嵌套(Nesting)
如果我们在CSS中多个元素有一个相同的父元素,那么写样式会变得很乏味,我们需要一遍一遍的在每个元素前写这个父元素.
section { margin: 10px; } section nav { height: 25px; } section nav a { color: #0982C1; } section nav a:hover { text-decoration: underline; }