Less自学笔记

fghgfhgfhgfhLess是一种动态样式语言，属于CSS预处理语言的一种。它使用类似CSS的语法，为CSS赋予动态语言的特性，如变量、函数、运算等。今天开始学习Less...

一、环境

通过<script>标签引入.less文件即可实现在服务器端将less预编译为css样式。

<script type="text/javascript" src="less.js"></script>

也可通过监测less样式，自动编译为css，从而减少修改less代码后需要按F5刷新后才能看到改变后的效果。

<script>less = { env: 'development'};</script>
<script src="less.js"></script>
<script>less.watch();</script

比较常用的less编译软件如Koala等。

二、注释

//单行注释不会进行编译
/*多行注释作为css的/*注释...*/形式进行编译*/

三、变量

定义采用"@变量名：变量值"形式，使用时采用"@变量名"或"@{变量名}"的形式。局部作用域高于全局作用域。

Less源码：

@c:color;
@div:.div;
@h:200px;
@w:200px;
@s1:'hello ';//要保留空格使用单引号或双引号，否则空格被忽略
@s2:world;

@{div}{
	@c:#ccc;
	width:@w;
	height:@h;
	content:'@{s1}@{s2}';
}

编译后的css：

.div {
  width: 200px;
  height: 200px;
  content: 'hello world';
}

还可以通过extract函数获得列表元素，length获取元素个数，例如

@colors:#fff #ccc #ddd;
.div{
	background:extract(@colors,1);
	height:12px * length(@colors);
}

编译后的css：

.div {
  background: #ffffff;
  height: 36px;
}

四、嵌套

Less源码：

.main{
	height:200px;
	width:500px;
	.main-left{
		float:left;
		height:200px;
		width:100px;
	}
	.main-right{
		float:right;
		right:0;
		height:200px;
		width:400px;
		.main-right-top{
			height:50px;
		}
		.main-right-content{
			height:120px;
		}
		.main-right-bottom{
			height:30px;
		}
	}
}

编译后的css：

.main {
  height: 200px;
  width: 500px;
}
.main .main-left {
  float: left;
  height: 200px;
  width: 100px;
}
.main .main-right {
  float: right;
  right: 0;
  height: 200px;
  width: 400px;
}
.main .main-right .main-right-top {
  height: 50px;
}
.main .main-right .main-right-content {
  height: 120px;
}
.main .main-right .main-right-bottom {
  height: 30px;
}

五、父选择器&

通过&选择完整的父选择器，可以通过&追加，生成新的选择器，&：添加伪类，父选择器是组选择器时，会生成新选择器。

Less源码：

#lol .btn{
	&:hover{
		cursor:pointer;
	}
	&-m,&t{
		font-size:10px;
	}
	.cng &{
		text-indent:1px;
	}
}
#lol1,.lol1{
	&:hover{
		cursor:pointer;
	}
	& + &{
		cursor:pointer;
	}
}

编译后的css：

#lol .btn:hover {
  cursor: pointer;
}
#lol .btn-m,
#lol .btnt {
  font-size: 10px;
}
.cng #lol .btn {
  text-indent: 1px;
}
#lol1:hover,
.lol1:hover {
  cursor: pointer;
}
#lol1 + #lol1,
#lol1 + .lol1,
.lol1 + #lol1,
.lol1 + .lol1 {
  cursor: pointer;
}

六、@import

1、@import （reference）"文件路径"

将引入的文件作为样式库使用，因此文件中样式不会被直接编译为css样式规则。当前样式文件通过extend和mixins的方式引用样式库的内容。

2、@import （inline）"文件路径"

用于引入与less不兼容的css文件，通过inline配置告知编译器不对引入的文件进行编译处理，直接输出到最终输出。注意：引入的文件和当前文件会被编译为一个样式样式。

3、@import （less）"文件路径"

默认使用该配置项，表示引入的文件为less文件。

4、@import （css）"文件路径"

表示当前操作为CSS中的@import操作。当前文件会输出一个样式文件，而被引入的文件自身为一个独立的样式文件.

5、@import （once）"文件路径"

表示对同一资源可引入多次。

6、@import （multiple）"文件路径"

表示对同一资源可引入多次。

七、继承

7.1 语法

1、<selector>:extend(<parentSelector>){}

2、<selector>{&:(<parentSelector>);}

Less源码：

.parent{
	width:50px;
}
.son1:extend(.parent){
	height:10px;
}
.son2{
	&:extend(.parent);
	height:20px;
}

编译后的css：

.parent{
	width:50px;
}
.son1:extend(.parent){
	height:10px;
}
.son2{
	&:extend(.parent);
	height:20px;
}

7.2 all关键字

all关键字会匹配所有parentSelector中的样式，并用selector替换parentSelector生成新的选择器。

Less源码：

.parent{
　　height: 100px;
   .hair{
   　　color: #f27;
   }
   [name=eyes]{
   　　color: #768;
   }
}
.son:extend(.parent all){}

css源码：

.parent,
.son {
  height: 100px;
}
.parent .hair,
.son .hair {
  color: #f27;
}
.parent [name=eyes],
.son [name=eyes] {
  color: #768;
}

八、混合（Mixin）

less源码：

.parent{
	width:20px;
}
.parent1(@h){
	height:@h;
}
.parent3(@fs:10px){
	font-size:@fs;
}
.son{
	.parent;
	.parent1(100px);
	.parent3();
}

编译后的css：

.parent {
  width: 20px;
}
.son {
  width: 20px;
  height: 100px;
  font-size: 10px;
}

九、匹配模式

Less源码：

.tri(top,@w,@c){
	 border-width:@w;
	 border-style:solid;
	 border-color:transparent transparent @c transparent;
}
.tri(bottom,@w,@c){
	 border-width:@w;
	 border-style:solid;
	 border-color:@c transparent transparent transparent;
}
.tri(left,@w,@c){
	 border-width:@w;
	 border-style:solid;
	 border-color:transparent @c transparent transparent;
}
.tri(right,@w,@c){
	 border-width:@w;
	 border-style:solid;
	 border-color:transparent transparent transparent @c;
}
.tri(@_,@w,@c){
	width:0px;
	height:0px;
}
.tri{
	.tri(right,50px,green);
}

编译后的css

.tri {
  border-width: 50px;
  border-style: solid;
  border-color: transparent transparent transparent #008000;
  width: 0px;
  height: 0px;
}

十、条件、循环

when关键字实现条件控制，递归实现循环控制

Less代码：

<span style="color:#009900;">/*true值匹配*/</span>
.truth(@a) when(@a){
	&::after{
		content:@a;
	}
}
.myDiv1{
	.truth(true);
}
<span style="color:#006600;">/* 类型判断函数
 * iscolor
 * isnumber
 * isstring
 * iskeyword
 * isurl
 */</span>
.color(@c) when(iscolor(@c)){
	color:@c;
}
<span style="color:#006600;">/* 单位判断函数
 * ispixel
 * ispercentage
 * isem
 * isunit
 */</span>
.myDiv2(@h) when(ispixel(@h)){
	height:@h;
}
<span style="color:#006600;">/* 关系运算符
 * > 
 * <
 * >=
 * <=
 */</span>
.mydiv3(@h) when (@h>100){
	height:@h;
}
.temp{
	.mydiv3(100);
}
<span style="color:#006600;">/* 逻辑运算符
 * and 
 * or
 * not
 */</span>
.mydiv4(@h,@w) when(@h>100) and (@w>200){
	width:@w;
	height:@h;
}
<span style="color:#006600;">/*& when实现if*/</span>
@tmp:true;
& when(@tmp){
	.txt{
		border-style:solid;
	}
}
<span style="color:#006600;">/*循环*/</span>
.columns(@n,@i:1) when(@i<=3){
	.columns-@{i}{
		width:@i * 100% /100;
	}
	.columns(@n,@i + 1);
}
.columns(4);

编译后的css：

.myDiv1::after {
  content: true;
}
.txt {
  border-style: solid;
}
/*循环*/
.columns-1 {
  width: 1%;
}
.columns-2 {
  width: 2%;
}
.columns-3 {
  width: 3%;
}

十一、运算符

在使用运算符时，运算符与运算数之间一定要有空格，否则会报错。当运算数之间单位不同时，以第一个运算数为准。

十二、函数