sass

一，简介

sass文件的后缀名 ?

xxx.sass
xxx.scss

把这种浏览器不认识的文件 ， 转成浏览器认识的文件

.sass | .scss -> .css

怎么转换？

1.用工具 gulp工具 webpack工具
2.sass官网自带的工具
3.网上有很多第三方的工具 koala(考拉)
4.vsCode有插件 （方便学习） Easy Sass

官网

https://sass-lang.com
https://www.sass.hk

.sass -> 语法类似于python

body
 font-size:16px
ul
 list-style:none

.scss -> 语法类似于css (推荐)

body{font-size:16px}
ul{list-style:none}

二，Sass语法

1.注释

// 不会被编译
/* */ 会被编译

2.变量

$num : 100px;
.box1{ width:$num;}
.box2{ width:$num;}
.box3{ width:$num;}

$num: 150;
$cent: %;
.box1{ width:$num + $cent;}

插值，可以让属性做成变量的形式

$foo : width;
.box1{ #{foo}:100px;}

$foo : width;
$num : 3;
.box#{$num}{ #{$foo}:100px;}

作用域 ：就近原则，要注意查找的顺序

$num : 100px;
.box{
	 height: $num;
	 $num :200px;
	 width: $num;
}

嵌套

div{}
div ul{}
div ul li{}
div ul li p{}

div{
	ul{
		li{
			p{

			}
		}
	}
}

div{
	background: red;
	ul{
		list-style:none;
		li{
			float:left;
			p{
				font-size:16px;
			}
			span{
				color: blue;
			}
		}
	}
}

//在嵌套的时候， 添加一个&符号， 可以忽略空格
div{
	&:hover{
		background: red;
	}
	&.box{
		width : 100px;
	}
}

div{
	font-size: 10px;
	font-weight: bold;
	font-family : '宋体';
}

div{
	font:{
		size: 20px;
		weight: bold;
		family: '宋体'
	}
}

三，运算

如果计算的值都有单位是不能计算的
/: 比较特殊， css本身可能会用到这个斜线， 所以要做除法的时候，可以用（）括起来来表示除法计算

$num : 100px;
div{
	width: $num +20px;
	height: $num *2px;
	margin : ($num / 2)px;
	font: 30px /2
	border-radius : 20px / 30px;
	background-clip : border-box;
	background-origin : border-box;
}

计算颜色

$num : #100100;
div{
	color : $num * 3;
}

函数
round() percentage() random()

div{

	width: round(3.22px);
	height: percentage(0.2);
	margin: random();
	color: rgb( random()*255,random()*255,random()*255 )
}

内置函数

自定义函数

@function sum( $a , $b){
	@returm $a + $b ;
}

div{
	width : sum(4,5) + px;
}

混入

@mixin hide{
	display : none;
	color : red;
}

.box1{
	width : 100px;
	@include hide;
}
.box2{
	@include hide;
}

@mixin hide($color){
	display : none;
	color : $color;
}

.box1{
	@include hide(red)
}

.box2{
	@include hide(yellow)
}

混入不会做群组 ， 继承会编译成群组

继承

%叫做占位符， 不会渲染
继承不能传参

 %hide{
	display : none;
}
 .box1{
	@extend %hide;
}
.box2{
	@extend %hide;
}

合并

div{
	background : url('a.jpg'), url('b.jpg');
	transform : scale(1.5) rotate(360deg);
}

$background: (
	a: url(1.png),
	b: url(2.png)
);

div {
	background : map-values($background);
}

$a : url(1.png);
$b : url(2.png);

div{
 background : $a $b;
}

四，逻辑语句

$num :10;
.box{

	@if( $num > 20){
		width : 100px;
	}
	@else{
		width: 50px;
	}
}

循环

@for $i from 0 through 4{
 .box{ width : $i +px; }
}

五，CSS模块化

@import ‘./xxx.scss’;