后缀名
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）
