如何编译Sass
全局安装
npm install sass -g
编译
watch 单一文件
sass watch scss/app.scss css/app.css
watch 整个文件夹
sass watch scss:css
注意中间有个冒号！！！
Partials
你可以创建一些只包含很少的代码片段的partial Sass files，然后可以把它们 import 到其他 Sass文件中。这种方式可以很好地模块化你的 CSS, 便于以后维护。一个 partial Sass 文件命名通常以下划线开头，比如 _partial.scss.
这样命名的好处是：Sass 会知道这是一个 partial 文件，它需要被import到其他文件中，在编译时，不会单独编译它。
例如：定义了以下 partial 文件，并在 app.scss 中引入。
// app.scss
// IMPORT ALL SASS DIRECTORY FILES
@import '0-plugins/_plugins-dir';
@import '1-base/_base-dir';
@import '2-layouts/_layouts-dir';
@import '3-modules/_modules-dir'
在 import 文件时，并不需要包含文件的扩展名.scss不需要写。
当watch整个文件夹，在terminal敲入
sass --watch scss:css
会发现，Sass只编译了 app.scss
这是我们想要的结果，不会编译其他多余的partial 文件。如果命名不是以下划线开始，所有文件都会编译了。就会变成这样：
另外，在 app.scss 中 import partial 文件时，可以不加下划线。
// IMPORT ALL SASS DIRECTORY FILES
@import '0-plugins/plugins-dir';
@import '1-base/base-dir';
@import '2-layouts/layouts-dir';
@import '3-modules/modules-dir'
编译是没有问题的。
关于如何组织Sass文件的结构
推荐的 是SMACSS，一本书《Scalabel and Modular Architectrue for CSS》，介绍了模块化CSS的一些规则和建议。
可以在线阅读和下载。
Variables
变量可以帮助我们保存一些想要重复使用的信息，比如 colors, font stacks, padding的值等等。 Sass 使用 $ 来识别一个变量名.
colors
// _box.scss
// VARIABLES
$base-color: yellow;
.box {
height: 100px;
100px;
background-color: $base-color;
}
font stacks
//_base.scss
// VARIABLES
$font-stack-serif: Georgia, Times, serif;
$font-stack-sans-serif: Helvetica, Arial, sans-serif;
body {
background: orangered;
color: white;
}
h1 {
font-family: $font-stack-serif;
}
h2, h3 {
font-family: $font-stack-sans-serif;
}
全局变量
如果我们在不同的 scss 文件中都定义了自己的变量，会显得很乱，也不便于以后维护。
推荐的做法是，定义一个全局的_variables.scss文件，将所有的变量放在这里。
// GLOBAL VARIABLES
$brand-color:pink;
$base-color: yellow;
$base-font-color: white;
$font-stack-serif: Georgia, Times, serif;
$font-stack-sans-serif: Helvetica, Arial, sans-serif;
$font-size-base: 18px;
然后在 app.scss 的第一行引入它。
// app.scss
// IMPORT ALL SASS DIRECTORY FILES
@import 'variables';
@import '0-plugins/plugins-dir';
@import '1-base/base-dir';
@import '2-layouts/layouts-dir';
@import '3-modules/modules-dir'
在其他文件中使用变量。
// _base.scss
body {
background: $brand-color;
color: $base-font-color;
font-size: $font-size-base;
}
h1 {
font-family: $font-stack-serif;
}
h2, h3 {
font-family: $font-stack-sans-serif;
}
Mixins
mixin 是用来解决重复代码的，比较像没有返回值的函数，可以传入参数。
官网示范的一个用法是，解决CSS3属性的不同vender prefies的问题。其实，任何你需要reuse的代码，都可以使用mixin。
在CSS3的一些属性中，有些属性由于不同 vender prefixes的存在，变得非常冗长，例如 transform box-shadow border-radius 等等。
.box {
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
rotate(30deg) 写了3遍。
使用 mixin 可以解决这个问题，因为 mixin 可以像函数一样传入参数。
@mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
.box { @include transform(rotate(30deg)); }
在Angular中，编译器会自动加上vender prefixes，所以在写scss时，可以不加这些prefixes。
全局mixin
再复杂一点：
// _box.scss
.box {
height: 100px;
100px;
display: inline-block;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
-webkit-box-shadow: 0 5px 10px #555;
-moz-box-shadow: 0 5px 10px #555;
box-shadow: 0 5px 10px #555;
background: orangered;
background: -webkit-linear-gradient(orangered, yellow);
background: -o-linear-gradient(orangered, yellow);
background: -moz-linear-gradient(orangered, yellow);
background: linear-gradient(orangered, yellow);
}
为了保持各个module的清爽，新建一个文件_mixins.scss来设置全局的mixins。在 app.scss 中导入它。
// app.scss
@import 'variables';
@import 'mixins';
@import '0-plugins/plugins-dir';
@import '1-base/base-dir';
@import '2-layouts/layouts-dir';
@import '3-modules/modules-dir'
定义mixin
// _mixins.scss
// GLOBAL MIXINS
@mixin box($radius, $shadowColor, $gradientColor1, $gradientColor2) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
-webkit-box-shadow: 0 5px 10px $shadowColor;
-moz-box-shadow: 0 5px 10px $shadowColor;
box-shadow: 0 5px 10px $shadowColor;
background: $gradientColor1;
background: -webkit-linear-gradient($gradientColor1, $gradientColor2);
background: -o-linear-gradient($gradientColor1, $gradientColor2);
background: -moz-linear-gradient($gradientColor1, $gradientColor2);
background: linear-gradient($gradientColor1, $gradientColor2);
}
在 _box.scss 中使用
// BOX
.box {
height: 100px;
100px;
display: inline-block;
@include box(100%, #555, orangered, yellow);
}
这样可以传入不同的参数来实现不同的box啦。
#box2 {
@include box(20px, #000, #639, #fc3);
}
#box3 {
@include box(5px, #ddd, black, teal);
}
消除了很多重复性代码。
推荐的mixin插件
Bourbon
Bourbon is a lightweight Sass tool set
如果不知道怎么组织自己的mixin，可以参考它的写法。
例如 clearfix
@mixin clearfix {
&::after {
clear: both;
content: "";
display: block;
}
}
使用：
.element {
@include clearfix;
}
Extend/Inheritance
Sass的这一特性依然是为了遵循Dry principle，减少重复代码。你可以使用 @extend 来共享属性。
比如，我们要创建一个message module，它有3个状态，success、warning和error。
// index.html
<body>
<div class="message success"></div>
<div class="message warning"></div>
<div class="message error"></div>
</body>
我们可以使用嵌套，将样式定义成这样：
// _message.scss
.message {
100%;
height: 50px;
background: #000;
margin: 10px auto;
&.success {
background: green;
}
&.warning {
background: orange;
}
&.error {
background: red;
}
}
还可以使用extend来共享属性。
%message {
100%;
height: 50px;
background: #000;
margin: 10px auto;
}
.success {
@extend %message;
background: green;
}
.warning {
@extend %message;
background: orange;
}
.error {
@extend %message;
background: red;
}
html中不需要再加message class，更加简洁。
<body>
<div class="success"></div>
<div class="warning"></div>
<div class="error"></div>
</body>
Maps
Sass提供了可以保存键值对的Maps结构。
$map: (key1: value1, key2: value2, key3: value3);
例如，我们在scss中会定义很多颜色值，一般使用变量就可以了。
$primary-color: #005DFF;
$accent-color: #FFF6BB;
$border-color: #ddd;
// other variables
body {
background-color: $primary-color;
color: $accenet-color;
}
当还定义了其他很多变量后，就显得十分杂乱。可以单独将所有颜色值封装成一个Maps结构，再使用map-get($map,$key)来获取值。
$colors: (
primary: #005DFF,
accent: #FFF6BB,
border: #ddd
);
body {
background-color: map-get($colors, primary);
color: map-get($colors, accent);
}
Function
function是有返回值的，最后要加 @return
比如在上例中，为了获取颜色值，我们会多次使用map-get($map,$key) ，看起来代码很长，可以自定义一个获取颜色的function来reuse这段代码。
$colors: (
primary: #005DFF,
accent: #FFF6BB,
border: #ddd
);
@function color($color-name) {
@return map-get($colors, $color-name);
}
body {
background-color: color(primary);
color: color(accent);
}