关于html5:Sass的语法介绍

本节咱们来学习 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（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;
  }
}

下面讲到的两种语法格局，相互之间能够间接通过 @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

缩进语法

示例：

SCSS

示例：

缩进语法和 SCSS 的转换

示例：