聊聊SCSS的语法(一)

后缀名

SCSS是SASS3的语法分支，其中以\*.scss结尾的是scss文件，以\*.sass结尾的是sass文件。scss文件和我们平时使用的css格式相同，表达式部分使用{}括起来。

/* .sass文件的语法形式 - 缩进式 不带{}和分号*/
$baseFont: 14px
.main
  width: 100%
  height: 100vh
  p
    font-size: $baseFont

/* .scss文件的语法形式 */
$baseFont: 14px;
.main {
  width: 100%;
  height: 100vh;

  p {
    font-size: $baseFont;
  }
}


/* .css文件的语法形式 */
.main {
  width: 100%;
  height: 100vh;
}
.main p {
   font-size: 14px;
}

注释

SCSS文件支持两种注释方式：/* */ 和 //，其中 /**/是标注注释，在编译的时候会被保留下来。而//单行注释不会被转译出来。

/*我是标准注释 */
body {
  width: 100%;
  background: #fff;    // 设置背景颜色
}

编译后的结果：

/*我是标准注释 */
body {
  width: 100%;
  background: #fff;
}

单个文件引入 @import

/*! a.css*/
.f-s--lg {
  font-size: 22px;
}

/*! b.scss */
.m-t--lg {
  margin-top: 50px;
}

/*! c.scss */
@import './a.scss';
@import './b.scss';

.app-text--success {
  color: blue;
}

转译后：(c.css)

.m-t--lg {
  margin-top: 50px;
}

.app-text--success {
  color: blue;
}
.app-text--success {
  color: blue;
}

变量

Sass对于变量类型不是非常严格，和JS一样是弱类型语言。

scss的变量以$开头，后面紧跟变量名，变量名与变量之间用:隔开。scss变量名大小写敏感。如果在变量后加上 !default则表示默认值。如果需要覆盖默认值，只需要在默认变量之前定义一遍即可。

$font-size: 14px;

$color-success: green;
$color-success: blue !default;  // 默认值

p {
  font-size: $font-size;
  color: $color-success;
}

/*! 解析后的css */
p {
  font-size: 14px;
  color: green;
}

Scss 变量可以使用 type-of()函数来检测这些变量的类型

/*! 字符串类型*/
// 分为：带引号的和不带引号的两种字符串
$prefix: 'ui-';
$blod: blod;

/*! 数字类型*/
$a: 10;  $b: 1.5; $c: 15px;

/*! 颜色类型*/
$color1: #fff;
$color2: blue;
$color3: rgba(0,0,0,.5);

/*! 布尔类型*/
$is-top: true / false;

/*! 空值类型*/
$d: null;

/*! 值列表*/
$list: 10px 15px 10px;
$list2: Helvetica, Arial, sans-serif;

变量的特殊调用 `#{$prefix}`

在项目中为了防止样式的覆盖，会给css的类名加上前缀。在一般的css文件中会一个一个的类加上前缀，在scss中则可以使用#{$prefix}的形式统一加上前缀。

$prefix: 'ui-'!default;
.#{$prefix}alert {
  // code ...
}

/*! 解析后的css */
.ui-alert{
  // code ...
}

多值变量之List

List相当于JavaScript中的数组，使用空格或者 ,或者()分割多个值，可使用nth($val, $index)来取值。还有length($list),join($list1,$list2,[$separator])等方法。具体参考SASS FUNCTION。
定义List

/*! 类似JS中的一维数组*/
$list: 10px 15px 10px 5px;

/*! 类似JS中的二维数组*/
$list2: (10px 15px) (20px 25px);
$list3: 10px 15px, 20px 30px;

使用

$font: 12px  14px;
$margin: (5px 10px) (15px 20px);
.main {
  margin: nth($margin, 2);
  font-size: nth($list, 1);
  
  p {
    margin: nth($margin, 1);
    font-size: nth($list, 2);
  }
}

/*! 转译后的css */
.main {
  margin: 15px 20px;
  font-size: 12px;
 }
.main p {
  margin: 5px 10px;
  font-size: 14px;
}

多值变量之Map

Map类型以键值对形式出现: $map: (key1: val1, key2: val2, ...),可以通过map-get($map, $key)取值。还有 map-keys($map) map-values($map)等。具体参考SASS FUNCTION。
定义Map

$map: (h1: 2em, h2: 1.5em);

使用

$prefix: 'app-';
$color-list: (
  success: green,
  danger: red,
  wraning: orange
) !default;

@each $key, $val in $color-list {
  .#{$prefix}text--#{$key} {
    color: $val;
  }
}

/*! 转译后的css */
.app-text--success {color: green;}
.app-text--danger {color: red;}
.app-text--warning {color: orange;}

下期预告

嵌套（Nesting）
条件语句（if/else）
循环（for）
遍历（each）
运算（operation）