聊聊 SASS 用法指南，你学会了吗？

Sass 是聊聊一个 CSS 预处理器，完全兼容所有版本的用法 CSS。实际上，指南Sass 并没有真正为 CSS 语言添加任何新功能，聊聊只是用法在许多情况下可以可以帮助我们减少 CSS 重复的代码，节省开发时间。指南下面就来看看 Sass 中常用的聊聊功能吧!1. 注释

在 Sass 中支持两种类型的注释：

// 注释一

/* 注释二 */

需要注意，当 Sass 编译成CSS时，用法第一种注释不会编译到CSS中(只在Sass文件中可见)，指南第二种注释会编译到CSS中。聊聊

2. 嵌套

嵌套的用法写法是Sass的一大特点，通过嵌套这些代码，指南可以得到类似HTML结构的聊聊CSS代码，使代码更具可读性。用法

nav {

background : #C39BD3;

padding : 10px;

height: 50px;

ul {

display: flex;

list-style : none;

justify-content: flex-end;

li {

color: white;

margin-right: 10px;

}

}

}

那为什么要使用嵌套呢?指南在CSS中，如果想为其父元素的继承元素定义样式，就必须每次都选择父元素：

html, body {

height: 100%;

}

html #root, body #root {

height: 100%;

}

html .div-with-button, body .div-with-button {

background-color: black;

}

html .div-with-button button, body .div-with-button button {

background-color: #e4c681;

}

html .div-with-button button:hover, body .div-with-button button:hover {

background-color: #ffe082;

}

在Sass中就可以这样写，这样写就会使代码更加清晰、条理和简洁：

html, body {

height: 100%;

#root {

height: 100%;

}

.div-with-button {

background-color: black;

button {

background-color: #e4c681;

&:hover {

background-color: #ffe082;

}

}

}

}

注意，在编写Sass时，要嵌套嵌套太深，尽量不要超过三层，超过之后就会导致代码难以维护，服务器托管并且在编译为CSS时就会出现不必要的选择器，就会导致CSS文件变大。

我们还可以在嵌套中使用 &，比如鼠标在按钮上悬浮时，改变颜色。在CSS中是这样的：

button {

background-color: #535353;

color: #000;

}

button:hover {

background-color: #000;

color: #fff;

}

在Sass中就可以这么写：

button {

background-color: #535353;

color: #000;

&:hover {

background-color: #000;

color: #fff;

}

}

通常，& 总是指向它上面的元素，可以用于伪类和伪元素：

.box {

&:focus{ }

&:hover{ }

&:active{ }

&:first-child{ }

&:nth-child(2){ }

&::after{ }

&::before{ }

}

编译后的CSS代码如下：

.box:focus{ }

.box:hover{ }

.box:active{ }

.box:frist-child{ }

.box:nth-child(2){ }

.box::after{ }

.box::before{ }

此外，如果类以相同的词开头(比如box-yellow和box-red)，就可以嵌套它们：

.box {

&-yellow {

background: #ff6347;

}

&-red {

background: #ffd700;

}

&-green {

background: #9acd32;

}

}

编译成CSS就是这样的：

.box-yellow {

background: #ff6347;

}

.box-red {

background: #ffd700;

}

.box-green {

background: #9acd32;

}

Sass还支持使用:来嵌套属性：

add-icon {

background : {

image: url("./assets/arrow-right-solid.svg");

position: center center;

repeat: no-repeat;

size: 14px 14px;

}

}

上面的代码编译为如下CSS：

.add-icon {

background-image: url("./assets/arrow-right-solid.svg");

background-position: center center;

background-repeat: no-repeat;

background-size: 14px 14px;

}

3. 变量

变量是用来储存数据的，在Sass中，我们可以将任何有效的CSS值保存在变量中。变量使用$符号定义：

$red: #ee4444;

$black: #222;

$bg-color: #3e5e9e;

$link-color: red;

$p-color: #282A36;

$font-p: 13px;

$font-h1: 28px;

$base-font: Noto Sans KR, sans-serif;

变量的使用：

body {

background-color : $bg-color;

font-size : $font-p;

font-family : $base-font;

}

h1 {

font-size: $font-h1;

color: $black;

}

p {

font-size: $font-p;

color: $black;

}

a {

color: $link-color;

}

当Sass编译成CSS时，所有的变量都会被替换为定义的变量值。变量可以减少重复、进行复杂的数学运算等。源码下载

需要注意，CSS变量是有范围的，位于顶层的变量都是全局变量，在块中定义的变量都是局部变量。全局变量可以在任何地方使用，局部变量只能在变量定义的块中使用。

$my-global-variable: "global";

div {

$my-local-variables: "local";

}

变量值是可以覆盖的：

$color: #fefefe;

.content {

background-color: $color;

}

$color: #939393;

.footer {

background-color: $color;

}

在上面的代码中，content的背景颜色是#fefefe，而footer的背景颜色是#939393。要想改变全局变量，就需要添加!global修饰符：

$color: #111;

.content {

$color: #222;

background-color: $color;

}

.footer {

$color: #333 !global;

}

除此之外，Sass变量是可以指定默认值的：

$message-color: blue !default;

.message {

color: $message-color;

}

编译成的CSS代码如下：

p.message {

color: blue;

}

我们可以在 @import 之前覆盖模块默认值：

$message-color: black;

@import my-module;

.message {

color: $message-color;

}

编译成的CSS代码如下：

p.message {

color: black;

}

也就是说，带有 !default 的变量只有在没有值的服务器租用情况下才会生效。

4. Mixins 和 Include

mixin 是一组可以重用的 CSS 声明，语法类似于JavaScript中的函数，使用 @mixin 指令来代替 function 关键字。调用 mixin 是通过 @include 语句完成的。

以下是用 mixins 使元素水平垂直居中的方法：

@mixin absolute-center() {

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

}

.element {

@include absolute-center();

}

当然，mixin也是支持传递参数的：

@mixin square($size) {

width:$size;

height:$size;

}

div {

@include square(60px);

background-color:#000;

}

参数可以是可选的，可选参数的定义和Sass变量的定义形式是一样的：

@mixin square($width: 50px) {

width:$size;

height:$size;

}

我们还可以将 CSS 规则传递给 mixins。这些规则可以在使用 @content 的 mixin 中使用。

@mixin hover-not-disabled {

&:not([disabled]):hover {

@content;

}

}

.button {

border: 1px solid black;

@include hover-not-disabled {

border-color: blue;

}

}

这样mixin中的@content在编译后就会变成border-color: blue;这样写有助于减少&:not([disabled]):hover部分的重复。

5. @import 和 @use

在CSS中我们通常会创建多个CSS文件并在需要时引入：

这样做会使浏览器发出多个HTTP请求，从而在一定程度上降低应用的速度。而Sass会在代码发动到浏览器之前进行代码组合，这样只需要请求一个CSS文件。

下面来看看如何使用 @import 将文件分块并导入到一个父文件中：

body {

padding:0;

margin:0;

}

body, html {

width:100%;

min-height:100%;

}

@import normalize;

content {

max-width:660px;

}

假设 normalize.scss 和 styles.scss 都在同一个文件夹中，可以将一个导入另一个，如上所示。在使用@import时，所有变量、mixin 等都可以全局访问，因为一切都是全局的，所以库必须为其所有成员添加前缀以避免命名冲突。因此不建议使用 @import。

可以使用 @use 来代替，它的基本用法与@import 相同：

@use normalize;

content {

max-width:660px;

}

使用 @use 导入的文件称为模块。要使用这些模块的 mixin 或变量，必须使用命名空间来调用它们。默认情况下，命名空间是文件名(不带扩展名)。

$accent-color: #535353;

@mixin dark-background {

background-color:#000;

color:#fff;

}

还可以使用 as 来使用自定义命名空间：

@use src/colors;

body {

color: colors.$accent-color;

}

.dark-region {

@include colors.dark-background;

}

当 _ 被添加到 SCSS 文件的文件名前时，解析器知道它是一个部分文件并且它仅用于导入。导入时，_ 部分是可选的。注意，这里使用 src/colors 来导入 src/_colors.scss。

6. 算术运算符

在CSS中可以使用calc()进行数学计算，Sass 支持直接使用+、-、/、*、% 操作符对值和变量进行计算：

$content-width: 600px;

content {

width:$content-width;

}

.inner-content {

width: $content-width - 60px;

}

.outer-content {

width: $content-width + 60px;

}

7. 流程控制

在 Sass 中有四种类型的流程控制规则：@if /@else、@each、@for 和@while。其中 @if 和 @else 类似于 JavaScript 中的 if 和 else。

@mixin theme($is-dark: false) {

@if $is-dark {

}

@else {

}

}

@each 类似于 JavaScript 中的 for of：

$sizes: 40px, 50px, 80px;

@each $size in $sizes {

.icon-#{ $size} {

font-size: $size;

height: $size;

width: $size;

}

}

注意：#{ $size} 表示法用于使用变量制作动态属性名称和选择器，这称为插值。

@for 类似于 JavaScript 中的 for 循环：

@for $i from 1 through 4 {

.bubble-#{ $i} {

transition-delay: .3 * $i;

}

}

@while(不常用)类似于 JavaScript 中的 while 循环。

8. 扩展/继承

有时需要编写一个仅用于扩展的样式规则。在这种情况下，可以使用占位符选择器，它看起来像以 % 而不是 . 开头的类选择器。

%flex {

display: flex;

}

.some-class {

height: 50%;

background-color: black;

}

%flex_with_color {

@extend %flex;

@extend .some-class;

}

%button_styles {

height: 50px;

width: 200px;

}

div {

@extend %flex_with_color;

button {

@extend %button_styles;

color: #424242;

background-color: #d966fb;

}

}

上面的代码编译成CSS之后将是这样的：

div {

display: flex;

}

.some-class, div {

height: 50%;

background-color: black;

}

div button {

height: 50px;

width: 200px;

}

div button {

color: #424242;

background-color: #d966fb;

}

9. 媒体查询

在Sass中可以这样来使用媒体查询：

body {

article {

p {

font-size: 100%;

color: black;

padding: 10px;

@media (max-width: 768px) {

font-size: 150%;

}

}

}

}

编译成的CSS代码如下：

body article p {

font-size: 100%;

color: black;

padding: 10px;

}

@media (max-width: 768px) {

body article p {

font-size: 150%;

}

}

媒体查询是支持嵌套的，并将所有适用的查询与 and 运算符结合起来：

p {

@media (max-width: 768px) {

font-size: 150%;

@media (orientation: landscape) {

line-height: 75%;

}

}

}

编译成的CSS代码如下：

@media (max-width: 768px) {

p {

font-size: 150%;

}

}

@media (max-width: 768px) and (orientation: landscape) {

p {

line-height: 75%;

}

}