首页 > Web开发 > 详细

【CSS】SASS用法

时间:2021-04-20 23:23:56      阅读:29      评论:0      收藏:0      [点我收藏+]

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!