对于大部分前端程序员来说,最痛苦的是莫过于写样式(css)了,试想一下,当做了 一个炫酷插件,或者实现了多牛逼的功能,可是没有完美样式,是不被人宠幸的,巨了解,我身边绝大部分的人都及其不喜欢写样式,一方面:嵌套多层元素时,那选择器的写法可不建议简写,毕竟涉及到样式覆盖与权重的问题;第二方面:对于某些程序员来说这与体力活不差一二。可是在我看来,一个优秀的,吸引人的web,样式的成分还是还是处于上游的,试想一下,一个web,没有“华丽”的表面,怎么吸引人的注意?我始终相信这样一句话“天无绝程序员之路”,这时候sass就拯救了我们
一、什么是SASS
SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。
本文总结了SASS的主要用法。我的目标是,有了这篇文章,日常的一般使用就不需要去看官方文档了。
二、安装和使用
2.1 安装
SASS是Ruby语言写的,但是两者的语法没有关系。不懂Ruby,照样使用。只是必须先安装Ruby,然后再安装SASS。
假定你已经安装好了Ruby,接着在命令行输入下面的命令:
gem install sass复制代码
然后,就可以使用了。
2.2 使用
SASS文件就是普通的文本文件,里面可以直接使用CSS语法。文件后缀名是.scss,意思为Sassy CSS。
下面的命令,可以在屏幕上显示.scss文件转化的css代码。(假设文件名为test。)
sass test.scss复制代码
如果要将显示结果保存成文件,后面再跟一个.css文件名。
sass test.scss test.css复制代码
SASS提供四个编译风格的选项:
* nested:嵌套缩进的css代码,它是默认值。
* expanded:没有缩进的、扩展的css代码。
* compact:简洁格式的css代码。
* compressed:压缩后的css代码。复制代码
生产环境当中,一般使用最后一个选项。
sass --style compressed test.sass test.css复制代码
你也可以让SASS监听某个文件或目录,一旦源文件有变动,就自动生成编译后的版本。
// watch a file
sass --watch input.scss:output.css
// watch a directory
sass --watch app/sass:public/stylesheets复制代码
SASS的官方网站,提供了一个在线转换器。你可以在那里,试运行下面的各种例子。
三、基本用法
3.1 变量
SASS允许使用变量,所有变量以$开头。
$blue : #1875e7;
div {
color : $blue;
}复制代码
如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。
$side : left;
.rounded {
border-#{$side}-radius: 5px;
}复制代码
3.2 计算功能
SASS允许在代码中使用算式:
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}复制代码
3.3 嵌套
SASS允许选择器嵌套。比如,下面的CSS代码:
div h1 {
color : red;
}复制代码
可以写成:
div {
hi {
color:red;
}
}复制代码
属性也可以嵌套,比如border-color属性,可以写成:
p {
border: {
color: red;
}
}复制代码
注意,border后面必须加上冒号。
在嵌套的代码块内,可以使用&引用父元素。比如a:hover伪类,可以写成:
a {
&:hover {
color: #ffb3ff;
}
}复制代码
3.4 注释
SASS共有两种注释风格。
标准的CSS注释 /* comment */ ,会保留到编译后的文件。
单行注释 // comment,只保留在SASS源文件中,编译后被省略。
在/*后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。
/*!
重要注释!
*/复制代码
四、代码的重用
4.1 继承
SASS允许一个选择器,继承另一个选择器。比如,现有class1:
.class1 {
border: 1px solid #ddd;
}复制代码
class2要继承class1,就要使用@extend命令:
.class2 {
@extend .class1;
font-size:120%;
}复制代码
4.2 Mixin
Mixin有点像C语言的宏(macro),是可以重用的代码块。
使用@mixin命令,定义一个代码块。
@mixin left {
float: left;
margin-left: 10px;
}复制代码
使用@include命令,调用这个mixin。
div {
@include left;
}复制代码
mixin的强大之处,在于可以指定参数和缺省值。
@mixin left($value: 10px) {
float: left;
margin-right: $value;
}复制代码
使用的时候,根据需要加入参数:
div {
@include left(20px);
}复制代码
下面是一个mixin的实例,用来生成浏览器前缀。
@mixin rounded($vert, $horz, $radius: 10px) {
border-#{$vert}-#{$horz}-radius: $radius;
-moz-border-radius-#{$vert}#{$horz}: $radius;
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}复制代码
使用的时候,可以像下面这样调用:
#navbar li {
@include rounded(top, left);
}
#footer {
@include rounded(top, left, 5px);
}复制代码
4.3 颜色函数
SASS提供了一些内置的颜色函数,以便生成系列颜色。
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c复制代码
4.4 插入文件
@import命令,用来插入外部文件。
@import "path/filename.scss";复制代码
如果插入的是.css文件,则等同于css的import命令。
@import "foo.css";复制代码
五、高级用法
5.1 条件语句
@if可以用来判断:
p {
@if 1 + 1 == 2 {
border: 1px solid;
}
@if 5 < 3 {
border: 2px dotted;
}
}复制代码
配套的还有@else命令:
@if lightness($color) > 30% {
background-color: #000;
}
@else {
background-color: #fff;
}复制代码
5.2 循环语句
SASS支持for循环:
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}复制代码
也支持while循环:
$i: 6;
@while $i > 0 {
.item-#{$i} {
width: 2em * $i;
}
$i: $i - 2;
}复制代码
each命令,作用与for类似:
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}复制代码
5.3 自定义函数
SASS允许用户编写自己的函数。
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}
复制代码
Sass 相关面试问题
什么是SASS?
SASS(Syntactically Awesome Stylesheet)是一个CSS预处理器,有助于减少CSS的重复,节省时间。 它是更稳定和强大的CSS扩展语言,描述文档的样式干净和结构。
1、为什么要使用SASS?
它是预处理语言,它为CSS提供缩进语法(它自己的语法)。
它允许更有效地编写代码和易于维护。
它是包含CSS的所有功能的CSS的超集,是一个开源的预处理器,以 Ruby 编码。
它提供了比平面CSS好的结构格式的文档样式。
它使用可重复使用的方法,逻辑语句和一些内置函数,如颜色操作,数学和参数列表。
2、列出SASS的一些功能?
它是更稳定,强大,与CSS的版本兼容。
它是超集的CSS和基于JavaScript。
它被称为CSS的语法糖,这意味着它使用户更容易阅读或表达的东西更清楚。
它使用自己的语法并编译为可读的CSS。
你可以在更少的时间内轻松地编写CSS代码。
它是一个开源的预处理器,被解释为CSS。
3、SASS的优点是什么?
它允许在编程结构中编写干净的CSS。
它有助于编写CSS更快。
它是CSS的超集,帮助设计师和开发人员更有效率和快速地工作。
由于Sass兼容所有版本的CSS,我们可以使用任何可用的CSS库。
可以使用嵌套语法和有用的函数,如颜色操作,数学和其他值。
4、SASS的缺点是什么?
开发人员需要时间了解此预处理器中存在的新功能。
如果更多的人在同一个网站上工作,那么将使用相同的预处理器。 有些人使用Sass,有些人使用CSS直接编辑文件。 因此,它将变得难以与现场工作。
有机会失去浏览器的内置元素检查器的好处。
5、列出SASS支持的两种语法?
SASS支持两种语法,即 SCSS 和缩进语法。
SCSS(Sassy CSS)是CSS语法的扩展,可以更容易地维护大型样式表,并且可以识别供应商特定的语法和许多CSS。 SCSS文件使用扩展名 .scss 。
缩进是较旧的语法,有时仅称为 Sass 。 使用这种形式的语法,可以简洁地编写CSS。 SASS文件使用扩展名 .sass 。
6、有多少种方法可以使用SASS?
您可以使用三种不同的方式使用SASS:
作为命令行工具
作为一个Ruby模块
作为Rack启用框架的插件
7、SASS中的嵌套规则是什么?
嵌套是不同逻辑结构的组合。 使用SASS,我们可以将多个CSS规则相互组合。 如果使用多个选择器,则可以在另一个选择器中使用一个选择器来创建复合选择器。
8、如何在SASS中引用父选择器?
您可以使用&amp; 字符选择父级选择器。 它告诉父选择器应该插入的位置。
9、如何在SASS中写入占位符选择器?
SASS使用 class 或 id 选择器支持占位符选择器。 在正常CSS中,这些用“#"或“。"指定,但在SASS中,它们替换为“%"。
10、列出SASS上的不同类型的运算符?
有5种类型的运算符:
数字运算符
颜色运算符
字符串运算符
布尔运算符
列表运算符
它允许诸如加法,减法,乘法和除法的数学运算。
它允许使用颜色分量和算术运算。
列表表示使用逗号或空格分隔的一系列值。
您可以使用and、or和not(与或非)对Sass脚本执行布尔运算。
括号是一对标记,通常用圆括号()或方括号[]来标记,这提供了影响操作顺序的符号逻辑。
它使用#{} 语法提供选择器和属性名称中的SassScript变量。 您可以在花括号中指定变量或属性名称。
您可以通过向变量值的结尾添加 !default 标志来设置变量的默认值。如果值已经分配给变量,则不会重新分配该值。
它直接采用文件名导入,所有导入的文件将合并到一个单一的CSS文件。
它将样式规则设置为不同的媒体类型。
它用于共享选择器之间的规则和关系。 它可以在一个类中扩展所有其他类样式,也可以应用自己的特定样式。
它是一个嵌套规则的集合,它能够在文档的根节点创建样式块。
它用于基于表达式求值的结果选择性地执行代码语句。
@else if语句与@if指令一起使用,每当@if语句失败,则尝试@else if语句,如果它们也失败,则执行@else。
它允许您在循环中生成样式。 计数器变量用于设置每次迭代的输出。
在@each指令中,定义了一个包含列表中每个项目的值的变量。
它用于定义mixin,其中包含可选的mixin名称之后的变量和参数。
它用于在文档中包含mixin,由mixin定义的样式可以包含在当前规则中。
SassScript值可以作为mixin中的参数,当mixin包含并在mixin中作为变量使用时,可以将其作为参数。
有两种类型的mixin参数:
关键字参数
可变参数
它用于在mixin中包含参数。 命名的参数可以按任何顺序传递,参数的默认值可以省略。
变量参数用于将任意数量的参数传递给mixin。 它包含传递给函数或mixin的关键字参数。
使用函数指令,可以创建自己的函数,并在脚本上下文中使用它们,或者可以使用任何值。
SASS生成的CSS文件由反映文档结构的默认CSS样式组成。 默认的CSS样式很好,但可能不适合所有情况。
嵌套样式是SASS的默认样式。 这种方式的样式在处理大型CSS文件时非常有用。
在扩展输出样式中,每个属性和规则都有自己的线。 与嵌套CSS样式相比,它需要更多的空间。
紧凑的CSS风格竞争力比Expanded和Nested占用更少的空间。 它主要关注选择器而不是其属性。
与所有其他样式相比,压缩的CSS样式占用最少的空间。 它仅提供空格,以在文件末尾分隔选择器和换行符。
它使用缩进而不是 {和} 来分隔块。
要分隔语句,它使用换行符而不是分号(;)。
属性声明和选择器必须放在自己的行上, {和} 中的语句必须放在>和缩进。
CSS属性可以通过两种方式声明:
属性可以声明为类似于CSS但没有分号(;)。
colon(:)将以每个属性名称为前缀。
您可以使用= for @mixin指令和+ for @include指令,这需要更少的键入,使您的代码更简单,更容易阅读。
sass --watch C:\\ ruby \\ lib \\ sass \\ style.scss:style.css
注释占用整行并包围嵌套在它们下面的所有文本,它们是基于行的缩进语法。
sass input.scss output.css
首先它检查Unicode字节,下一个@charset声明,然后检查Ruby字符串编码。
接下来,如果未设置任何内容,则会将字符集编码视为。
使用@charset声明显式地确定字符编码。 只需在样式表的开头使用“@charset encoding name",SASS将假设这是给定的字符编码。
如果SASS的输出文件包含非ASCII字符,那么它将使用 @charset 声明。
Sass支持两种类型的注释:
多行注释 - 使用/ *和* /写入。 多行注释保存在CSS输出中。
单行注释 - 这些是使用 // 和注释写成的。 单行注释不会保留在CSS输出中。
它使用命令行评估SassScript表达式。 您可以使用sass命令行和 -i 选项运行shell。
它检测错误并将SassScript表达式值显示到标准错误输出流。
它将SassScript表达式值显示为致命错误。