Sass的语法介绍

Posted 知否

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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

以上是关于Sass的语法介绍的主要内容,如果未能解决你的问题,请参考以下文章

关于sass的基础语法介绍

Sass 基础教程——预处理器

Sass 基础教程——预处理器

Sass 基础教程——预处理器

sass语法

Sass 基础教程——语法