webpack编译Less和Sass

一、less

1、变量 @key: value;

编译之后，是不会将变量保留的。

	@width: 300px;  // 定义变量
	// 使用变量
	#box {
		width: @width;
		height: @width;
	}

2、混合

在一个选择器A的内部 书写另外一个选择器B的名称。表示，在A中复用B的所有样式

	.box {
		width: 200px;
		height: 200px;
		margin: 0 auto;
		background-color: red;
	}
	
	.box1 {
		.box; 
		background-color: blue;
	}

3、方法

其实就是定义了一个函数

	// 定义方法
	.drawBox(@width, @height, @bg) {
		width: @width;
		height: @height;
		background-color: @bg;
	}
	
	// 使用变量
	.box {
		.drawBox(100px, 100px, red)
		// width: 100px;
		// height: 100px;
		// background-color: red;
	}

方法的默认参数：当用户没有传递实参时，会使用的值
定义方式：在定义方法的时候，定义形参的时候在形参的后面加:value
当定义方法，没有定义默认参数时，调用时，如果不传递，会编译失败

	// 定义方法 方法可以有默认参数 定义方式：在形参变量之后加:value 
	.drawBox(@width:200px, @height:200px, @bg:orange) {
		width: @width;
		height: @height;
		background-color: @bg;
	}
	
	// 使用变量
	.box {
		.drawBox(200px, 100px, red);
	}
	.box1 {
		.drawBox(); 
	}

4、方法的条件语句

在方法形参列表之后， 方法体之前 使用 when ()、 and ()、 not() 书写条件语句

	// 定义方法 
	.drawBox(@width, @height) when (@width > 100px) and (@height >= 200px){
		width: @width;
		height: @height;
		background-color: red;
	}
	.drawBox(@width, @height) when(@width <= 100px) {
		width: @width;
		height: @height;
		background-color: blue;
	}
	.drawBox(@width, @height) when not(@height = 100px) {
		width: @width;
		height: @height;
		background-color: black;
	}
	
	// 使用变量
	.box {
		.drawBox(200px, 100px);
	}
	.box1 {
		.drawBox(100px, 100px); 
	}
	.box2 {
		.drawBox(100px, 200px)
	}

5、插值语法

模板插值语法: <%%>
ES6的插值语法: ${}
Less的插值语法 @{}

@str: "今天天气不错";
@left: "left";

.box:before {
	content: "@{str}";
}
.box {
	padding-@{left}: 200px;
}

6、内置

①内置数学函数

	.box {
	 	width: ceil(1.1px); // 向上取整 2px
	 	width: floor(1.1px); // 向下取整 1px
	 	width: round(4.4px); // 四舍五入 4
	 	width: round(4.6px); // 四舍五入 5
	 	width: percentage(0.01); // 将1 换算成百分比
		height: 100px;
		background-color: red;
	}

②内置字符串函数
e: 将字符串原样输出
escape: 将字符串中的内容转义
replace: 替换

	.box {
		font: e("50px/2 微软雅黑");
	}
	.box:before {
		content: escape("a=1");
	}
	.box:after {
		content: replace("今天天气很冷", "冷", "热")
	}

③内置色彩
定义色彩的方式: 英文单词、rgb()、rgba()、十六进制、hsl、hsla

.box {
	width: 100px;
	height: 100px;
	// 定义色彩 1 颜色单词  2 rgb(红, 绿, 蓝) 3 rgba(红, 绿, 蓝, 透明度) 4 十六进制 5 hsl(色相, 饱和度, 明度)
	background-color: red;
	background-color: rgb(255, 255, 0);
	background-color: rgba(255, 255, 125, .5);
	background-color: #abc;
	background-color: hsl(110, 50, .7);
	background-color: hsla(110, 50, .7, 1);
}

④内置色彩函数
red函数 用于获取一个颜色的红色通道
green函数 用于获取一个颜色的绿色通道
blue函数 用于获取一个颜色的蓝色通道
hue函数 用于获取一个颜色的色相
saturation函数 用于获取一个颜色的饱和度
lightness函数 用于获取一个颜色的明度
alpha函数 用于获取一个颜色的透明度

⑤色彩操作函数
saturate 提升饱和度 参数分别为： 颜色 百分比
desaturate 降低饱和度 参数分别为： 颜色 百分比
lighten 提升明度 参数分别为：颜色 百分比
darken 降低明度 参数分别为：颜色 百分比

	// 定义色彩
	@red: #abc;
	@green: #cba;
	@blue: #bac;
	
	// 获取第一个颜色的红色通道
	@redChannel: red(@red); // 获取了红色通道了
	@greenChannel: green(@green);// 获取了绿色通道
	@blueChannel: blue(@blue); // 获取蓝色通道
	@newColor: rgb(@redChannel, @greenChannel, @blueChannel);
	
	// 获取第一个颜色的色相
	@hueChannel: hue(@red);
	@saturateChannel: saturation(@green);
	@lightChannel: lightness(@blue);
	@newHSLColor: hsl(@hueChannel, @saturateChannel, @lightChannel);
	#box {
		width: 200px;
		height: 200px;
		// background-color: @newColor; 使用获取到的红绿蓝拼凑成新的颜色
		// background-color: @newHSLColor; 使用获取到的色相、明度、饱和度生成新的颜色
		// 将生成的颜色的饱和度 提升 降低
		background-color: @newHSLColor;
		border-top: 10px solid saturate(@newHSLColor, 50%); // 提升
		border-bottom: 10px solid desaturate(@newHSLColor, 50%); // 降低
		// 将生成的颜色的明度提升 降低
		border-left: 10px solid lighten(@newHSLColor, 50%); // 提升明度
		border-right: 10px solid darken(@newHSLColor, 50%); // 降低明度
	}

引入外部less文件：@import url("./common.less");

二、Sass

webpack编译需模块：node-sass、style-loader、css-loader、sass-loader

1、变量 $key:value;

less中的变量 @key: value;
sass中的变量 $key:value;

2、混合

混合要定义 要调用
@mixin name {
style code……
}
调用: @include name;

	@mixin drawBox{
		float: left;
		width: 2.5 * $a;
		height: 5 * $a;
	}
	@include drawBox;

3、方法

@mixin methodName ($a, $b) {}

	// 定义方法 方法就是混合 
	@mixin method($a, $b) {
		width: $a;
		height: $b;
	}
	.box1 {
		@include method(100px, 200px);  	// 使用方法
		background-color: purple;
	}

4、继承 @extend xxx;

有两个选择器 其中一个已经有样式了 另外一个想要复用样式`

	.box2 {
			// 让box2 继承box1的内容
			@extend .box1;
			background-color: pink;
		}

5、if语句

在scss中，真的实现了if语句 @if statement {}

	@mixin fangfa1($a, $b) {
		width: $a;
		height: $b;
		// 开始判断
		@if $a > 100 {
			background-color: red;
		} @else if $a < 100  {
			background-color: green;
		} @else {
			background-color: blue;
		}
	}
	
	.box {
		@include fangfa1(101px, 100px);
	}
	.box1 {
		@include  fangfa1(100px, 100px);
	}
	.box2 {
		@include fangfa1(99px, 100px);
	}

6、for语句

第一种：@for $i from 0 to 100 {}
第二种：@for $i from 0 through 100 {}

	@for $i from 0 to 100 {
		.box-#{$i} {
			width: percentage($i / 100);
		}
	}
	@for $i from 0 through 100 {
		.box-#{$i} {
			width: percentage($i / 100);
		}
	}
	
	//from 0 to 100  是不包含100 
	//from 0 through 100 是包含100

7、while语句

语法： @while 表达式 { }

	$i: 0;
	@while $i < 10 {
		.box-#{$i} {
			background-color: rgba(255 * $i / 100 , 255, 255, 1);
		}
		$i: $i + 2;
	}

生成内容：

	.box-0 { background-color: cyan; }	
	.box-2 {  background-color: #05ffff; }
	.box-4 {  background-color: #0affff; }
	.box-6 {  background-color: #0fffff; }
	.box-8 {  background-color: #14ffff; }

8、each语句

语法： @each $i in 枚举 { }

	$meiju: "a", "b", "c"; // 定义枚举结构
	@each $i in $meiju {
		.box-#{$i} {
			background-color: red;
		}
	}

生成内容：

	.box-a { background-color: red; }
	.box-b { background-color: red; }
	.box-c { background-color: red; }

9、三元运算符

语法： if(boolean, true, false);

	$boolean: true;
	
	.box {
		width: if($boolean, 100px, 200px)
	}

10、插值 #{ }