Sass
Sass与Scss的异同
sass与scss基本是相同的,唯一的不同是,需要使用分号和花括号而不是换行和缩进。
// sass 写法
#header{
width: 30%;
background-color: red;
}
// scss写法
#header
width: 30%
background-color: red
变量
$red: red;
div{
color: $red
}
$side: top;
div{
padding-#{$side}: 10px;
}
计算功能
div{
margin: (20px/2);
padding: 5px + 2px;
width: 10 * 10%
}
嵌套
div{
p{
color: red;
}
}
编译为
div p{
color: red;
}
div{
border:{
width: 1px;
color: #ccc;
style: solid;
}
}
注意border后面的冒号!!!
编译为
div{
border-width: 1px;
border-color: #cccccc;
border-style: solid;
}
// 在嵌套的代码块内,可以使用&引用父元素
div{
&:hover{
background: red
}
}
注释
- 标准的CSS注释 /* comment */ ,会保留到编译后的文件。
- 单行注释 // comment,只保留在SASS源文件中,编译后被省略。
- 在/*后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。
/*!
重要注释!
*/
继承
.box1{
border: 1px solid #ddd;
}
box2要继承box1,就要使用@extend命令
.box2 {
@extend .box1;
font-size: 12px;
}
Mixin
重用的代码块
@mixin left {
float: left;
margin-left: 10px;
}
使用@include命令,调用这个mixin
div{
@include left;
}
强大之处
@mixin left($value: 10px) {
float: left;
margin-right: $value;
}
div{
@include left(20px);
}
颜色函数
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
条件语句
// @if可以用来判断
p{
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
}
// 配套的还有@else命令
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
循环语句
// sass支持for循环
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
// 当然也支持while循环
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
// each命令,作用与for类似
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
自定义函数
// SASS允许用户编写自己的函数
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}