三、基础语法

注释

/**/这个注释可以在css中使用，也可以在less中使用
// 这个注释可以在less中使用，但是因为css不支持，所以这种类型的注释是没有办法编译到css文件中的

变量（variable）

变量允许我们定义一系列通用的样式，在需要的时候去调用，这样在修改的时候只需要修改全局的变量就可以了，十分的方便。
规则：less 变量以@作为前缀，不能以数字开头，不能包含特殊字符。
使用：

less

/*定义了一个变量*/
@mainColor:#ff4400;
/*使用变量*/
a:hover{
  color:@mainColor;
}

p{
  border: 1px solid @mainColor;
}

/*也可以进行变量的拼接*/
@left:left;
/*拼接使用的时候要大括号包住*/
border-@{left}: 1px solid @mainColor;

Mixin混入

什么是混入，这个是在bootstrap中经常看到的一个东西。混入可以将定义好的class A轻松的引入到class B中，从而简单实现class B继承所有class A的属性。定义的时候前面要加点.。

类名混入

假如我定义了一个button1，按钮中有一些属性，我在别的地方又有一个button2，要加上这个button1的属性和一些别的属性，如果按照css的方式我要重新写一遍，那我用Less就可以进行混入。来上代码：

less

/*原来的按钮的一些属性和别的属性*/
.button1{
    width:200px;
    height: 50px;
    background: #fff;
}

.btn_border{
    border: 1px solid #ccc;
}

.btn_danger{
    background: red;
}

.btn_block{
    display: block;
    width: 100%;
}

/*对css类的样式进行混入*/
.button2{
    .button1();
    .btn_border();
    .btn_danger();
    .btn_block();
}

函数混入

上面的混入有一些不好的地方，编译的时候还是全部都编译进去了，button1里面的东西button2里面全部都有，只是写的时候简洁了而已。这个时候可以混入函数。(具体的函数知识在后面写的)

less

.button1(){
    width:200px;
    height:200px;
    background: #fff;
}

.btn_border(){
    border:1px solid #ccc;
}

.button2{
    .button1();
    .btn_border();
}

这样这里面的.button1和.btn_border都不会显示到css文件之中去，可以降低css中的代码冗余。但是如果我要对样式的具体值进行改变呢，就涉及到参数了

带参数的函数混入

注意：在定义参数要传入默认值，如果没有默认值，调用的时候必须要传入值，如下：

less

/*下面的如果定义和使用的时候都没有传值，less这样会报错*/
.btn_border(@len){
    border:1px solid #ccc;
}

.btn_b{
    .btn();
    .btn_border();
}

两种解决方案

1.在定义的时候传入默认值

less

/*1.在定义的时候传入默认值*/
.btn_border(@len:10px){
    border:1px solid #ccc;
    border-radius:@len;
}

.btn_b{
    .btn();
    .btn_border();
}

/*如果是上面的写法，最终的border-radius是10px*/
.btn_b{
    .btn();
    .btn_border(20px);
}
/*如果调用的时候传入参数了，最终是20px*/

2.定义的时候没有默认值，在调用的时候传入值

.btn_border(@len){
    border:1px solid #ccc;
    border-radius:@len;
    -webkit-border-radius:@len;
    -moz-border-radius:@len;
    -ms-border-radius:@len;
    -o-border-radius:@len;
}

.btn_b{
    .btn();
    .btn_border(10px);
}

嵌套

嵌套可以增强代码的层级关系，我们也可以通过嵌套来实现继承，这样很大程度减少了代码量，代码量看起来更加清晰。

less

.nav{
    border-bottom: 1px solid #ccc;
    font-size: 12px;
    color:#666;
    a {
        color:#666;
    }
    > .container{
        line-height: 40px;
        text-align: center;
        > div{
        height:40px;
            ~ div{
            border-left:1px solid #ccc;
            }
        }
    }
}

这个时候要注意一个问题，就是如果在写伪元素、交集选择器的时候，就会出现问题，直接写嵌套中间会默认的加上空格。那么如何拼接上去呢？

less

/*下面就是如何书写伪元素和交集选择器的写法，前面要加&*/
.nav{
      font-size:12px;
      &:hover{
            text-decoration:none;
      }
      &::before{
            content:"";
      }
}

Import（引用）

用less写文件的时候，可以一个模块写一个less，但是index.html里面都要引用，引用那么多个less文件就不合适了，这个时候就要建立一个总的less，这是有一种解耦的开发思想，"高内聚，低耦合"。

下面来梳理一下结构：

<less里面所需要的模块>

变量
函数
功能模块（视自己的情况而定）
总（引用变量、函数、功能模块）

首先在index.less中引入

less

/*index.less*/
@import "variable.less";      /*引入变量，后面可以加后缀*/
@import "mixin.less";         /*引入函数*/
@import "topBar.less";        /*引入功能模块1*/
@import  "navBar.less";       /*引入功能模块2*/

在index.html中值需要引入一个index.less即可

函数（内置函数和运算）

js中有两种定义函数的方式

function fun()
var fun = function()

less中定义函数

直接运算

less

a{
    color:red/2;     /*结果是#800000*/
}

li{
    width:100%/7;  /*每个li标签的宽度都是ul的1/7 */
}

利用.开头定义，使用的时候也是.函数名()

less

.a(@len:12){
    width:100%/@len;
    color:lighten(#ddd,10%);   /*亮度提高10%，结果是#f7f7f7*/
}

col-xs-1{
    .a();
}

内置函数

具体的有函数手册

注意：含*号的函数只在1.4.0 beta以上版本中可用!!

字符串函数

escape(@string); // 通过 URL-encoding 编码字符串
e(@string); // 对字符串转义
%(@string, values...); // 格式化字符串

综合类函数

unit(@dimension, [@unit: ""]); // 移除或替换属性值的单位
color(@string); // 将字符串解析为颜色值
* data-uri([mimetype,] url); // * 将资源内嵌到css中，可能回退到url()

算数函数

ceil(@number); // 向上取整
floor(@number); // 向下取整
percentage(@number); // 将数字转换为百分比，例如 0.5 -> 50%
round(number, [places: 0]); // 四舍五入取整（第二位是精度）
* sqrt(number); // 计算数字的平方根（参数可以带单位）
* abs(number); // 数字的绝对值（参数可以带单位）
* sin(number); // sin函数（没有单位默认弧度值）

less

sin(1deg);   //1角度角的正弦值   0.01745240643728351
sin(1grad);  //1百分度角的正弦值   0.015707317311820675
/*百分度是将一个圆周分为400份，每份为一个百分度，英文gradian，简写grad*/

* asin(number); // arcsin函数
- 参数-1到1之间的浮点数，返回值弧度为单位，区间在-PI/2 到 PI/2 之间，超出范围输出NaNrad
* cos(number); // cos函数
- 与sin函数一样
* acos(number); // arccos函数
- 参数-1到1之间的浮点数，返回值弧度为单位，区间在 0 在 PI 之间，超出范围输出NaNrad
* tan(number); // tan函数
- 与sin函数一样
* artan(number); // arctan函数
- 返回值区间在 -PI/2 到 PI/2 之间，其余和arsin一样
* pi(); // 返回PI
* pow(@base, @exponent); // 返回@base的@exponent次方
- 返回值和@base有相同的单位，第二个单位忽略，不符合规则返回NaN
* mod(number, number); // 第一个参数对第二个参数取余
- 返回值与第一个参数单位相同，可以处理负数和浮点数
* convert(number, units); // 在数字之间转换
* unit(number, units); // 不转换的情况下替换数字的单位

颜色函数

color(string); // 将字符串或者转义后的值转换成颜色
- 见综合函数
rgb(@r, @g, @b); // 转换为颜色值
- 参数是整数0-255，百分比0-100%，转化为十六进制
rgba(@r, @g, @b, @a); // 转换为颜色值
- 参数前三个是整数0-255，百分比0-100%，第四个是0-1或者百分比0-100%，
argb(@color); // 创建 #AARRGGBB 格式的颜色值
- 使用在IE滤镜中，以及.NET和Android开发中
hsl(@hue, @saturation, @lightness); // 创建颜色值
- 通过色相、饱和度、亮度三种值
- @hue ：整数0-360 表示度数
- @saturation ：百分比0-100% 或者数字 0 - 1
- @lightness：百分比0-100% 或者数字0 - 1
- 返回值十六进制的颜色值

less

/*如果想使用一种颜色来创建另一种颜色的时候就很方便*/
@new: hsl(hue(@old),45%,90%);

/*这里@new 将使用@old 的色相值，以及它自己的饱和度和亮度*/

hsla(@hue, @saturation, @lightness, @alpha); // 创建颜色值
hsv(@hue, @saturation, @value); // 创建颜色值
- @hue 表示色相，整数0-360表示度数
- @saturation 表示饱和度，百分比0-100% 或数字 0-1
- @value 表示色调，百分比 0-100% 或数字 0-1
- 创建不透明的颜色对象

less

hsv(90,100%,50%)

// 输出#408000

hsva(@hue, @saturation, @value, @alpha); // 创建颜色值
hue(@color); // 从颜色值中提取 hue 值（色相）
- 返回值0-360的整数

less

hue(hsl(90,100%,50%))

// 输出  90

saturation(@color); // 从颜色值中提取 saturation 值（饱和度）
- 返回值百分比0-100

less

saturation(hsl(90,100%,50%))

// 输出  100%

lightness(@color); // 从颜色值中提取 'lightness' 值（亮度）
- 返回0-100的百分比值

less

lightness(hsl(90,100%,50%))

// 输出  50%

* hsvhue(@color); // 从颜色中提取 hue 值，以HSV色彩空间表示（色相）
- 返回0-360的整数
* hsvsaturation(@color); // 从颜色中提取 saturation 值，以HSV色彩空间表示（饱和度）
- 返回0-100百分比
* hsvvalue(@color); // 从颜色中提取 value 值，以HSV色彩空间表示（色调）
- 返回0-100百分比
red(@color); // 从颜色值中提取 'red' 值（红色）
- 返回整数0-255
green(@color); // 从颜色值中提取 'green' 值（绿色）
- 返回整数0-255
blue(@color); // 从颜色值中提取 'blue' 值（蓝色）
- 返回整数0-255
alpha(@color); // 从颜色值中提取 'alpha' 值（透明度）
- 返回浮点数0-1
luma(@color); // 从颜色值中提取 'luma' 值（亮度的百分比表示法）
- 返回百分比0-100%

颜色运算（Color operations）

颜色值运算有几点注意事项：
参数必须单位/格式相同
百分比将作为绝对值处理，10%增加10%，是20%而不是11%
参数值只能在限定的范围内
返回值的时候，除了十六进制外将其他格式做简化处理

saturate(@color, 10%); // 饱和度增加 10%
desaturate(@color, 10%); // 饱和度降低 10%
lighten(@color, 10%); // 亮度增加 10%
darken(@color, 10%); // 亮度降低 10%
fadein(@color, 10%); // 不透明度增加 10%，更不透明
fadeout(@color, 10%); // 不透明度降低 10%，更透明
fade(@color, 50%); // 设定透明度为 50%
spin(@color, 10); // 色相值增加 10
- 向任意方向旋转颜色的色相角度，旋转范围是0-360，超过将从起点继续旋转，比如旋转360和720是相同的结果。
- 需要注意的是，颜色要通过 RGB 进行格式转换，这个过程不能保留灰色的色相值（灰色没有饱和度，色相值也就没有意义了），因此要通过函数保留颜色的色相值
- 因为颜色值永远输出为RGB格式，因此spin()函数对灰色无效
mix(@color1, @color2, [@weight: 50%]); // 混合两种颜色
- 第三个参数是平衡两种颜色的百分比，默认是50%
greyscale(@color); // 完全移除饱和度，输出灰色
- 与desaturate(@color, 100%)效果相同
contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]); // 如果 @color1 的 luma 值 > 43% 输出 @darkcolor，否则输出 @lightcolor
- 比较颜色的，比较复杂，等用到的时候再说吧

颜色混合（Color blending）

颜色混合的方式与图像编辑器 Photoshop, Firework 或者 GIMP 的图层混合模式 (layer blending modes) 相似，因此制作 .psd 文件时处理颜色的方法可以同样用在 CSS 中。

multiply(@color1, @color2);
- 分别将两种颜色的RGB三种值做乘法运算，然后再除以255，输出的结果是更深的颜色
- 对应ps中的“变暗/正片叠底”
screen(@color1, @color2);
- 结果是更亮的颜色，对应ps中的“变亮/滤色”
overlay(@color1, @color2);
- 结合前面两个函数的效果，让浅的更浅，深的更深，类似于ps中的“叠加”
- 第一个参数的叠加的对象，第二个参数是被叠加的颜色
softlight(@color1, @color2);
- 与overlay效果相似，只是当纯黑色和纯白色作为参数的时候输出结果不是纯黑纯白，对应ps中的“柔光”
- 第一个参数是混合色（光源），第二个参数是被混合的颜色
hardlight(@color1, @color2);
- 与overlay效果相似，不过由第二个颜色参数决定输出颜色的亮度或黑度，对应ps中的“强光/亮光/线性光/点光”
- 第一个参数是混合色（光源），第二个参数是被混合的颜色
difference(@color1, @color2);
- 从第一个颜色值中减去第二个，输出是更深的颜色，对应ps中的“差值/排除”
- 第一个参数是被减的颜色对象，第二个参数是减去的颜色对象
exclusion(@color1, @color2);
- 效果和difference函数效果相似，只是输出结果差别更小，ps中的“差值/排除”
- 第一个参数是被减的颜色对象，第二个参数是减去的颜色对象
average(@color1, @color2); //对RGB三种颜色取平均值
negation(@color1, @color2);
- 和difference函数效果相反，输出结果是更亮的颜色
- 注意：效果相反不代表做加法运算
- 第一个参数是被减的颜色对象，第二个参数是减去的颜色对象

判断函数

iscolor(@colorOrAnything); // 判断一个值是否是颜色
isnumber(@numberOrAnything); // 判断一个值是否是数字（可含单位）
isstring(@stringOrAnything); // 判断一个值是否是字符串
iskeyword(@keywordOrAnything); // 判断一个值是否是关键字
isurl(@urlOrAnything); // 判断一个值是否是url
ispixel(@pixelOrAnything); // 判断一个值是否是以px为单位的数值
ispercentage(@percentageOrAnything); // 判断一个值是否是百分数
isem(@emOrAnything); // 判断一个值是否是以em为单位的数值
* isunit(@numberOrAnything, "rem"); // 判断一个值是否是指定单位的数值

三、基础语法 ​

注释 ​

变量（variable） ​

Mixin混入 ​

类名混入 ​

函数混入 ​

带参数的函数混入 ​

嵌套 ​

Import（引用） ​

函数（内置函数和运算） ​

less中定义函数 ​

内置函数 ​

字符串函数 ​

综合类函数 ​

算数函数 ​

颜色函数 ​

颜色运算（Color operations） ​

颜色混合（Color blending） ​

判断函数 ​

三、基础语法

注释

变量（variable）

Mixin混入

类名混入

函数混入

带参数的函数混入

嵌套

Import（引用）

函数（内置函数和运算）

less中定义函数

内置函数

字符串函数

综合类函数

算数函数

颜色函数

颜色运算（Color operations）

颜色混合（Color blending）

判断函数