SCSS快速入门

1. 变量

1.1 命名规则

变量以$开头声明

$nav-color: #F90;
nav {
  color: $nav-color;
}
//编译后
nav {
  color: #F90;
}

1.2 变量名分割

变量名可以用下划线（_）或中划线（-）分割，且-和_可以互换。

// 变量名中含有下划线或中划线
$margin-left : 20px;
div {
    margin-left : $margin_left;
}
// 编译后
div {
    margin-left : 20px;
}

1.3 #{}

#{}用于字符串中引用变量

// 字符串中引用变量
$right : 20;
.mr-#{$right} {
    margin-right : #{$right}px;
}
// 编译后
.mr-20 {
    margin-right : 20px;
}

2. 注释

1. 静默注释：//，不会出现在生成的css文件中；
2. 普通注释：/* … */，同css中注释

body {
  color: #333; // 这种注释内容不会出现在生成的css文件中
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}