Less
三种方式引用less
- 浏览器引用 less.js
Link type=”text/lesss - node中使用
- lesssc less.less
- lessc less.less css.css
- lessc less.less css.css –clean-css
工程中使用
- 在file watch 中添加 less
变量 @key:value
- value 通常带单位, 单位运算的时候会保留的
- &:选择器中访问当前选择器
条件语句
在js中,条件语句中 可以使用 if,else,switch定义,Less中语句中跟Switch中case比较像。
Less 没有像js中这样的关键字,但是也提供了类似的方法,使用 when 以及 and not 关键字
比较运算符号,less都支持
> 表示大于
> 表示小于
>= 表示大于等于
<- 表示小于等于
= 表示等于
注意比较时候,参量值不要带单位。
同时js中的逻辑运算符号,比喻与或关系,需要使用and 以及 not关键字。
.size(@w,@h) {
width: @w;
height: @h;
background: red;
}
// when with great than 200px background id green
.size(@w,@h) when (@w>200) {
background: green;
}
// when width great than 200 and less than 500 background id orange
.size(@w,@h) when (@w>200) and (@w<500) {
background: orange;
}
// when width not less or equal 400 background pink
.size(@w,@h) when not (@w <=400) {
background: pink;
}
div {
margin: 20px;
}
.section-1 {
.size(200px, 100px)
}
.section-2 {
.size(300px, 100px)
}
.section-3 {
.size(450px, 100px)
}
内置方法
Less中内置了一些方法,让我们操作数据更加方便。
数学方法
运算:在less中支持运算的,但是css中大多刷都是带单位的,less在计算中支持带单位的计算,并且在单位不统一的时候,会对单位进行换算。但是有一定的规则:
- 加减法:以第一个数据的单位作为基准,
- 乘法:也就第一个数字的单位
- 除法:保留被除数的单位
鉴于此,乘除法尽量只出现一个单位,避免混淆。
Less与js类似的一点,也支持取整,对于数字取整来说,统共有一下方法:
ceil 向上取整
floor 向下取整
round 四舍五入
同时less还允许带单位。
percentage 方法,将数组转换为百分比。(不常用)
max,min等方法也是支持的。并且允许带单位,同时结果单位以选中的结果单位为准,
## 色彩方法
- 色彩的创建方法
- 色彩通道方法
- 色彩的操作方法
色彩的混合方法
色彩的创建方法
根据色彩模式提出的
RGB(red,green,blue)
- red : 表示红色通道 0-255 or 0-100%
- green : 表示绿色通道 0-255 or 0-100%
- blue : 表示蓝色通道 0-255 or 0-100%
RGBA(red,green,blue,alpha)
- red : 表示红色通道 0-255 or 0-100%
- green : 表示绿色通道 0-255 or 0-100%
- blue : 表示蓝色通道 0-255 or 0-100%
- alpha:表示透明度通道0-1 or 0-100%
HSL(hue,saturation,lightness)
- hue : 表示色相 0-360
- saturation : 表示饱和度 0-1 or 0-100%
- lightness : 表示亮度 0-1 or 0-100%
色彩通道方法
- RGBA 模式的颜色有四哥通道,红色绿色蓝色以及alpha构成。因此Less提供了一下方法用于获取四个通道的数值。
- red 获得红色通道
- green 获得绿色通道
- blue 获得蓝色通道
- alpha 获得透明度
- red 获得红色通道
- HSL模式提供了相对应获取色相饱和度亮度的通道。
- hue 获得色相
- saturation 获得饱和度通道
- ligntness 获得亮度通道
// less
@primary-color: #d9d9d9;
.dd {
width:red(@primary-color)
}
// css
.dd {
width: 217;
}
色彩操作方法
Less提供了简单的方法用来操作颜色。如下:
- fadein 相对调高透明度
- fadeout 相对调低透明度
- fade 绝对 调整透明度到某一个值
// less
@color: #aaaaaa;
.dd {
background-color: @color;
&div {
color: fade(@color, 30%);
}
}
//css
.dd {
background-color: #aaaaaa;
}
.dd.dddiv {
color: rgba(170, 170, 170, 0.3);
}
同时HSL 模式下,饱和度以及亮度都是可以调节的,LESS 提供相应的方法。
- saturate 调高饱和度
- desaturate 调低饱和度
- lighten 提高亮度
- darken 降低饱和度
色彩混合
less 提供了混合色彩的方法,将两个颜色进行混合
mix(color1,color2,weight)
// less
@color1: #112233;
@color2: #332211;
.dd {
background-color: @color1;
color: @color2;
&&li {
background-color: mix(@color1, @color2);
}
}
// css
.dd {
background-color: #112233;
color: #332211;
}
.dd.ddli {
background-color: #222222;
}
避免编译
less 会将自己识别出的语法进行编译,但是有时我们不需要对某一些语法进行编译,LESS 提供了避免编译的方法。
ddd {
width: calc(300px-30px);
}
//会被编译为
ddd {
width: calc(270px);
}
为了避免这种情况发生,可以在表达式中加入波折号,并将表达式用单双引号引起来
ddd {
width: `'calc(300px-30px)';
}
//会被编译为
ddd {
width: calc(300px-30px);
}