1、Sass简单介绍
Sass是对CSS(层叠样式表)的语法的一种扩充,诞生于2007年,最早也是最成熟的一款CSS预处理器语言,它可以使用变量、常量、嵌套、混入、函数等功能,Sass最后还是会编译出合法的CSS让浏览器使用,也就是说它本身的语法并不太容易让浏览器识别,因为 它不是标准的CSS格式,在它的语法内部可以使用动态变量等,所以它更像一种极简单的动态语言。
现在的Sass已经有了两套语法规则:一个依旧是用缩进作为分隔符来区分代码块的;另一套规则和CSS一样采用了大括号({})作为分隔符。后一种语法规则又名scss,在Sass3之后的版本都支持这种语法规则。本文主要介绍scss
2、变量声明
- sass用$定义变量,变量可以定义在css规则之外也可以定在css规则之内,就像js中的全局变量与局部变量
- sass变量名称可以用中划线也可以用下滑线,中划线定义的变量可以用下滑线来引用,反之亦然
$basic-border: 1px solid black;
$plain-font: "Myriad Pro"、Myriad、"Helvetica Neue"、Helvetica;
$nav-color: #F90;
nav {
$width: 100px;
width: $width;
color: $nav-color;
}
/* 编译后 */
nav {
width: 100px;
color: #F90;
}
$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
border: $highlight-border;
}
/* 编译后 */
.selected {
border: 1px solid #F90;
}
3、嵌套CSS 规则
Sass的嵌套规则与css的嵌套规则很相似
后代选择器
#content {
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
aside { background-color: #EEE }
}
/* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
#content {
background-color: #f5f5f5;
aside { background-color: #eee }
}
/* 编译后 */
#content { background-color: #f5f5f5 }
#content aside { background-color: #eee }
父选择器的标识符&
- &:父选择器
当包含父选择器标识符的嵌套规则被打开时,它不会像后代选择器那样进行拼接,而是&被父选择器直接替换
article a {
color: blue;
&:hover { color: red }
}
/* 编译后 */
article a { color: blue } /*后代选择器*/
article a:hover { color: red } /*父选择器*/
.container {
h1, h2, h3 {margin-bottom: .8em}/*群组选择器*/
}
/* 编译后 */
.container h1, .container h2, .container h3 { margin-bottom: .8em }
nav, aside {
a {color: blue}/*群组选择器+后代选择器*/
}
/* 编译后 */
nav a, aside a {color: blue}
- '>':表示直接子类
- '+':只会选择第一个相邻的匹配元素
- '~':匹配所有在元素之后的同级元素
4、导入sass文件
css有一个特别不常用的特性,即@import规则,它允许在一个css文件中导入其他css文件。然而,后果是只有执行到@import时,浏览器才会去下载其他css文件,这导致页面加载起来特别慢。
sass也有一个@import规则,但不同的是,sass的@import规则是在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中,而无需发起额外的下载请求。另外,所有在被导入文件中定义的变量和混合器均可在导入文件中使用。
Sass导入规则
当通过@import把sass样式分散到多个文件时,你通常只想生成少数几个css文件。那些专门为@import命令而编写的sass文件,并不需要生成对应的独立css文件,这样的sass文件称为局部文件。对此,sass有一个特殊的约定来命名这些文件,
此约定即,sass局部文件的文件名以下划线开头。这样,sass就不会在编译时单独编译这个文件输出css,而只把这个文件用作导入。当你@import一个局部文件时,还可以不写文件的全名,即省略文件名开头的下划线。举例来说,你想导入themes/_night-sky.scss这个局部文件里的变量,你只需在样式表中写@import "themes/night-sky";
网友评论