sass
安装
- install ruby
- sudo gem install sass
申明变量
1
2
| $value = 100px;
$color = #fafafa;
|
编译
sass style.scss style.css
编译风格
1
2
3
4
5
| * nested：嵌套缩进的css代码，它是默认值。
* expanded：没有缩进的、扩展的css代码。
* compact：简洁格式的css代码。
* compressed：压缩后的css代码。
sass --style compressed style.scss build.css
|
监听文件
1
2
3
4
| // watch a file
sass --watch input.scss:output.css
// watch a directory
sass --watch app/sass:public/stylesheets
|
基本用法
直接使用变量
1
2
3
4
| $color:#fafafa;
.div{
background:$color;
}
|
变量嵌套在字符串中，需要写在#{}中
1
2
3
4
| $side:left,
.border{
border-#{$side}-color:$color;
}
|
计算功能
1
2
3
4
| //除法需要加括号
margin:(14px/2); //7px
left:15px + 14; //29px
width:$var * (1/3) * 1%; //33.3%
|
嵌套
- 选择器嵌套
1
2
3
4
5
6
7
8
| .container{
header{
height:30px;
}
footer{
display:block;
}
}
|
- 属性嵌套
1
2
3
4
5
6
7
| p{
border:{//border后需加冒号
width:2px;
style:solid;
color:$var;
}
}
|
代码复用
- 继承
1
2
3
4
5
6
7
8
| .div1{
width:20px;
height:30px;
}
.div2{
@extend .div1;
background:#fafafa;
}
|
- Mixin
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| @mixin border{
border-left:1px solid #233;
}
#box{
@include border;
}
传递参数
@mixin size($height:30px){
display:inline-block;
height:$height;
width:100px;
}
#box{
@include size(50px);
}
|
导入外部文件
1
2
| @import "path/style.scss"
@import "path/main.css"
|
条件语句
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| div{
@if 1<2 {
width:100%;
}
@if 1>5 {
width:50%;
}
}
main{
@if $width>100{
height:50px;
}@else{
height:20px;
}
}
|
循环语句
- for
1
2
3
4
5
| @for $i from 1 to 10{
.box-#{ $i }{
border:#{$i}px solid blue;
}
}
|
- while
1
2
3
4
5
| $i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 1;
}
|
- each
1
2
3
4
5
| @each $item in left,right,top,bottom{
.box{
border-#{$item}:1px solid #333;
}
}
|
自定义函数
1
2
3
4
5
6
| @function setWidth($width:100px){
@return $width*2
}
.box{
width:setWidth(20px);
}
|
