Sass的用法整理

Sass是css预处理器，使我们编写的样式代码更具有逻辑性。

1 sass 数据类型

• 数值

• 颜色值

• 字符串

• 数组

• map

• 基本用法如下

• 定义变量名称时注意 要以 $打头

$width:200px;
$color:#ffeeee;

.container{
width:$width;
}

.child{
color:$color;
}

字符串在定义背景图片时经常用到
① 插值变量的方式

$bgName:'banner.png';

.container{
background-image:url('./img/#{$bgName}');
}

② 字符串拼接的方式

$bgName:'banner.png';

.container{
background-image:url('./img/'+$bgName);

}

数组类型的定义方式和js 中的定义方式不同
用小括号而不是中括号

$arr:(1,22,3,'str');

获取数组的长度的内置函数是
length($arr);
数组的内置函数
遍历
获取已知的下标对应的元素

$arr:(200px,2,3,'str');

.container{
	width:nth($arr,1);// 下标从1开始
	//同
	//width:200px;
}

定义map类型

$map:(top:1px,left:2px);
// 获取key 为 top 的值
.container{
  top:map-get(top);
}
//遍历赋值
.child{
 @each $key,$value in $map{
 	#{$key}:$value
 }
}

Sass加减乘除基本运算

mix($ color1,$color2)方法 获取两个颜色的混合色

red（）
blue()
green()
光的三原色 获取红色值 绿色值 还有蓝色值的内置函数

$num1:200px;
$num2:300px;

.div{
width:$num1+$num2;
height:$num2-$num1
}

乘除保留一个单位就可以

$num1:200px;
$num2:100x;

.div{
	width:$num1/2;
	//或者是
	width:(200px)/2 不是变量要加括号（）包裹
}

mixin混合宏用法

就是定义一堆样式
再通过@include 引入

@mixin  myMixin{
display:block;
	font:{
		size:20px;
	}

}

.container{
@include myMixin;
}

//还可以嵌套使用
@minxin MyMixin2{
	border:{
		color:red;
	}
	@include Mymixin;//导入

}

！default 关键字优先级最低和位置无关。

简单的样式继承

.div{
	display:flex;
   
}

.child{
	@extend .div 
}

条件控制语句

@if @else if @else

@for

@while

@each

$type = 'flat';
p{
	@if $type == 'boom'{
	color:red;
	
	}
	@else if $type == 'bob'{
	color:blue;
	}@else 
	{
	color:green;
	}
}

@for 语句

@for $i from 1 through 3{   //将through  改为to  则只有 12 
      .item#{$i}:{
      width:1px * $i;
      }
}

@while 语句

$i:9;

@while $i > 0{
	.item#{$i}:{
	}
	$i:$i -2 ;//自减

	}

number类型自定义函数

round（） 四舍五入
percentage() 百分之多少
ceil() 向上取整
floor() 向下取整
random() 0 -1 小数
random(10) 0 -10 取的是整数 在0-1 范围内是小数 js 中都是小数
abs() 取绝对值
min($ numbers,…)最大值
max($numbers,…)最小值

nth( $arr,1);
set-nth( $arr,1,2); //下标是 1 的元素修改为 2

@debug 用法

相当于控制台 console

@arr:(1,2,3);

p{
	@debug set-nth($arr,1,'x');  //  'x',2,3
	
}

**

string 类型的内置函数如下图所示

**