怎么使用Sass

这篇“怎么使用Sass”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“怎么使用Sass”文章吧。

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

　　}

以上就是关于“怎么使用Sass”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网VUE频道。