bootstrap：Sass与Less知识点梳理

Sass,Less ==> css预处理器
Sass官网:添加链接描述
vscode插件：easy sass
新写法：.scss
旧写法：.sass
Less官网：添加链接描述
vscode插件：easy less

定义变量

1. scss中
   $变量名：变量值
   作用域有顺序，不会覆盖
2. less中
   @变量名：变量值
   注意：
   .less文件中

@key:margin
.box{
@{key}: auto;
}

.css文件中

.box{
margin: auto;
}

区别

同：&:hover 都要用&占空位，否则在css中是他的后代选择器的设置：url_:hover{}
不同：
①：在less中 无属性嵌套。
scss中有：如

&:hover{
color: red;
	font:{
size: 160px;
weight: 230px;
}
}

②：sass中如果单位不同，是不能运算的
如 $num: 100px
height: $num + 20em;
③：Sass中默认“/”不是除，是分割的操作

函数

同：
①sass,less中有：
round(3.4px)------四舍五入函数
percentage(0.2)--------百分数函数
不同：
①sass中才有random()------取随机数函数
less中没有
②less中才有sqrt(25%)------开方函数
sass中没有
③sass中可以自定义函数：

@function sum ($n, $m){
@return $n + $m;
}
.box{
font-size: sum(4px,5px)
}

.css显示

.box{
font-size: 9px;
}

less不可以自定义函数

sass与less混入

1. less中
   ①.less

.hide{
	display: none;
}
.box{
	.hide;
}

.css中显示

.hide{
display: none;
}
.box{
display: none;
}

②.less

.hide(){
	display: none;
}
.box{
	.hide();
}

.css中显示

.box{
display: none;
}

③小括号可以传参数
less中

.hide(@color){
display: none;
color: @color;
}
.box{
	.hide(blue);
}

.css中显示

.box{
display: none;
color: blue;
}

2. sass中
   ①

@mixin show{
display:none;
}
.box{
@include show;
}

css中显示

.box{
display: none;
}

不会被渲染
②
也可以传参数

@mixin hide($color){display:none; color: $color;}
.box{@include hide(red);}

css中显示

.box{display: none; color: red;}

命名空间

1. Less下

.show{----}
#nm(){.show{display: inline-block;}}
.box{#nm.show;}

css中显示

.box{display: inline-block;}

继承

1. Less中

.line{display: inline;}
.box7{&:extend(.inline);}
.box8{&:extend(.inline);}

css中显示

.inline,
.box7, .box8 {display: inline;}

2. Sass中

.line{display: inline;}
.box7{@extend.inline;}
.box8{@extend.inline;}

css中显示成分组式

.inline, .box7, .box8 {display: inline;}

注意

%line{---}
.box7{@extend %line}
.box8{----}

css中不会渲染line

.box7, .box8 {---}

合并

1. sass中的合并
   ①

$background: (a:url(a.png),
b:url(b.png)
);
.box9{background:map-values($background)}

css中显示

.box9{background: url(a.png), url(b.png);}

②

$transform:(
a:scale(2),
b:rotate(30deg)
);
.box9{transform:zip(map-values($tansform)...);};	    

css中显示

transform: scale(2) retate(30deg);

2. Less中的合并

.box9{background+: url(a.png);
      background+: url(b.png);
      transform+_: scale(2);
      transform+_: retate(30deg);}

css中显示

.box9{background: url(a.png), url(b.png);
transform: scale(2) rotate(30deg);}

媒体查询

Less与Sass中一样

.box10{width: 100px;
	 @media all and(min-width: 768px){
	 		 width:600px; }
	 @media all and(max-width: 14440px){
	 		 width:600px;}
}

css中显示

.box10{
	width: 100px;
}
@media all and(min-width){
	.box10{
	width:600px}
		}

条件

1.scss

$count: 3;
.box11{
	@if($count > 4){
		width: 100px + $count;
	}
	@else($count < 4){
		width: 100px - $count;
	}			
}

2.Less

@count: 5;
.get(@cn) when (@cn > 4){---}
.box11{.get(@count);}

循环

1.sass

@for $i from 0 throungh 2{
	.box-#{i}{
	width: 100px + $i;}
}

css中显示

.box-2{width: 102px;}
.box-1{width:101px;}
.box-0{width: 100px;}

2.less

@count2:0;
.get(@cn) when (@cn<3){
	.get2(@cn + 1);
	.box-@{cn}{width:100px+@cn};
}

Css中显示

.box-2{width:102px;}
.box-1{width:101px;}
.box-0{width:100px;}

引入

1.sass

@import'./reset.scss';

css中

@import'./reset.scss';

2.less

@import'./reset.scss';

css中显示

@import'./reset.scss';