css预编译

css 预编译常用模块 less 、 sass

​ css 预编译解决的问题：

​ css 预编译： 属于css 预处理语言中的一种，为css 赋予了动态语言的特性，

​ 例如： 可以使用 变量 、 表达式 、 循环 、 判断等

less 编译的方式： 前端编译、 node编译 、 webpack编译

sass 编译方法： ruby 编译、 webpack编译

预编译常用方法：

​ 嵌套式语法：

​ less、 sass 都是一样的。

less的文件后缀是 .less 。 sass的文件后缀 是 .scss

.a {
	width: 100px;
	.b {
		width: 200px;
	}
}

编译之后的 css：

.a {
	width: 100px;
}
// .a 下的 .b
.a .b {
	width: 200px;
}

定义变量

​ less : @key: value;

​ sass: $key: value;

混合

​		在less中定义混合就是一组特定的选择器

​			定义： 

​					.aaaaaa {

​						样式

​						}

​		使用： .b{

​						.aaaaaa ;

  				}

​		在sass中分为两个步骤：

​				第一步定义：

​					@mixin hunhe {

​							样式列表

​								……

​					}

​					第二步使用：

​						@include hunhe

迷信定义，包含使用

方法

​ less :

//  : 后面可以添加默认参数 
.method( @a: 20px, @b: 20px ) {

						样式名：   @a；

						样式名：   @b;

	}
// 使用
.a {
    .method(100px , 100px);
}

​ sass: 迷信定义，包含使用

//  : 后面可以添加默认参数
@minxin method($a: 20px,  $b ) {
		
}
// 使用
.a {
	@include: method(100px , 100px);
}

插值语法：

在less中的插值语法：@{key}
在sass中插值语法： #{变量}

判断

less

//使用  when    when not

sass 是因为 sass 比 less晚出来。 会有一些优化。

// 使用   @if   @else if

引入文件

less

/* 第一种方式  引入文件 */
@import './common.less'; 

/* 第二种方式 引入文件 */
@import url('common.less');

.box {
	color: @color;
}

sass

@import './common.scss';

.box {
	color: $color;
}

less内置方法

	//数字的方法 （没有Math对象，但是提供了一些方法）
	ceil(): 向上取整
	floor(): 向下取整
	round(): 四舍五入
	percentage(): 以百分数的形式展示
    
    //字符串的方法
    e(): 将原内容展示
	escape(): 将内容编码
	replace(): 替换内容
    
    //色彩函数
    单词法
    rgb
    rgba
    hsl   色阶  饱和度  亮度   (100, 20%, 20%)
    hsla
    16进制法
    
    //色彩通道函数
    @color: rgba(100, 120, 130, .5);
	.a {
    	color: red(@color);   // 100
    	width: green(@color);  // 120
	}
    
	// 操作色彩函数
	saturate(color, precentage): //该方法用于将某个颜色的	饱和度	在原来的基础之上       调高
		color:  		//调整的颜色
		precentage： //百分比
	desaturate(color, precentage): //该方法用于将某个颜色的	饱和度	在原来的基础之上       调低
		color:  		//调整的颜色
		precentage： //百分比
	lighen(color, precentage): //该方法用于将某个颜色的	亮度	在原来的基础之上            调高
		color:  		//调整的颜色
		precentage： //百分比
	darken(color, precentage): //该方法用于将某个颜色的	亮度	在原来的基础之上			调低
		color:  		//调整的颜色
		precentage： //百分比

	fadein(color, precentage): //该方法用于将某个颜色的	不透明度	在原来的基础之上，变得	更加不透明
		color:  		//调整的颜色
		precentage： //百分比
	fadeout(color, precentage): //该方法用于将某个颜色的	不透明度	在原来的基础之上，变得	更加透明
		color:  		//调整的颜色
		precentage： //百分比
	fade (color, precentage): //该方法用于指定某个颜色的	透明度						指定值
		color:  		//调整的颜色
		precentage： //百分比

sass 的继承

// sass中定义继承的方式与    less中定义混合的方法类似（都是一组特定的选择器）
语法：
	.name {
		样式列表
		……
}
	使用： @extend
	.b {
        @extend .name
    }

sass 循环系列

// for循环  第一种
 @for $i from 1 to 13 {
 	 // 实现栅格系统
 	.col-lg-#{$i} {
 		width: percentage($i / 12);
 	}
 }
// for循环  第二种
@for $i from 1 through 12 {
	// 实现栅格系统
	.col-lg-#{$i} {
		width: percentage($i / 12);
	}
}

// while 循环
$i: 1;
@while $i < 13 {
	// 实现栅格系统
	.col-lg-#{$i} {
		width: percentage($i / 12);
	}
	// 手动改变变量
	$i: $i + 1
}

// each 循环
$list: a b c d e f;
@each $i in $list {
	// 实现栅格系统
	.#{$i}-icon {
		background-image: url('../../imgs/#{$i}.png');
	}
}

sass 三元运算符

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

.box1 {
	width: if(false, 100px, 200px);
}