less学习笔记三
1、嵌套规则
Less使用嵌套规则来代替或者结合css的级联样式
<section class="section-nested"> <h2 class="h-nested">this is a nested head</h2> <article class="article-nested"> this is a nested article. </article> </section> .section-nested{color:@light-blue;} .section-nested .h-nested{font-size:16px;} .section-nested .article-nested{background-color:@nice-blue;}
Less中嵌套写法如下，更加简洁，并且能模仿出HTML中的结构。
.section-nested{
color:@light-blue;
.h-nested{
font-size:16px;
}
.article-nested{
background-color:@nice-blue;
}
}
可以使用这种方法将伪选择器绑定到混合类中，如下典型的clearfix
.clearfix {
display: block;
zoom: 1;
&:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
}
&代表当前选择器的父级。
2、嵌套指令和冒泡
指令media或者keyframe等可以使用选择器一样嵌套方式。指令放在上面，作用于同一规则集合中的其他元素的相关命令保持不变，这就是冒泡的含义。
条件指令例如@Media, @supports 和 @document同样可以有选择器复制在它们的内容体中。
.section-nested{
@media screen{
color:green;
@media(min-width:768px){
.h-nested{color:red;}
}
}
@media tv{
color:black;
}
}
/**outputs**/
@media screen {
.section-nested {
color: green;
}
}
@media screen and (min-width: 768px) {
.section-nested .h-nested {
color: red;
}
}
@media tv {
.section-nested {
color: black;
}
}
其余的非条件指令例如 font-face或keyframes，同样可以冒泡，内容体不发生改变。
.meng{
color:yellow;
@font-face{
src:made-up-url;
}
padding:2px;
}
/**outputs**/
.meng {
color: yellow;
padding: 2px;
}
@font-face {
src: made-up-url;
}
3、运算
数学运算+, -, *, / 可在任何数字，颜色或变量中应用。可能的话，数学运算会把单位考虑进去，在加、减或者比较之前转化成数字。结果中会使用运算表达式中最左边明确规定的单位类型。如果转换不能实现或者没有意义，单位会被忽略。不能转换的例子：px to cm or rad to %.
// numbers are converted into the same units
@conversion-1: 5cm + 10mm; // result is 6cm
@conversion-2: 5 - 3cm - 5mm; // result is 1.5cm，第一个5没有单位，结果使用的是最左边第一次出现的单位cm，5mm也被转换为0.5cm来参与运算
// conversion is impossible
@incompatible-units: 5 + 5px - 1mm; // result is 6.22047244px
// example with variables
@base: 5%;
@filler: @base * 2; // result is 10%
@other: @base + @filler; // result is 15%
.conversion{
width:@conversion-1;
height:@conversion-2;
margin:@base @filler @other;
padding:@incompatible-units;
}
/**outputs*/
.conversion {
width: 6cm;
height: 1.5cm;
margin: 5% 10% 15%;
padding: 6.22047244px;
}
乘法和除法运算时不会转换数字。多数情况下做乘除法时没有意义的，一个长度乘以另一个长度，得到一个面积，css不支持制定的面积样式。
less会在数字上做运算，并把明确规定的单位赋值给结果。
@multiply: 1cm * 3mm; // result is 3cm
.conversion{
width:@conversion-1;
height:@conversion-2;
margin:@base @filler @other;
padding:@incompatible-units;
border:@multiply solid black;
}
/**outputs**/
.conversion {
width: 6cm;
height: 1.5cm;
margin: 5% 10% 15%;
padding: 6.22047244px;
border: 3cm solid black;
}
颜色colors会被分割为红，绿，蓝，透明度四个维度。运算时在每一个维度单独进行计算。
例如，用户对两个颜色做加法运算，结果中的绿色维度等于输入颜色的绿色维度数据之和。用户用一个数字乘以颜色数据，每一个颜色维度的数据都得以与之相乘。
颜色的运算经常会产生不合法的数据。如果某个颜色数据的结果大于ff或者小于00,此数据将会四舍五入为ff或00.如果透明度的运算结果大于1.0或者小于0.0，它也会四舍五入为1.0或0.0.
@color1: #224488 / 2; //results in #112244
@color2: #112244 + #111; // result is #223355
@color3: #fff+#555;
.conversion{
color:@color1;
background-color:@color2;
border-color:@color3;
}
/**outputs**/
.conversion {
color: #112244;
background-color: #223355;
border-color: #ffffff;
}
4、Escaping,转义，允许你使用任意字符作为变量或属性的值
5、Function,函数
Less提供了各种各样的函数，用来转换颜色，操纵字符和做数据运算。函数参考中有相关的文档。
@basecolor: #f04615;
@width: 0.5;
.conversion {
width: percentage(@width); // returns `50%`
color: saturate(@basecolor, 5%);
background-color: spin(lighten(@basecolor, 25%), 8);
}
/**outputs**/
.conversion {
width: 50%;
color: #f6430f;
background-color: #f8b38d;
}
6、Scope 变量范围，变量和混合类首先在本地查找，找不到时编译器会在它的父级范围内查找。
@var: red;
header {
@var: white;
h1 {
color: @var; // white
}
}
/**outputs**/
.header {
color: #6c94be;
}
header h1 {
color: white;
}
变量和混合类不需要在它被使用之前定义，也可以在被引用之后定义，上面等价于
@var: red;
header {
h1 {
color: @var; // white
}
@var: white;
}
这是一种懒加载的处理方式：变量是懒加载的，不需要在被引用之前定义。
一个变量被定义多次时，从当前范围中向上查找，最后一个定义的将被使用。
@var: red;
header {
@var: white;
h1 {
@var:blue;
color: @var;
}
@var:yellow;
}
/**outputs**/
header h1 {
color: blue;
}
