一、简介
前言
因为 CSS 本身语法不够强大,导致重复编写一些代码,无法实现复用,而且在代码也不方便维护。
所以 Sass 引入可以合理的样式复用机制,增加了规则、变量、混入、选择器、继承、内置函数等等特性。
Sass (英文全称:Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的 层叠样式表语言。
- Sass 是一个 CSS 预处理器。
- Sass 是 CSS 扩展语言,是CSS的超集,可以帮助我们减少 CSS 重复的代码,节省开发时间。
- Sass 完全兼容所有版本的 CSS。
- Sass 扩展了 CSS3,增加了规则、变量、混入、选择器、继承、内置函数等等特性。
- Sass 生成良好格式化的 CSS 代码,易于组织和维护。
- Sass 文件后缀为
.scss
。
官网:https://sass-lang.com
中文网:https://www.sass.hk
Sass预处理器
浏览器并不支持 Sass 代码。因此,需要使用一个 Sass 预处理器将 Sass 代码转换为 CSS 代码。可以去官网查看安装教程。
命令
sass xxx.scss xxx.css
从终端运行thesass命令,可以将Sass编译为CSS。sass --watch input.scss output.css
使用--watch
标志观看单个文件或目录的,可以在每次保存Sass时重新编译CSS。sass --watch app/sass:public/stylesheets
可以使用文件夹路径作为输入和输出,并用冒号将它们分开,来观察和输出到目录。
可以使用
二、应用
.html
文件当中是不能直接使用Sass, 需要.scss
转译成.css
,并引入生成的.css
文件进行使用,项目结束后根据需要是否删除 .scss
文件和 .map
文件。
变量
可以用来存储需要重复使用的CSS值等内容,例如:颜色、字体堆栈等等。
使用 $
符号进行声明。
示例:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
嵌套
Sass将允许您以遵循HTML相同视觉层次结构的方式嵌套CSS选择器。使CSS具有更佳的可读性。
示例:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
部分
部分是带有前导下划线的Sass文件。你可以把它命名为_partial.scss
。
让Sass预处理器知道该文件只是一个部分文件,它不应该生成成CSS文件。Sass部分与@use
规则一起使用。
模块
可以使用@use
规则 拆分 .scss
,此规则将另一个Sass文件加载为模块。
####### 示例:
// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
// styles.scss
@use 'base';
.inverse {
background-color: base.$primary-color;
color: white;
}
混合
Sacc允许制作一组CSS声明,并在整个站点中重复使用。需要使用@mixin
、@include
规则。
示例:
@mixin theme($theme: DarkGray) {
background: $theme;
box-shadow: 0 0 1px rgba($theme, .25);
color: #fff;
}
.info {
@include theme;
}
.alert {
@include theme($theme: DarkRed);
}
.success {
@include theme($theme: DarkGreen);
}
示例解析:
要创建混和,先使用@mixin
指令进行命名,示例命名了混合theme
,且在括号内使用变量$theme
,这样可以传递任何的主题。创建@mixin
后,可以将其用作以@include
开头的CSS声明,后跟@mixin
的名称。
继承/扩展
使用@extend
,可以将一组CSS属性从一个选择器共享到另一个选择器。
作用:
- 只有在扩展时才会打印,并且可以帮助保持编译的CSS整洁。
- 有助于避免在HTML元素上写入多个类名。
示例:
/* This CSS will print because %message-shared is extended. */
%message-shared {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
// This CSS won't print because %equal-heights is never extended.
%equal-heights {
display: flex;
flex-wrap: wrap;
}
.message {
@extend %message-shared;
}
.success {
@extend %message-shared;
border-color: green;
}
.error {
@extend %message-shared;
border-color: red;
}
.warning {
@extend %message-shared;
border-color: yellow;
}
.css
/* This CSS will print because %message-shared is extended. */
.warning, .error, .success, .message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}
引申:
这个示例也可以通过混合的规则实现,不过在生成.css的文件里面,代码的简洁性上不如扩展。
运算符
Sass有少数标准数学运算符,如+
、-
、*
、math.div()
、%
。
@use "sass:math";
.container {
display: flex;
}
article[role="main"] {
width: math.div(600px, 960px) * 100%;
}
aside[role="complementary"] {
width: math.div(300px, 960px) * 100%;
margin-left: auto;
}