关于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

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