这篇“怎么使用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”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注编程网行业资讯频道。