sass是css的扩展
可申明变量
$main-fonts: Arial, sans-serif;
$headings-color: green;
h1 {
font-family: $main-fonts;
color: $headings-color;
}
Sass 嵌套 CSS
nav {
background-color: red;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
}
可以化为以下代码:
nav {
background-color: red;
ul {
list-style: none;
li {
display: inline-block;
}
}
}
用 Mixins 创建可重用 CSS
在 Sass 中,mixin 是一组 CSS 声明,可以在整个样式表中重复使用。
随着浏览器的不断升级,使用这些 CSS 规则时可能需要添加浏览器前缀。如:
div {
-webkit-box-shadow: 0px 0px 4px #fff;
-moz-box-shadow: 0px 0px 4px #fff;
-ms-box-shadow: 0px 0px 4px #fff;
box-shadow: 0px 0px 4px #fff;
}
可用以下代码代替:
@mixin box-shadow($x, $y, $blur, $c){
-webkit-box-shadow: $x $y $blur $c;
-moz-box-shadow: $x $y $blur $c;
-ms-box-shadow: $x $y $blur $c;
box-shadow: $x $y $blur $c;
}
定义以 @mixin 开头,后跟自定义名称。 参数( $ x,$ y,$ blur,以及上例中的 $ c )是可选的。 现在在需要 box-shadow 规则的地方,只需一行 mixin 调用而无需添加所有的浏览器前缀。 mixin 可以通过 @include 指令调用
div {
@include box-shadow(0px, 0px, 4px, #fff);
}
使用 @if 和 @else 为样式添加逻辑
Sass 中的 @if 指令对于测试特定情况非常有用——它的工作方式与 JavaScript 中的 if 语句类似,如:
@mixin make-bold($bool) {
@if $bool == true {
font-weight: bold;
}
}
可以在 Sass 中使用 @else if 和 @else 测试更多条件:
@mixin text-effect($val) {
@if $val == danger {
color: red;
}
@else if $val == alert {
color: yellow;
}
@else {
color: black;
}
}
于if-else语句相似。
使用 @for 创建一个 Sass 循环
@for 以两种方式使用:“开始 through 结束” 或 “开始 to 结束”。 主要区别在于“开始 to 结束”不包括结束数字,而“开始 through 结束”包括 结束号码。
@for $i from 1 through/to 12 {
.col-#{$i} { width: 100%/12 * $i; }
}
当 Sass 文件转换为 CSS 时,效果如下:
.col-1 {
width: 8.33333%;
}
.col-2 {
width: 16.66667%;
}
...
.col-12 {
width: 100%;
}
使用 @each 遍历列表中的项目
Sass 还提供 @each 指令,该指令循环遍历列表或映射中的每个项目。 在每次迭代时,变量将从列表或映射分配给当前值。
@each $color in blue, red, green {
.#{$color}-text {color: $color;}
}
map 的语法略有不同,需要用 $ key 变量来引用 map 中的键:
$colors: (color1: blue, color2: red, color3: green);
@each $key, $color in $colors {
.#{$color}-text {color: $color;}
}
以上两个代码都可转为以下css:
.blue-text {
color: blue;
}
.red-text {
color: red;
}
.green-text {
color: green;
}
使用 @while 循环创建样式
$x: 1;
@while $x < 13 {
.col-#{$x} { width: 100%/12 * $x;}
$x: $x + 1;
}
效果与上述@for循环相同。
Partials 将样式分成小块
Sass 中的 Partials 是包含 CSS 代码段的单独的文件。 这些片段可以导入其它 Sass 文件使用。 可以把类似代码放到模块中,以保持代码结构规整且易于管理。
partials 的名称以下划线(_)字符开头,这样 Sass 就知道它是 CSS 的一小部分,而不会将其转换为 CSS 文件。 此外,Sass 文件以 .scss 文件扩展名结尾。 要将 partial 中的代码放入另一个 Sass 文件中,使用 @import 指令。
将一组 CSS 样式扩展到另一个元素
Sass 有一个名为 extend 的功能,可以很容易地从一个元素中借用 CSS 规则并在另一个元素上重用它们。
如存在以下代码:
.panel{
background-color: red;
height: 70px;
border: 2px solid green;
}
现在需要一个差不多的功能的代码,但复制过来需要空间,所以:
.big-panel{
@extend .panel;
width: 150px;
font-size: 2em;
}
比.panel相比多了width和font-size的属性。