3.23日 less的学习笔记

一. less的编译文件

less是一门向后兼容的css扩展语言

①引用less.js文件 (缺点是不是预编译)

②使用编译器编译less 文件

二. less的注释

// 这是不会被编译到css 的注释
/* 这是能编译到css样式中的注释*/

三. less的变量

以 @ 符开头定义变量

属性值定义变量

@color:pink 	 // 定义一个颜色  可以直接使用 color:@color;

属性名定义变量 (用的少)

@m:margin;  // 可以通过@m 来使用margin 使用 @{m}

选择器定义成变量(用的少)

@selector:#waper;  //定义一个waper  使用 @{selector}

四.嵌套规则

用嵌套使层级关系更清晰

#header {
	color:black;
	.nav{
		font-size:12px;
	}
	.logo {
		Width:30px;
	}
}
// 等效于
#header {
	color:black;
	}
#header	.nav{
	font-size:12px;
}
#header	.logo {
	Width:30px;
}

嵌套关系中 & 所有的父级

.a {
	.b {
		&:hover{
		}
	}
}
编译成css为
.a .b:hover {
}

五.less的混合

①不带参数的混合

.a() {  // 带上括号 不会被编译到css 当中 此时是不带参数
    margin:11px;
    padding:11px;
    font-size:16px;
}

调用的时候
.class {
    .a();
}

②带参数的混合

a(@a,@b) {  // 带上括号 不会被编译到css 当中
    margin:@a;
    padding:@b;
    font-size:16px;
}

调用的时候
.class {
    .a(10px,10px);
}

③ 带参数并有默认值的混合

.a(@a:10px,@b:10px) {  // 带上括号 不会被编译到css 当中 参数有默认值
    margin:@a;
    padding:@b;
    font-size:16px;
}

调用的时候
.class {
    .a();  // 调用时 可以传参数 也可以不传
}

④命名参数

.a(@a,@b) {  // 带上括号 不会被编译到css 当中
    margin:@a;
    padding:@b;
    font-size:16px;
}

调用的时候
.class {
    .a(@b:100px,10px);
}

六.继承 extend

.a {
	width:20px;
	height:30px;
}
.b:extend(.a){
	color:#ccc;
}
css 编译为 
.a,.b {
	width:20px;
	height:30px;
}
.b {
	color:#ccc
}

七. 递归 mixins

.generate-columns(6);
// 递归调用 i的初始值是1,调用mixin 传入值是n的判断条件
.generate-columns(@n, @i: 1) when (@i =< @n) {  // 当 i =< n 的时候执行的代码块
	.column-@{i} {   // 创建以 column-nunber 开始的一系列的类名
		width: (@i * 100% / @n);  // 给每个不同的类 不同的width的值
	}
	.generate-columns(@n, (@i + 1));  // 执行一次之后 i+1  相当于for 循环中i++
}

编译为:
.column-1 {
  width: 16.66666667%;
}
.column-2 {
  width: 33.33333333%;
}
.column-3 {
  width: 50%;
}
.column-4 {
  width: 66.66666667%;
}
.column-5 {
  width: 83.33333333%;
}
.column-6 {
  width: 100%;
}

less可真棒!!! 大家加油呀!!!