什么是CSS预处理器？

 

　　CSS预处理器是一种脚本语言，它通过允许开发人员用一种语言编写代码然后将其编译成CSS来扩展CSS。Sass可能是最受欢迎的预处理器，但其他常见的例子包括Less和Stylus。

 

　　什么是SASS？

 

　　Sass（SyntacticallyAwesomeStyleSheets）是CSS的扩展，使您可以使用变量，嵌套规则，内联导入等内容。它还有助于保持组织有序，并允许您更快地创建样式表。

 

　　Sass与所有版本的CSS兼容。使用它的唯一要求是必须安装Ruby。

 

　　如何使用Sass？

 

　　句法：

 

　　Sass包含两个语法选项：

 

　　1、SCSS(SassyCSS)：使用.scss文件扩展名，完全符合CSS语法

 

　　2、Indented(简单地称为'Sass')：使用.sass文件扩展名和缩进而不是括号;它不完全符合CSS语法，但编写起来更快

 

　　请注意，可以使用sass-convert命令将文件从一种语法转换为另一种语法。

 

　　变量

 

　　与其他编程语言一样，Sass允许使用可存储可在整个样式表中使用的信息的变量。例如，您可以将颜色值存储在文件顶部的变量中，然后在设置元素的颜色时使用此变量。这使您可以快速更改颜色，而无需单独修改每一行。

 

　　例如：

 

　　$font-stack:Helvetica,sans-serif;

 

　　$primary-color:red;

 

　　body{

 

　　font:100%$font-stack;

 

　　color:$primary-color;}

 

　　将生成以下CSS：

 

　　body{

 

　　font:100%Helvetica,sans-serif;

 

　　color:red;

 

　　}

 

　　2.jpg

 

　　嵌套

 

　　嵌套是一把双刃剑。虽然它提供了一种减少需要编写的代码量的绝佳方法，但如果不仔细执行，它也会导致过度限定的CSS。我们的想法是以一种模仿HTML层次结构的方式嵌套CSS选择器。

 

　　以下显示了使用嵌套的基本导航样式：

 

　　nav{

 

　　ul{

 

　　margin:0;

 

　　padding:0;

 

　　list-style:none;

 

　　}

 

　　li{display:inline-block;}

 

　　a{

 

　　display:block;

 

　　padding:6px12px;

 

　　text-decoration:none;

 

　　}}

 

　　CSS输出如下：

 

　　navul{

 

　　margin:0;

 

　　padding:0;

 

　　list-style:none;

 

　　}

 

　　navli{

 

　　display:inline-block;

 

　　}

 

　　nava{

 

　　display:block;

 

　　padding:6px12px;

 

　　text-decoration:none;

 

　　}







本文转载自中文网