less 入门到精通

前言

什么是less css预编译器 可以扩展css语言 允许变量 混合 函数 使css 更具维护性主体性 拓展性

---

提示：以下是本篇文章正文内容，下面案例可供参考

1.初见 less

嵌套写法

.ul {
	list-style:none;
	.li{
		height:20px;
		a{
			color:#fff;	
		}
	}
}

2.正确使用less

编译工具

1. Koala
2. winLess
3. CodeKit
   客户端调试
4. 首先引用.less文件 link引入 stylesheet/less
5. script 引入 less.min.js 一定要放在less样式文件之后

3.变量

变量的定义方式 @

@blue:#122331;
.box{
	color:@blue;
}
//编译后
.box{
	color:#122331;
}

//作为选择器和属性名的变量
@kuandu:width;
.{@kuandu}{
	@{kuandu}:150px;
}
// 作为url的变量
@imgurl:"https://www.baidu.com/img/"
header{
	background:url("@{imgurl}bdlog.png");
	height:500px;
}
// 延迟加载 变量是延迟加载的 在使用的时候不一定药预先声明
.lazy-eval{
	width:@var;
}
@var:@a;
@a:9%;

4.混合

混合就是将一系列属性从一个规则集引入（‘混合’）到另一个规则集的方式

.font {
	color:red;
}
h1{
	font-size:20px;
	.font;
}
h2{
	font-size:12px;
	.font;
}
// 在不想输出的混合集合的名字后面加上一个括号 可以实现
.test(){
	color:#132456;
}
// 带选择器的混合
.myhover(){
 &:hover {
	border:1px solid #asdfgsd;
	}
}
button {
	.myhover();
}
// 带参数的混合
.borders(@border_color){
	border:1px solid @border-color;
}
h1{
	&:hover{
		.borders(green);
	}
}
// 带参数并且有默认值
.bordersx(@border_color:red){
	border:1px solid @border-color;
}
h2{
	&:hover{
		.bordersx(green);
	}
}
h3{
	&:hover{
		.bordersx();
	}
}
// 带多个参数的混合 逗号和分号要注意
// 定义多个具有相同名称的混合 会将所有属性都加入 有默认值 就会用有默认值的
.bordersxm(@border_color:red;@px:1;){
	border:@px solid @border-color;
}
.h4{
	.bordersxm(red,2)
}

// 命名参数 引用mixin时可以通过参数名而不是参数的位置来为mixin提供参数值
.mixin(@color:black;@margin:10px;@padding:20px){
	color:@color;
	margin:@margin;
	padding:@padding;
}
.class1{
	.mixin(@margin:20px;@color:#331221)
}
.class2{
	.mixin(#efcafd;@padding:40px)
}
// @arguments变量 代表所有的可变参数
.border(@x:solid,@c:red){
	border:2px @arguments;
}
.div1{
	.border();
}
// 匹配模式
.border(all,@w:5px){
	broder-radius:@w;
}
.border(t_l,@w:5px){
	broder-top-left-radius:@w;
}
.border(t_r,@w:5px){
	broder-top-right-radius:@w;
}
.border(b_l,@w:5px){
	broder-bottom-left-radius:@w;
}
.border(b_r,@w:5px){
	broder-bottom-right-radius:@w;
}
footer{
	.border(all);
}
header{
	.border(t_l);
}
// 得到混合中变量的返回值
.average(@x,@y){
	@average:((@x+@y)/2);
	@mag:(@x+@y);
}
div{
	.average(16px,50px);
	padding:@average;
	margin:@mag;
}

5.嵌套规则

.div{
	font-size:12px;
	h1{
		color:#asdfgd;
	}
}
// 父元素选择器 表示当前选择器的所有父选择器
.father{
	background:@451274;
	&.logo{
		font-szie:18px;	
	}
}
// 改变选择器的顺序
.a{
	.b{
		.c{
			color:red
		}
	}
}
.a{
	.b{
		.c &{
			color:red
		}
	}
}
.a{
	.b{
		 &.c{
			color:red
		}
	}
}
// 组合生成所有可能的选择器列表
p,a,ul,li{
	border-top:2px dotted #638;
	& &{
		border-top:0;
	}
}

6.运算

任何数值颜色和变量都可以进行运输
会自动推断数值的单位
运算符与值之间必须以空格隔开 设计优先级时以()优先

.wp{
	width:450px + 450;
}
// 颜色运算 先将颜色值转化为rgb模式 然后再转化为16进制的颜色值并返回
.content{
	background:#000000 + 21;
}
// 结果
.content{
	background:#212121;
}
// rgb模式取值范围0-255 超出时默认为255

7.函数

less 提供了许多用于转化颜色 处理字符串和进行算术运算的函数
rgb() 将值转化为16进制的值
blue() 16进制转化为数字 提取蓝色值

.bcolor{
	background:rgb(255,0,0);
}

8.命名空间

将一些需要的混合组合在一起 可以通过嵌套多层id或calss来实现

#bgcolor{
background:#fff;
	.a{
		color:#888888;
		&:hover{
			color:#ff6600;
		}
	}
	.b{
		background:#ff0000;
	}
}
.bgcolor{
	background:#fasdgs;
	#bgcolor>.a;
}
.bgcolor2{
	background:#fasdgs;
	#bgcolor>.a>.b;
}
// 省略写法 将>替换成空格

9.作用域

与编程语言中的作用域概念非常类似 首先会在局部查找变量和混合 如果没有找到 就会在父作用域中查找以此类推

10.引入 import

你可以引入一个或多个.less文件 然后这个文件中的所有变量都可以在当前less项目中使用

// file main
@wp:18;
// file 1
@import "main"
.centen{
	width:@wp;
}

// 如果引用的是.css文件则会被原样输出到编译文件中
可以放参数
@import (reference) "main.less"
once 默认 只包含一次
reference 引用less文件 但是 不输出
inline 在输出中包含源文件但不加工它
less 将文件作为less文件 无论是什么文件扩展名
css 同上

11.关键字

在调用的混合集后面追加 ！important 可以使混合集里的所有属性都继承！important

12.条件表达式

.mixin(@a) when (lightneww(@a)>=50%){
	background:black;
}
.mixin(@a) when (lightneww(@a)<50%){
	background:white;
}
.mixin(@a){
	color:@a;
}
.class1{
	.mixin(#ddd)
}
.class2{
	.mixin(#555)
}

类型检查函数
iscolor
isnumber
isstring
iskeyword
isurl
单位检查
ispeixel
ispercentage
isem
isunit

13. 循环

在less中混合可以调用自身 这样一个混合递归调用自己 再结合guard表达式合模式匹配俩个特性就可以写出循环结构

.loop(@counter) when (@counter>0){
	.loop(@counter-1);// 递归调用自身
	width:(10px*@counter);// 50px 40px 30px 20px 10px
	
}
div {
	.loop(5)
}

14. 合并属性

在需要合并的属性的 前面加上 + 就可以完成 合并以 ， 分割属性

// + 合并后以都好分割属性
.mixin(){
	box-shadow+:inset 0 0 10 px #555;
}
.myclass {
	.mixin();
	box-shadow+: 0 0 20px black;
}
// 合并后 以空格分割属性值
.a(){
	background+_:#f60;
	background+_:url('/sss.png');
}
.myclass{
	.a();
}

15. 函数库

color（） 解析颜色 将代表颜色的字符串转化为颜色值
convert（）将数字从一种类型转化为另一种类型
data-uri()
default() 常见于边界值 没有匹配到其他自定义函数（mixin）的时候返回true 否则返回false
unit() 移除或改变属性值的单位

字符串函数
escape() 将输入的字符串中的url特殊字符进行编码处理
e() css转义 用~ 值 符号替代 避免被编译
%（）格式化字符串
replace() 用另一个字符串替换字符串

数学函数
ceil() 向上取整
floor（） 向下取整
percentage（）浮点数转化为百分比
round（）取整和四舍五入
sqrt（）计算一个数的平方根
abs（）计算一个数的绝对值
sin()正弦值
asin（）反正弦函数
cos（）余弦函数
acos（）反余弦
tan（）正切
atan（）反正切
pi（）返回Π
pow() 乘方
mod（）取余
min()最小值
max（）最大值

下面方法太多就不一一写了