sass深入浅出

发表于 | 分类于

logo.png

辅助工具

注释

1
2
// 这种注释内容不会出现在生成的css文件中
/* 这种注释内容会出现在生成的css文件中 */

导入@import

scss模块需要以_开头
新建_base.scss文件

1
2
3
4
body{
	margin:0;
	padding:0;
}

然后在其他scss文件中引入

1
@import 'base';  //不需要下划线和文件名

变量 Variables

1
2
3
4
5
6
$bg-color: red;
$bd: 1px solid $bg-color
.box{
	border: $bd;
}

嵌套 Nesting

1
2
3
4
5
6
7
8
9
nav {
	height: 100px;
	ul {
		margin: 0;
		li {
			padding: 5px;
		}
	}
}
1
2
3
4
5
.father {
	> .son{    // `>`选择器
	}
}
1
2
3
4
5
6
7
8
9
10
11
.father {
	.son{    // .father .son
	}
}
.father {
	&.son{    // .father.son
	}
}

& 调用父选择器

1
2
3
4
5
6
7
8
9
10
11
12
.box {
	&:hover{    // 伪类 .box:hover
	}
}
.box {
	& &-info{    // 调用父选择器 .box .box-info
	}
}

群组选择器的嵌套

1
2
3
4
5
6
7
8
.box {
  h1, h2, h3 {color:red;}
}
// 编译结果：
.box h1, .box h2, .box h3 {
  color: red;
}
1
2
3
4
5
6
7
8
.a, .b {
  div {color: blue}
}
// 编译结果：
.a div, .b div {
  color: blue;
}

mixin 混合(一般用于有参数的情况)

语法

1
2
3
4
5
6
7
@mixin 名字(参数1,参数2...){
	...
}
.box{
	@include 名字;
}

  • 优点 : 可以传参
  • 缺点 : 调用时,会把@mixin中的所有代码 copy 到下面的选择器中,产生大量重复代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
@mixin danger {
	color: red;
	div {
	  color: blue;
	}
}
.danger-box {
	@include danger;
}
.danger-item {
  @include danger;
}
//编译结果：
.danger-box {
  color: red;
}
.danger-box div {
  color: blue;
}
.danger-item {
  color: red;
}
.danger-item div {
  color: blue;
}

相当于把@mixin danger里的所有属性复制到下面@include的选择器中

mixin传参

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
@mixin danger($color,$div-color) {
	color: $color;
	div {
	  color: darken($div-color,10%);  //加深10%
	}
}
.danger-box {
	@include danger(red,blue);
}
.danger-item {
  @include danger(red,blue);
}
//编译结果：
.danger-box {
  color: red;
}
.danger-box div {
  color: #0000cc;
}
.danger-item {
  color: red;
}
.danger-item div {
  color: #0000cc;
}

上面的方法，必须按照顺序传入参数；如果你记不住参数顺序，你们可以使用下面的格式$name:value：　　　　　　　　

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@mixin danger($color,$div-color,$fz) {
	color: $color;
	font-size: $fz;
	div {
	  color: $div-color;
	}
}
.danger-box {
	@include danger($fz:12px,$color:blue,$div-color:orange); //$name:value格式
}
//编译结果：
.danger-box {
  color: blue;
  font-size: 12px;
}
.danger-box div {
  color: orange;
}

mixin默认值

1
2
3
4
5
6
7
@mixin danger($color:red, $div-color:$color, $fz:16px) {
	color: $color;
	font-size: $fz;
	div {
	  color: $div-color;
	}
}

继承 extend(一般用于无参数的情况)

优点 : 将相同代码,提取到群组选择器,减少冗余代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.a{
  color: red;
}
.a>p{
  font-size:20px;
}
.a-x{
  @extend .a;
}
//编译结果：
.a, .a-x {
  color: red;
}
.a>p, .a-x>p {
  font-size: 20px;
}

相当于把下面用到@extend的选择器挪到上面的.a形成群组选择器
！！使用占位符(placeholder)%可以不编译该选择器：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
%a{
  color: red;
}
.b{
  @extend %a;
}
.c{
  @extend %a;
}
//编译结果：
.c, .b {
  color: red;
}

数字

1
2
3
.box{
	width:5px + 1px;
}

字符串

1
2
3
4
5
6
7
$content: 'hello';
div:after{
	content: to-upper-case($content); //变成大写
}
//此外
to-lower-case(字符串) //变成小写

颜色

adjust-hue

该函数改变hsl中的h

1
2
3
4
$text-color: red;  //即hsl(0,100%,50%)
div{
	color: adjust-hue($text-color,250) //变成hsl(250,100%,50%)
}

lighten和darken

  • lighten加深hsl中的l(明度)
  • darken减弱hsl中的l(明度)
1
2
3
$base-color: red; //即hsl(0,100%,50%)
$light-color: lighten($base-color,30%); //即hsl(0,100%,80%)
$light-color: darken($base-color,30%); //hsl(0,100%,20%)

saturate和desaturate

  • saturate:饱和度s加深
  • desaturate：饱和度s减弱
1
2
3
$base-color: hsl(0,50%,50%)
$saturate-color: saturate($base-color,30%); //即hsl(0,80%,50%)
$desaturate-color: desaturate($base-color,30%); //hsl(0,20%,20%)

opacify/fade-in 和 transparentize/fade-out

  • opacify:增加透明度 【或者fade-in($color,增加透明度)】
  • transparentize:减弱透明度 【或者fade-out($color,减弱透明度)】
1
2
3
4
5
6
7
$base-color: rgba(0,77,255,0.5); 
$deep-color: opacify($base-color,0.3); //rgba(0,77,255,0.8);
等同于： $deep-color: fade-in($base-color,0.3);
$light-color: transparentize($base-color,0.3); //rgba(0,77,255,0.2);
等同于： $light-color: fade-out($base-color,0.3);

complement($color) 返回一个补充色

1
2
3
4
$color: rgb(100,150,200);
div{
  color: complement($color);  //rgb(200,150,100);
}

invert($color) 返回反相色

1
2
3
div{
  color: invert(rgb(3,6,9)); //rgb(252,249,246)
}

maps

语法：$名字:(key1: value1, key2: value2, key3: value3);

1
2
3
4
5
6
7
8
9
10
$alert-colors:(primary:blue,danger:red,warning:yellow);
.alert-primary{
	color: map-get($alert-colors,primary)
}
//编译结果：
.alert-primary {
  color: blue;
}

插值#{}

选择器名字、属性名等，需要用插值引入变量

1
2
3
4
5
6
7
8
9
10
11
$text: 'primary';
$l: 'left';
.alert-#{$text}{
  padding-#{$l}: 2px;
}
//编译结果：
.alert-primary {
  padding-left: 2px;
}

控制指令

@if

语法：@if 条件{ ... }

1
2
3
4
5
6
7
8
9
10
11
$theme:'light';
div{
	@if $theme == dark{
		background-color: black;
	} @else if $theme == light{
		background-color: white;
	} @else {
		background-color: red;
	}
}

@for

语法：@for $i from 第几项 through 第几项{ ... }

  • through 4：会输出到4为止
  • to 4：输出到3结束
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$columns:4;
@for $i from 1 through $columns {
	col-#{$i} {
		width: 100% / $columns*$i;
	}
}
//编译结果：
col-1 {
  width: 25%;
}
col-2 {
  width: 50%;
}
col-3 {
  width: 75%;
}
col-4 {
  width: 100%;
}

@each

语法：@each $list in $lists { ... }
该方法用于列表lists

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$types: success danger warning;
@each $type in $types {
	.alert-#{$type} {
		background-image: url(../imgs/#{$type}.png);
	}
}
//编译结果：
.alert-success {
  background-image: url(../imgs/success.png);
}
.alert-danger {
  background-image: url(../imgs/danger.png);
}
.alert-warning {
  background-image: url(../imgs/warning.png);
}

如果列表是个map：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@each $h, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$h} {
        font-size: $size;
  }
}
//编译结果：
h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.5em;
}
h3 {
  font-size: 1.2em;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$types-colors: (primary:blue, danger:red, warning:yellow);
@each $type,$color in $types-colors {
  .alert-#{$type} {
    color: $color;
  }
}
//编译结果：
.alert-primary {
  color: blue;
}
.alert-danger {
  color: red;
}
.alert-warning {
  color: yellow;
}

二维map：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$theme-color: (
  primary: (background-color:blue, width:10px),
  danger: (background-color:blue, width:20px),
  success: (background-color:green, width:30px)
);
@each $keys,$values in $theme-color {
  .alert-#{$keys} {
    @each $key,$value in $values {
      #{$key}: $value;
    }
  }
}
//编译结果：
.alert-primary {
  background-color: blue;
  width: 10px;
}
.alert-danger {
  background-color: blue;
  width: 20px;
}
.alert-success {
  background-color: green;
  width: 30px;
}

@while

语法：@while 条件 { ... }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$i:1;
@while $i < 6 {
  .item-#{$i} {
    width: 10px * $i;
  }
  $i: $i+2;
}
//编译结果：
.item-1 {
  width: 10px;
}
.item-3 {
  width: 30px;
}
.item-5 {
  width: 50px;
}

自定义函数

语法：@function 函数名(参数1,参数2...){ @return ... }

1
2
3
4
5
6
7
8
$colors: (light:white, dark:black);
@function getColor($key){
	@return map-get($colors, $key)
}
div{
	color: getColor(light); //得到white
}
-------------本文结束感谢您的阅读-------------