less学习笔记

注释

less的注释有两种，//和/* */

Less Code

// 单行注释，不编译/*   多行注释，编译   多行注释，编译   多行注释，编译*/

Compiled Css Code:

/*   多行注释，编译   多行注释，编译   多行注释，编译*/

变量

以@开头 例如：@test_width:100px;

Less Code

@text_width:100px;.text{    width: @text_width;}

Compiled Css Code:

.text {  width: 100px;}

混合

一个类可以当做另一个元素的属生值，并可以接受自己的参数。

可以在一个classA中引入另一个classB，从而实现classB继承classA的所有属性，可以带参数。经常使用在封装兼容不同浏览器的情况下。

无参混合

Less Code

.classA{    border: 10px solid red;    border-radius: 5px;    -webkit-border-radius:5px;    -moz-border-radius:5px;  }.classB{    .classA;    width: 50px;    height: 50px;}

Compiled Css Code:

.classA {  border: 10px solid red;  border-radius: 5px;  -webkit-border-radius: 5px;  -moz-border-radius: 5px;}.classB {  border: 10px solid red;  border-radius: 5px;  -webkit-border-radius: 5px;  -moz-border-radius: 5px;  width: 50px;  height: 50px;}

带参数混合(不带默认值)

Less Code

.classA(@radius){    border: 10px solid red;    border-radius: @radius;    -webkit-border-radius: @radius;    -moz-border-radius: @radius;  }.classB{    .classA(10px);    width: 50px;    height: 50px;}

Compiled Css Code:

.classB {  border: 10px solid red;  border-radius: 10px;  -webkit-border-radius: 10px;  -moz-border-radius: 10px;  width: 50px;  height: 50px;}

带参数混合(带默认值)

Less Code

.classA(@radius:5px){    border: 10px solid red;    border-radius: @radius;    -webkit-border-radius: @radius;    -moz-border-radius: @radius;  }.classB{    .classA();    width: 50px;    height: 50px;}

Compiled Css Code:

.classB {  border: 10px solid red;  border-radius: 5px;  -webkit-border-radius: 5px;  -moz-border-radius: 5px;  width: 50px;  height: 50px;}

@arguments变量

在Mixins中使用这个参数的时候，它表示所有的变量。

Less Code:

.box(@x:0,@y:0,@blur:1px,@color:gray){    -moz-box-shadow:@arguments;    -webkit-box-shadow:@arguments;    box-shadow: @arguments;  }#main{    .box(5px,5px,6px,#662500);}

Compiled Css Code:

#main {  -moz-box-shadow: 5px 5px 6px #662500;  -webkit-box-shadow: 5px 5px 6px #662500;  box-shadow: 5px 5px 6px #662500;}

匹配

.name(条件一，参数){}
.name(条件二，参数){}
.name(@_,参数){}
调用：.name(条件值，参数值);

假设需要做一个三角形的图标，三角形可能朝不同的方向，可以这样写：

Less Code

//@_意思是与top,bottom,left,right都匹配.triangle(@_,@w:5px,@c:gray){    width: 0px;    height: 0px;    overflow: hidden;}  .triangle(top,@w:5px,@c:gray){    border-width: @w;    border-color: transparent transparen @c transparent;    border-style: dashed dashed solid;}.triangle(bottom,@w:5px,@c:gray){    border-width: @w;    border-color: @c transparen transparent transparent;    border-style: solid dashed dashed;}.triangle(left,@w:5px,@c:gray){    border-width: @w;    border-color: transparen @c transparent transparent;    border-style: dashed solid dashed dashed;}.triangle(right,@w:5px,@c:gray){    border-width: @w;    border-color: transparen transparent transparent @c;    border-style: dashed dashed dashed solid;}.sanjiao{    .triangle(top,100,green);}

Compiled Css Code:

.sanjiao {  width: 0px;  height: 0px;  overflow: hidden;  border-width: 100;  border-color: transparent transparen #008000 transparent;  border-style: dashed dashed solid;}

这样就可以在需要使用不同方向的三角时，直接通过匹配实现。

运算

任何数字、颜色、变量都可以参与运算，运算被包裹在括号中。

颜色的运算不常用到，更多的是数字和变量的运算。

运算中没有强制性规定一定要带单位，运算中只要有一个带单位的即可,如果单位不同，以先出现的单位为准

Less Code

@width_a: 500px;@width_b: 50px;.text_01 {    width: @width_a + 20;}.text_02 {    width: @width_a + 20rem;}.text_03 {    width: 20rem + @width_a;}.text_04 {    width: @width_a - @width_b;}

Compiled Css Code:

.text_01 {  width: 520px;}.text_02 {  width: 520px;}.text_03 {  width: 520rem;}.text_04 {  width: 450px;}

嵌套

Html Markup:

<div id="box">        <p>hello <a href="http://zhyat.cn">zhyat</a></p>        <span>一些学习笔记</span>        </div>

Less Code:

#box{    display: inline;    float: left;    p{        font-size: 15px;        a{            text-decoration: none;            color: gray;            &:hover{                color: blue;            }        }    }    span{        font-size: 12px;        color:pink;    }}

Compiled Css Code:

#box {  display: inline;  float: left;}#box p {  font-size: 15px;}#box p a {  text-decoration: none;  color: gray;}#box p a:hover {  color: blue;}#box span {  font-size: 12px;  color: pink;}

根据DOM树形结构去书写代码，从而减少选择器的层级关系，使得代码更简洁。

需要注意的是在操作伪代码的时候，需要再前面加&。有&的时候解析为同一元素或此元素的伪类，没有&的时候解析为此元素的后代元素

Less Code

a{    &:hover{        color: blanchedalmond;    }    &{        font-size: 15px;    }    :visited{        color: burlywood;    }    .ml{        font-weight: 40;    }}

Comoiled Css Code

a {  font-size: 15px;}a:hover {  color: blanchedalmond;}a :visited {  color: burlywood;}a .ml {  font-weight: 40;}

color函数

颜色定义函数

Less Code

@color1:rgb(255,255,255);       //转化为#ffffff param1:红色通道 param2:绿色通道 param3:蓝色通道 三个参数均是包含介于0 - 255之间的整数或介于0 - 100%之间的百分比。@color2:rgba(155,155,155,0.2);  //rgba(155, 155, 155, 0.2) 同上，param4是alpha通道，包含0到1之间的数字或0到100%之间的百分比。@color4:hsl(22,100%,20%);       //转化为#662500,param1:度数（0~360，整数） param2:饱和度(0~1或0~100%) param3:亮度(0~1或0~100%)@color5:hsla(22,100%,20%,0.4);  //转化为rgba(102, 37, 0, 0.4)，同上，param4是alpha通道，包含0到1之间的数字或0到100%之间的百分比。@color6:hsv(55,0.7,0.5);          //转化为#807826,param1:度数（0~360，整数） param2:饱和度(0~1或0~100%) param3:value(0~1或0~100%)@color7:hsva(125,179,18,0.6);     //转化为rgba(0, 255, 0, 0.6),同上，param4是alpha通道，包含0到1之间的数字或0到100%之间的百分比。.box{    width: 50px;    height: 50px;    border-width: 2px;    border-style: solid;    border-color: @color1 @color2 @color4 @color5;    background-color: @color6;    color: @color7;}

Comoiled Css Code

.box {  width: 50px;  height: 50px;  border-width: 2px;  border-style: solid;  border-color: #ffffff rgba(155, 155, 155, 0.2) #662500 rgba(102, 37, 0, 0.4);  background-color: #807826;  color: rgba(0, 255, 0, 0.6);}

颜色通道函数

序号 函数 描述 例子 1 hue 在HSL颜色中提取颜色的色调 background: hue( hsl(22,100%,20%); Comoiled Css Code background: 22; 2 saturation 在HSL颜色中，提取彩色对象的饱和通道。 background: saturation( hsl(22,100%,20%);Comoiled Css Code background: 100%; 3 lightness 在HSL颜色空间中，从颜色对象提取亮度通道。 background: lightness( hsl(22,100%,20%);Comoiled Css Code background: 20%; 4 hsvhue 在HSV色彩空间中，提取色彩对象的色调通道。 background: hsvhue(hsv(55,0.7,0.5)); Comoiled Css Code background: 55; 5 hsvsaturation 在HSL颜色空间中，提取彩色对象的饱和通道。 background: hsvsaturation(hsv(55,0.7,0.5)); Comoiled Css Code background: 70%; 6 hsvvalue 在HSL颜色空间中，提取颜色对象的值通道。 background: hsvvalue(hsv(55,0.7,0.5)); Comoiled Css Code background: 50%; 7 red 提取彩色对象的红色通道。 background: red(rgba(155,154,153,0.2)); Comoiled Css Code background: 155; 8 green 提取彩色对象的绿色通道。 background: green(rgba(155,154,153,0.2)); Comoiled Css Code background: 154; 9 blue 提取彩色对象的蓝色通道。 background: blue(rgba(155,154,153,0.2)); Comoiled Css Code background: 153; 10 alpha 提取颜色对象的alpha通道。 background: alpha(rgba(155,154,153,0.2)); Comoiled Css Code background: 0.2; 11 luma 计算颜色对象的亮度值。 background: luma(rgba(155,154,153,0.2)); Comoiled Css Code background: 6.47593448%; 12 luminance 在没有伽马校正的情况下计算亮度值。 background: luminance(rgba(155,154,153,0.2)); Comoiled Css Code background: 12.08944314%;

颜色操作

以不同的方式改变和操作颜色，形如function(param1,param2);

param1是颜色对象

param2可以是

序号 函数 描述 1 saturate 改变元素中颜色的强度或饱和度。 2 desaturate 降低了元素中颜色的强度或饱和度 3 lighten 增加了元素中颜色的亮度 4 darken 改变元素中颜色的强度或饱和度 5 fadein 增加了所选元素的不透明度 6 fadeout 减少所选元素的不透明度 7 fade 用于设置所选元素的颜色的透明度 8 spin 用于旋转所选元素的颜色的角度 9 mix 将两种颜色与不透明度混合 10 tint 将颜色与白色混合，同时减少颜色的比例 11 shade 将颜色与黑色混合，因为您减少了颜色的比例 12 greyscale 从所选元素中的颜色中丢弃饱和度 13 contrast 设置元素中颜色的对比度

颜色混合函数

序号 函数 描述 1 multiply 将两种颜色相乘，并返回结果颜色 2 screen 需要两种颜色，并返回更明亮的颜色。 与multiply函数相反 3 overlay 它通过组合乘法和屏幕的效果来生成结果 4 softlight 工作方式类似于覆盖，但它仅使用颜色的一部分，其中柔和突出显示其他颜色 5 hardlight 工作方式类似于覆盖 ，但颜色的作用相反 6 difference 从第一输入颜色中减去第二输入颜色 7 exclusion 工作原理类似于difference，但对比度较低 8 average 计算每个通道(RGB)基础上的两种输入颜色的平均值 9 negation 与opposite函数相反，其从第二颜色中减去第一颜色

命名空间

在为了更好的组织CSS或者为了更好的封装，将一些变量和混合模块打包起来。在使用的时候，就需要把有关的一部分取出来。

作用域

importing