less深入学习日记--02

less嵌套规则

允许子项在父项中当作属性来编码子项的css代码

.container {
    h1 {
         font-size: 25px;
         color:#E45456;
    }
    p {
         font-size: 25px;
         color:#3C7949;
    }
}

输出为css时是：

.container h1 {
    font-size: 25px;
    color:#E45456;
.container p {
	font-size: 25px;
    color:#3C7949;
}

less变量

在less中声明变量的格式为 @变量名：变量值

1. less普通变量

在多次使用重复相同的值时，可以使用变量来完成它。

@h1color: #E45456;
@fzsize: 25px;
.container {
   .p1 {
        font-size: @fzsize;
        color:@h1color;
   }
   p {
        font-size: @fzsize;
        color:@h1color;
   }
}

输出为css时：

.container .p1 {
   font-size: 25px;
   color: #E45456;
}
.container p {
   font-size: 25px;
   color: #E45456;

2. less变量插值

• 用做css选择器

@tag: h1;

@{tag} {
	font-size: 25px;
}

输出为css时：

h1 {
	font-size: 25px;
}

• 当然变量也可用作保存url

@imageurl: "http://www.cdn.com";

background : url("@{images}/static/images/less_variables/birds.jpg");

/* 输出  */
background : url("http://www.cdn.com/static/images/less_variables/birds.jpg");

当然你在定义或使用变量时，可以对变量可以进行简单的运算, 它们可以对任何数字，颜色或变量进行操作

// numbers are converted into the same units
@conversion-1: 5cm + 10mm; // result is 6cm
@conversion-2: 2 - 3cm - 5mm; // result is 1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // result is 4px

// example with variables
@base: 5%;
@filler: @base * 2; // result is 10%
@other: @base + @filler; // result is 15%

@base: 2cm * 3mm; // result is 6cm

@color: #224488 / 2; //results in #112244
background-color: #112244 + #111; // result is #223355

less函数

LESS映射具有值操作的JavaScript代码，并使用预定义的函数来操纵样式表中的HTML元素。

在这里写几个又代表的函数

@base: #f04615;
@width: 0.5;
// 向上取整
width: ceil(2.9999999px);	//3px

// 百分比函数
width: percentage(@width); // returns `50%`

// 向下取整
height: floor(2.9999999px); 	//2px

// 将基本色的饱和度增加5％
color: saturate(@base, 5%);

less混入

less混合可以用将一个类的属性用于另一个类，保证类代码的复用性。

.mixin() {
  &:hover {
    background: #FFC0CB;
  }
}

.mixins () {
	color: #ccc;
	background-color: ##FFC0CB;
}

#bgc {
	.inner {
		background-color: #ccc;
	}
}

a {
  .mixin();
}

p {
  .mixins() !important
}

h1 {
  #bgc > .inner;
}

输出为css时 ：

a: hover {
	background: #FFC0CB;
}
p {
	color: #ccc; !important
	background-color: ##FFC0CB; !important
}
h1 {
	background-color: #ccc;
}