Sass的语法介绍

Posted 2021-10-09 知否

本节我们来学习 Sass 的语法，Sass 支持两种语法，分别为 SCSS （Sassy CSS）和缩进语法（Indented Sass）。

缩进语法

缩进语法是 Sass 的原始语法，文件的扩展名为 .sass，所以有时候简称为 ”Sass“。缩进语法支持与 SCSS 相同的所有特性，但是它使用缩进而不是花括号 {} 来表示选择器的嵌套，使用换行而不是分号来分隔属性。

下面我们来看一下缩进的语法格式。

示例：

创建一个 style.sass 文件，内容如下所示

.xkd
    font-size: 14px
    color: #ccc
    .box
        width: 100px
        height: 100px
        border: 1px solid #000
        border-radius: 5px

可以看到，在这段代码中，使用缩进来代替了花括号，每行样式属性之间不需要使用分号分隔。因为没有花括号可能有些人觉得这样的语法更加简洁和易读，但是我个人还是比较喜欢使用花括号和分号。

SCSS

SCSS （Sassy CSS）格式是在 CSS3 语法的基础上进行扩展，每个 CSS 样式表是一个同等的 SCSS 文件。SCSS 文件的扩展名为 .scss 。

下面我们来看一下 SCSS 的代码格式。

示例：

创建一个 style.scss 文件，文件内容如下所示：

.xkd {
  font-size: 12px;
  color: #ccc;

  .box {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    border-radius: 5px;
  }
}

缩进语法和SCSS的转换

上面讲到的两种语法格式，互相之间可以直接通过 @import 指令导入到另外一种格式中使用。并且通过 sass-convert 命令行工具转换成另一种格式。

将缩进语法转为 SCSS：

sass-convert style.sass style.scss

将 SCSS 转为 缩进语法：

sass-convert style.scss style.sass

示例：

例如现在有一个 test.scss 文件，文件中的内容如下所示：

.div{
    h3{
        color: #fefefe;
    }
    a{
        color: #000;
        text-decoration: none;
        &:hover{
            color: #fefefe;
        }
    }
}

如果我们需要将这个文件中的内容转换为缩进语法，可以执行下面这个命令：

sass-convert test.scss test.sass

转换后的缩进语法：

.div
  h3
    color: #fefefe

  a
    color: #000
    text-decoration: none

    &:hover
      color: #fefefe