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

1. 注释

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

  1. // 注释一
  2. /* 注释二 */

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

2. 嵌套

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

  1. nav {
  2. background : #C39BD3;
  3. padding : 10px;
  4. height: 50px;
  5. ul {
  6. display: flex;
  7. list-style : none;
  8. justify-content: flex-end;
  9. li {
  10. color: white;
  11. margin-right: 10px;
  12. }
  13. }
  14. }

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

  1. html, body {
  2. height: 100%;
  3. }
  4. html #root, body #root {
  5. height: 100%;
  6. }
  7. html .div-with-button, body .div-with-button {
  8. background-color: black;
  9. }
  10. html .div-with-button button, body .div-with-button button {
  11. background-color: #e4c681;
  12. }
  13. html .div-with-button button:hover, body .div-with-button button:hover {
  14. background-color: #ffe082;
  15. }

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

  1. html, body {
  2. height: 100%;
  3. #root {
  4. height: 100%;
  5. }
  6. .div-with-button {
  7. background-color: black;
  8. button {
  9. background-color: #e4c681;
  10. &:hover {
  11. background-color: #ffe082;
  12. }
  13. }
  14. }
  15. }

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

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

  1. button {
  2. background-color: #535353;
  3. color: #000;
  4. }
  5. button:hover {
  6. background-color: #000;
  7. color: #fff;
  8. }

在Sass中就可以这么写:

  1. button {
  2. background-color: #535353;
  3. color: #000;
  4. &:hover {
  5. background-color: #000;
  6. color: #fff;
  7. }
  8. }

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

  1. .box {
  2. &:focus{}
  3. &:hover{}
  4. &:active{}
  5. &:first-child{}
  6. &:nth-child(2){}
  7. &::after{}
  8. &::before{}
  9. }

编译后的CSS代码如下:

  1. .box:focus{}
  2. .box:hover{}
  3. .box:active{}
  4. .box:frist-child{}
  5. .box:nth-child(2){}
  6. .box::after{}
  7. .box::before{}

此外,如果类以相同的词开头(比如box-yellowbox-red),就可以嵌套它们:

  1. .box {
  2. &-yellow {
  3. background: #ff6347;
  4. }
  5. &-red {
  6. background: #ffd700;
  7. }
  8. &-green {
  9. background: #9acd32;
  10. }
  11. }

编译成CSS就是这样的:

  1. .box-yellow {
  2. background: #ff6347;
  3. }
  4. .box-red {
  5. background: #ffd700;
  6. }
  7. .box-green {
  8. background: #9acd32;
  9. }

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

  1. add-icon {
  2. background : {
  3. image: url("./assets/arrow-right-solid.svg");
  4. position: center center;
  5. repeat: no-repeat;
  6. size: 14px 14px;
  7. }
  8. }

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

  1. .add-icon {
  2. background-image: url("./assets/arrow-right-solid.svg");
  3. background-position: center center;
  4. background-repeat: no-repeat;
  5. background-size: 14px 14px;
  6. }

3. 变量

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

  1. $red: #ee4444;
  2. $black: #222;
  3. $bg-color: #3e5e9e;
  4. $link-color: red;
  5. $p-color: #282A36;
  6. $font-p: 13px;
  7. $font-h1: 28px;
  8. $base-font: 'Noto Sans KR', sans-serif;

变量的使用:

  1. body {
  2. background-color : $bg-color;
  3. font-size : $font-p;
  4. font-family : $base-font;
  5. }
  6. h1 {
  7. font-size: $font-h1;
  8. color: $black;
  9. }
  10. p {
  11. font-size: $font-p;
  12. color: $black;
  13. }
  14. a {
  15. color: $link-color;
  16. }

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

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

  1. $my-global-variable: "global";
  2. div {
  3. $my-local-variables: "local";
  4. }

变量值是可以覆盖的:

  1. $color: #fefefe;
  2. .content {
  3. background-color: $color;
  4. }
  5. $color: #939393;
  6. .footer {
  7. background-color: $color;
  8. }

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

  1. $color: #111;
  2. .content {
  3. $color: #222;
  4. background-color: $color;
  5. }
  6. .footer {
  7. $color: #333 !global;
  8. }

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

  1. $message-color: blue !default;
  2. .message {
  3. color: $message-color;
  4. }

编译成的CSS代码如下:

  1. p.message {
  2. color: blue;
  3. }

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

  1. $message-color: black;
  2. @import 'my-module';
  3. .message {
  4. color: $message-color;
  5. }

编译成的CSS代码如下:

  1. p.message {
  2. color: black;
  3. }

也就是说,带有 !default 的变量只有在没有值的情况下才会生效。

4. Mixins 和 Include

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

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

  1. @mixin absolute-center() {
  2. position:absolute;
  3. left:50%;
  4. top:50%;
  5. transform:translate(-50%,-50%);
  6. }
  7. .element {
  8. @include absolute-center();
  9. }

当然,mixin也是支持传递参数的:

  1. @mixin square($size) {
  2. width:$size;
  3. height:$size;
  4. }
  5. div {
  6. @include square(60px);
  7. background-color:#000;
  8. }

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

  1. @mixin square($width: 50px) {
  2. width:$size;
  3. height:$size;
  4. }

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

  1. @mixin hover-not-disabled {
  2. &:not([disabled]):hover {
  3. @content;
  4. }
  5. }
  6. .button {
  7. border: 1px solid black;
  8. @include hover-not-disabled {
  9. border-color: blue;
  10. }
  11. }

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

5. @import 和 @use

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

  1. <link rel="stylesheet" href="/path/to/css/1"></link>
  2. <link rel="stylesheet" href="/path/to/css/2"></link>
  3. <link rel="stylesheet" href="/path/to/css/3"></link>

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

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

  1. body {
  2. padding:0;
  3. margin:0;
  4. }
  5. body, html {
  6. width:100%;
  7. min-height:100%;
  8. }
  1. @import 'normalize';
  2. content {
  3. max-width:660px;
  4. }

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

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

  1. @use 'normalize';
  2. content {
  3. max-width:660px;
  4. }

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

  1. $accent-color: #535353;
  2. @mixin dark-background {
  3. background-color:#000;
  4. color:#fff;
  5. }
  1. @use 'src/colors';
  2. body {
  3. color: colors.$accent-color;
  4. }
  5. .dark-region {
  6. @include colors.dark-background;
  7. }

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

  1. @use 'src/colors' as c;
  2. body {
  3. color: c.$accent-color;
  4. }

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

6. 算术运算符

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

  1. $content-width: 600px;
  2. content {
  3. width:$content-width;
  4. }
  5. .inner-content {
  6. width: $content-width - 60px;
  7. }
  8. .outer-content {
  9. width: $content-width + 60px;
  10. }

7. 流程控制

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

  1. @mixin theme($is-dark: false) {
  2. @if $is-dark {
  3. }
  4. @else {
  5. }
  6. }

@each 类似于 JavaScript 中的 for of

  1. $sizes: 40px, 50px, 80px;
  2. @each $size in $sizes {
  3. .icon-#{$size} {
  4. font-size: $size;
  5. height: $size;
  6. width: $size;
  7. }
  8. }

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

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

  1. @for $i from 1 through 4 {
  2. .bubble-#{$i} {
  3. transition-delay: .3 * $i;
  4. }
  5. }

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

8. 扩展/继承

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

  1. %flex {
  2. display: flex;
  3. }
  4. .some-class {
  5. height: 50%;
  6. background-color: black;
  7. }
  8. %flex_with_color {
  9. @extend %flex;
  10. @extend .some-class;
  11. }
  12. %button_styles {
  13. height: 50px;
  14. width: 200px;
  15. }
  16. div {
  17. @extend %flex_with_color;
  18. button {
  19. @extend %button_styles;
  20. color: #424242;
  21. background-color: #d966fb;
  22. }
  23. }

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

  1. div {
  2. display: flex;
  3. }
  4. .some-class, div {
  5. height: 50%;
  6. background-color: black;
  7. }
  8. div button {
  9. height: 50px;
  10. width: 200px;
  11. }
  12. div button {
  13. color: #424242;
  14. background-color: #d966fb;
  15. }

9. 媒体查询

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

  1. body {
  2. article {
  3. p {
  4. font-size: 100%;
  5. color: black;
  6. padding: 10px;
  7. @media (max-width: 768px) {
  8. font-size: 150%;
  9. }
  10. }
  11. }
  12. }

编译成的CSS代码如下:

  1. body article p {
  2. font-size: 100%;
  3. color: black;
  4. padding: 10px;
  5. }
  6. @media (max-width: 768px) {
  7. body article p {
  8. font-size: 150%;
  9. }
  10. }

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

  1. p {
  2. @media (max-width: 768px) {
  3. font-size: 150%;
  4. @media (orientation: landscape) {
  5. line-height: 75%;
  6. }
  7. }
  8. }

编译成的CSS代码如下:

  1. @media (max-width: 768px) {
  2. p {
  3. font-size: 150%;
  4. }
  5. }
  6. @media (max-width: 768px) and (orientation: landscape) {
  7. p {
  8. line-height: 75%;
  9. }
  10. }