SASS – 语法

2种语法

Sass有两种不同的语法,一种是旧版,另一种是升级版,这两种语法都会编译出相同的CSS。

  • sass 旧版,源文件扩展名:.sass
  • scss 升级版,源文件扩展名:.scss

SCSS 是 Sass 3 引入的新语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能。Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点:

  • 文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名
  • 语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 SCSS 的语法和CSS 语法非常类似。

Sass 语法:

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 5px 10px
    text-decoration: none
    color: orange

SCSS 语法:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { 
    display: inline-block; 
    }

  a {
    display: block;
    padding: 5px 10px;
    text-decoration: none;
    color: orange;
  }
}

现在通常都使用scss格式。

代码注释

与CSS一样,Sass支持单行注释和多行注释。

在Sass中,单行注释以双斜杠//开头,不会出现在编译出的CSS文件中;多行注释格式与css相同:/* 注释内容 */,多行注释会出现在编译出的CSS文件中。

CSS中,单行注释和多行注释都是 /* 注释内容 */的格式。

单行注释

示例:

// 定义颜色
$primary-color: orange;
$secondary-color: gold;

body {
    color: $primary-color;
    background: $secondary-color;
}

// 定义颜色不会出现在编译出的CSS文件中。

多行注释

示例:

/* 
定义颜色
$primary-color: 主色调
$secondary-color: 次色调
*/
$primary-color: orange;
$secondary-color: gold;

body {
    color: $primary-color;
    background: $secondary-color;
}

在本例中,注释内容将出现在已编译的CSS文件中。



浙ICP备17015664号 浙公网安备 33011002012336号 联系我们 网站地图  
@2019 qikegu.com 版权所有,禁止转载