Sass (英文全称:Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。
- Sass 是一个 CSS 预处理器。
- Sass 是 CSS 扩展语言,可以帮助我们减少 CSS 重复的代码,节省开发时间。
- Sass 完全兼容所有版本的 CSS。
- Sass 扩展了 CSS3,增加了规则、变量、混入、选择器、继承、内置函数等等特性。
- Sass 生成良好格式化的 CSS 代码,易于组织和维护。
- Sass 文件后缀为 .scss。
Sass 实例
/* 定义颜色变量,要修改颜色值,修改这里就可以了 */
$primary_1: red;
$primary_2: yellow;
$primary_3: pink;
/* 使用变量 */
.main-header {
background-color: $primary_1;
}
编译后在css中显示
.main-header {
background-color:red ;
}
.menu-left {
background-color: $primary_2;
}
编译后在css中显示
.main-header {
background-color:yellow ;
}
.menu-right {
background-color: pink;
}
sass
并不想强迫任何人一定使用中划线或下划线,所以这两种用法相互兼容。
sass中的嵌套
#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 }
静默注释
body {
color: #333; // 这种注释内容不会出现在生成的css文件中
padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}
在scss中用
/* ... */
的注释内容可以在css
文件中生成。
css
有一个特别不常用的特性,即@import
规则,它允许在一个css
文件中导入其他css
文件。然而,后果是只有执行到@import
时,浏览器才会去下载其他css
文件,这导致页面加载起来特别慢。
sass
也有一个@import
规则,但不同的是,sass
的@import
规则在生成css
文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css
文件中,而无需发起额外的下载请求。另外,所有在被导入文件中定义的变量和混合器(参见2.5节)均可在导入文件中使用。
使用sass
的@import
规则并不需要指明被导入文件的全名。你可以省略.sass
或.scss
文件后缀(见下图)。这样,在不修改样式表的前提下,你完全可以随意修改你或别人写的被导入的sass
样式文件语法,在sass
和scss
语法之间随意切换。举例来说,@import
"sidebar";这条命令将把sidebar.scss
文件中所有样式添加到当前样式表中。