共计 3229 个字符，预计需要花费 9 分钟才能阅读完成。
安装 Sass
sass有两种后缀名文件
- 一种后缀名为
sass，不使用大括号和分号 - 另一种后缀名为
scss，这种和我们平时写的css文件格式差不多，使用大括号和分号。
编译 Sass
命令行编译
#sass 要编译的sass文件路径:编译完成后放到那里叫什么
sass sass/style.sass:css/style.css自动编译
#sass --watch 要监听的文件:放到那个文件
sass --watch sass:css编译格式
nested嵌套compact紧凑expanded扩展compressed压缩
更改编译格式
sass --watch sass:css --style compressed变量
sass 使用 $ 符号来标识变量
$red-color: #f00;
$red-border: 1px solid $red-color;
// 变量引用
div {
border: $red-border;
}嵌套 CSS 规则
nav {
height: 100px;
ul {
margin: 0;
li {
padding: 5px;
list-style: none;
}
}
}父选择器的标识符 &
a {
color: blue;
&:hover {
color: red
}
}嵌套属性
在 sass 中，除了CSS选择器，属性也可以进行嵌套。尽管编写属性涉及的重复不像编写选择器那么糟糕，但是要反复写border-styleborder-widthborder-color以及border-等也是非常烦人的。在sass中，你只需敲写一遍border：
nav {
border: {
style: solid;
width: 1px;
color: #ccc;
}
}Mixins
定义 mixin
通过 @mixin 加名称的方式就可以定义一个Mixins模块，在模块内你可以添加任何你想重复使用的样式。
@mixin 名字 (参数1, 参数2...) {
...
}
@mixin button {
font-size: 1em;
padding: 0.5em 1.0em;
text-decoration: none;
color: #fff;
}
@mixin link {
a {
color: blue;
&:visited {
color: purple;
}
&:hover {
color: white;
}
&:active {
color: red;
}
}
}使用 @mixin 指令
你可以通过 @include 来调用具有相同名称的mixin模块。
.button-green {
@include button;
background-color: green;
}在mixin模块的定义中还可以包含其他的mixin。比如：
@mixin button-blue {
@include button;
@include link;
}参数的使用
Mixins可以接收和使用参数，这使得它比@extend更加强大和灵活。我更新了之前的button模块，增加了名为background的参数并将其传递给模块。
@mixin button($background) {
font-size: 1em;
padding: 0.5em 1.0em;
text-decoration: none;
color: #fff;
background: $background;
}注意到参数被设置为一个变量并成为backround属性的值。如果我们想创建一个绿色的按钮，那么就可以使用以下代码：
.button-green {
@include button(green);
}给参数设置默认值
你可能会好奇如果在定义mixin时定义了参数，但是在@include调用时没有传递参数会发生什么。这种情况下你会收到一个编译错误的提示。同时我相信这种情况一定不是你想看到的。你可以通过在mixin中定义参数的时候给它设置一个默认值，从而来避免这种错误。
@mixin button($background: green) {
font-size: 1em;
padding: 0.5em 1.0em;
text-decoration: none;
color: #fff;
background: $background;
}@extend 同步样式
.box {
background-color: red;
}
div {
@extend .box;
color: #fff;
}@import 引入其他 sass 文件
@import "base";颜色
adjust-hue() 色相度数
adjust-hue(颜色，度数deg)
.box {
background-color: adjust-hue(#f00, 180deg)
}lighten 与 darken 颜色明度
lighten|darken(颜色，明度%)
.box {
background-color: lighten(#f00, 50%)
}
.box {
background-color: darken(#f00, 50%)
}saturate 增加颜色纯度（饱和度）darken 减少颜色纯度（饱和度）
saturate|darken(颜色，饱和度%)
.box {
background-color: lighten(#f00, 50%)
}
.box {
background-color: darken(#f00, 50%)
}transparentize 透明度 opacify 不透明度
transparentize|opacify(颜色, 0~1)
控制指令
@if
@if 条件 {
...
}
$use-prefixes: true;
.rounded {
@if $use-prefixes {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
border-radius: 5px;
}
$theme: "dark";
body {
@if $theme == dark {
background-color: black;
} @else @if $theme == light {
background-color: white;
} @else {
background-color: grey;
}
}@for
@for $var from <开始值> through <结束值> {
...
}
$columns: 4;
// 包含4
@for $i from 1 through $columns{
.col-#{$i} {
width: 100% / $columns * $i;
}
}
@for $var from <开始值> to <结束值> {
...
}
$columns: 4;
// 不包含4
@for $i from 1 to $columns{
.col-#{$i} {
width: 100% / $columns * $i;
}
}@each
@each $var in $list {
...
}
$icons: success error warning;
@each $icon in $icons {
.icon-#{$icon} {
background-image: url(./images/icons/#{$icon}.png)
}
}while
@while 条件 {
...
}
$i: 6;
@while $i > 0 {
.item-#{$i} {
width: 5px * $i;
}
$i: $i -2;
}自定义函数
@function 名称 (参数1, 参数2...) {
...
}
$colors: (light: #fff, dark: #000);
@function color($key) {
@return map-get($colors, $key);
}
body {
background-color: color(light);
}警告与错误
$colors: (light: #fff, dark: #000);
@function color($key) {
@if not map-has-key($colors, $key) {
@warn "在 $colors 里没有找到 #{$key} 这个 key";
}
@return map-get($colors, $key);
}
body {
background-color: color(light);
}