简而言之，Sass是一个CSS预处理器，它将特殊功能（如变量，嵌套规则和mixins（有时称为语法糖））添加到常规CSS中。目的是使编码过程更简单，更有效。让我们更详细地探讨一下。

 

　　什么是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;

 

　　}

 

　　3.jpg

 

　　Partials

 

　　Partials是较小的Sass文件，可以导入到其他Sass文件中。将partials视为代码片段。使用这些代码片段，我们的CSS现在可以模块化并且更易于维护。部分通过使用前导下划线命名为_partial.scss来指定。

 

　　导入（Import）

 

　　使用局部模板，在@import指令，可以导入你的部分文件到当前文件，建立一个单一的CSS文件。请注意将为每个导入生成的HTTP请求使用的导入数量。

 

　　//_reset.scss

 

　　html,

 

　　body,

 

　　ul,

 

　　ol{

 

　　margin:0;

 

　　padding:0;}

 

　　//basefile.scss

 

　　@import'reset';

 

　　body{

 

　　font:100%Helvetica,sans-serif;

 

　　background-color:#efefef;

 

　　}

 

　　相应的CSS输出：

 

　　html,body,ul,ol{

 

　　margin:0;

 

　　padding:0;

 

　　}

 

　　body{

 

　　font:100%Helvetica,sans-serif;

 

　　background-color:#efefef;

 

　　}

 

　　注意：导入partials时，您不需要包含文件扩展名或下划线。

 

　　mixins

 

　　使用预处理器的一个优点是能够采用复杂，冗长的代码并简化它。这就是mixins派上用场的地方！

 

　　例如，如果您需要包含供应商前缀，则可以使用mixin。看一下border-radius的这个例子：

 

　　@mixinborder-radius($radius){

 

　　-webkit-border-radius:$radius;

 

　　-moz-border-radius:$radius;

 

　　-ms-border-radius:$radius;

 

　　border-radius:$radius;

 

　　}

 

　　.box{

 

　　@includeborder-radius(10px);

 

　　}

 

　　注意顶部的@mixin指令。它的名称为border-radius，并使用变量$radius作为参数。此变量用于设置每个元素的半径值。

 

　　稍后，调用@include指令以及mixin名称（border-radius）和参数（10px）。因此.box{@includeborder-radius（10px）;}。

 

　　生成以下CSS：

 

　　.box{

 

　　-webkit-border-radius:10px;

 

　　-moz-border-radius:10px;

 

　　-ms-border-radius:10px;

 

　　border-radius:10px;

 

　　}

 

　　扩展/继承

 

　　该@extend指令被称为是Sass的最强大的功能之一。看到它在行动后，很明显为什么。

 

　　我们的想法是，使用此指令，您不必在HTML元素上包含多个类名，并且可以保持代码干燥。您的选择器可以继承其他选择器的样式，然后在需要时轻松扩展。现在这很强大。

 

　　Sass的优点：

 

　　能够在CSS中执行计算，允许我们执行更多的操作，例如将像素值转换为百分比。我们还可以访问标准数学函数，如加法，减法，乘法和除法。当然，可以组合这些功能来创建复杂的计算。

 

　　此外，Sass还包含一些内置函数来帮助操作数字。像percentage（），floor（）和round（）这样的函数就是一些例子。

 

　　总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。







本文转载自中文网