50 lines
2.5 KiB
Markdown
50 lines
2.5 KiB
Markdown
|
---
|
|||
|
title: CSS Preprocessors
|
|||
|
localeTitle: CSS预处理器
|
|||
|
---
|
|||
|
## CSS预处理器
|
|||
|
|
|||
|
CSS预处理器越来越成为前端Web开发人员工作流程的支柱。 CSS是一种非常复杂和细微的语言,为了使它的使用更容易,开发人员经常转向使用SASS或LESS等预处理器。
|
|||
|
|
|||
|
CSS预处理器编译使用特殊编译器编写的代码,然后使用它创建一个css文件,然后可以通过主HTML文档进行参考。使用任何CSS预处理器时,您将能够像在预处理器不到位时那样在普通CSS中编程,但您也可以使用更多选项。一些,例如SASS,具有特定的样式标准,这意味着使文档的编写更容易,例如,如果您选择这样做,则可以省略大括号。
|
|||
|
|
|||
|
当然,CSS预处理器也提供其他功能。提供的许多功能在预处理器中非常相似,语法上只有轻微的差异。因此,您可以选择任何您想要的人,并且能够实现相同的目标。一些更有用的功能是:
|
|||
|
|
|||
|
### 变量
|
|||
|
|
|||
|
任何编程语言中最常用的项目之一是变量,这是CSS特别缺乏的。通过使用变量,您可以定义一次值,并在整个程序中重复使用。 SASS的一个例子是:
|
|||
|
|
|||
|
```SASS
|
|||
|
$yourcolor: #000056
|
|||
|
.yourDiv {
|
|||
|
color: $yourcolor;
|
|||
|
}
|
|||
|
```
|
|||
|
|
|||
|
通过声明`SASS yourcolor`变量一次,现在可以在整个文档中重复使用相同的精确颜色,而无需重新键入定义。
|
|||
|
|
|||
|
### 循环
|
|||
|
|
|||
|
语言中的另一个常见项是循环,CSS缺少的东西。循环可用于多次重复相同的指令,而无需多次重新输入。 SASS的一个例子是:
|
|||
|
|
|||
|
\`\`\`SASS @for $ vfoo 35px to 85px { .margin - #{vfoo} { 保证金:$ vfoo 10px; } }
|
|||
|
```
|
|||
|
This loop saves us from having the to write the same code multiple times to change the margin size.
|
|||
|
|
|||
|
### If/Else Statements
|
|||
|
Yet another feature which CSS lacks are If/Else statements. These will run a set of instructions only if a given condition is true. An example of this in SASS would be:
|
|||
|
```
|
|||
|
|
|||
|
上海社会科学院 @if width(body)> 500px { 背景颜色:蓝色; } else { 背景颜色:白色; } \`\`\` 在这里,背景颜色将根据页面主体的宽度改变颜色。
|
|||
|
|
|||
|
这些只是CSS预处理器的一些主要功能。如您所见,CSS预处理器是非常有用的和多功能的工具。许多Web开发人员使用它们,强烈建议至少学习其中一个。
|
|||
|
|
|||
|
#### 更多信息:
|
|||
|
|
|||
|
SASS:http://sass-lang.com/
|
|||
|
|
|||
|
更少:http://lesscss.org/
|
|||
|
|
|||
|
手写笔:http://stylus-lang.com/
|
|||
|
|
|||
|
MDN页面:https://developer.mozilla.org/en-US/docs/Glossary/CSS\_preprocessor
|