【CSS】SASS用法

sass依赖于缩进;scss是sass3引入的新语法
下面将介绍scss基本用法

参数

$prop: xxx

嵌套

ul {
    ...
	li {
        ...
		&:hover
	}
}

@mixin

//定义
@mixin xxx($xxx){
    
}
//使用
@include xxx()

@extend

//使用
@extend .xxx;
//会继承子属性

@import

// _base.scss
body {
  ...  
}
// style.scss 引入
@import "base";

lighten&darken

//颜色加深、变淡
$light-color:lighten($base-color,50%);
$dark-color:darken($base-color,50%);

saturate&desaturate

/*改变纯度
  同上*/

transparentize&opacify

//改变不透明度
$fade-in-color:opacify($base-color,0.3)
$fade-out-color:transparentize($base-color,0.3)

list

//5px 10px
length(5px 10px)
nth(5px 10px,1)
index(5px 10px,5px)
append(5px 10px,100px)
join(5px 10px,5px 0,comma) //用逗号分隔

$map

$colors:(light:#fff,dark:#000)
length($colors)
map-get($colors,dark)
map-keys($colors)	//("light","dark")
map-values($colors)
map-has-key($colors,gray)
map-merge($colors,$colorss)
map-remove($colors,grey)

interpolation

//任意地方插入（包括注释）
#{$name}

@if

@if $istrue == xxx {
	...
} @else if $istrue == xx {
    ...
} @else {
    ...
}

@for

$columns: 4;
@for $var from 1 through $columns {
    //包含最后一个值
    .col-#{$i} {
        width: 100% / $columns * $i;
    }
}
@for $var from 1 to 10 {
    //不包含最后一个值
}

@each

@each $var in $list {
    
}

@while

@while $i > 0 {
    $i: $i - 2;
}

function

$colors:(light:#fff,dark:#000)
@function color($key) {
    @if not ...
    	@warn "...";
	@return map-get($colors,$key);
}

【CSS】SASS用法

原文：https://www.cnblogs.com/Zeiion/p/14682994.html