Sass中函数、@mixin,@use模块等一些常用功能的使用

大家可能都知道sass是一个css的预编译语言,支持变量和函数等等功能的书写,正是因为这些强大的功能所以是前端人员必须掌握一门的技能。
1.首先先说一下 @mixin的用法

// 一个平常的 div布局
<div class="main">
  	<header>Header</header>
   <section>Section</section>
   <footer>Footer</footer>
 </div>

要实现上面的效果我们如果用css书写的话

.main>header,.main>section,.main>footer{
	height: 200px;
    line-height: 200px;
    font-size: 30px;
    font-weight: bold;
    margin-top: 30px;
    color: white;
    text-align: center;
}
header{
	background-color:red;
}
section{
	background-color:green;
}
footer{
	background-color:yellow;
}

下面换成我们sass的写法
把公共的样式 放到一个public 为名字的代码块中

@mixin public{
    height: 200px;
    line-height: 200px;
    font-size: 30px;
    font-weight: bold;
    margin-top: 30px;
    color: white;
    text-align: center;
  }
header{
  	@include public;
	background-color:red;
}
section{
	@include public;
	background-color:green;
}
footer{
	@include public;
	background-color:yellow;
}

通过以上一些 我们好像看得出来俩者差距并不是太大是把,但这个仅仅是小demo,当我们的项目大的时候之前的css写法明显维护起来可能比较麻烦，这个是还是用sass比较好
2.sass函数的用法

//函数的定义
@function show(){
	@return yellow   // 返回一个黄色的颜色
}
// 函数的使用 和普通中的语言函数使用一样
header{
	background-color:show();
}

3.use的使用
在当前文件夹下建立一个 _demo.scss文件 注意前面的下划线

// _demo.scss
$color:green;
// index.scss 中使用
@use "./demo";
section{
	background-color:demo.$color;
}

4.sass中for in 遍历语句和数组的定义

$users:"list1" ,'list2', 'list3' ;
@each $user in $users {   
	body-#{$user}{   //  #{$user} 类似 es6的模板字符串的写法  `${name}`
		background: red;
	}
}

5.if语句的使用

$score:70;
@if $score >60{
	body{
		background-color:green;
	}
}

6.& 关键字的使用

css中有这样的写法
a:hover,btn-info,btn-success 他们前面都有一个共同的父元素
a{
	&:hover{
		
	}
}
btn{
	&-info{};
	&-success{};
}
和上面的本质一样转换之后

7.sass中extend的用法 继承的用法；
这里有必要说一下 bootstrap中的按钮样式
为什么 按钮都必须有一个 btn 的前提 其他的
btn-primary，btn-warning 都是在前面的基础上添加背景颜色而已

btn{
	width:200px;
	height:100px;
	border:1px solid #f00;
}
btn-primary{
	@extend btn;// 和public区别对待 这里是继承了父类,并不是把父类中代码拿过来
	background-color:blue;
}