scss 使用

SCSS 常用功能 https://www.cnblogs.com/guangzan/p/10547335.html

定义变量
$my-color: #666; //定义变量
$my-heihgt: 100%;
body {
color: $my-color;
height: $my-height;
}
sass嵌套

混合宏（mixin）
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}

.gallery{ width:600px; @include center-block; }
继承
.outer {
width: 100px;
height: 50px;
border: 1px solid #000;
}

.wrap-first {
background-color: #f36;
@extend .outer;
}
占位符 placeholder
%outer { //如果不被@extend继承 不会在编译后产生任意的代码。
margin: 0 auto;
}
插值
$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
运算
.outer {
width: 20px + 8in;
}
/*
in是英寸。8in即8英寸。
1英寸约=2.54厘米,1英寸大约是96像素
width:20px+8in;
8in=8*96px = 768px
即width=20px + 768px = 788px;
*/