less开发常用知识点归纳

作者: alex夏夜 | 来源:发表于2018-07-04 18:27 被阅读67次

一：变量

1.1 变量概述：
变量通过为你提供在同一个地方管理这些值的方法让你的代码变得更容易维护：

// 变量
@link-color:        #428bca; // sea blue
@link-color-hover:  darken(@link-color, 10%);
// 用法
a,
.link {
  color: @link-color;
}
a:hover {
  color: @link-color-hover;
}

1.2 变量插值
这里面以URLs为例，多次导入同一URLs变得方便起来。

// Variables
@images: "../statc/imgs";

// Usage
body {
  color: #fff;
  background: url("@{images}/white-sand.png");
}

二：嵌套

Tip: 它模仿了 HTML 的结构，使代码看起来更加清晰和简洁。
例如：

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

这时，我们用嵌套的规则可以将其写成:

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

我们在嵌套中，可以用'&'表示父类：

.clearfix {
  display: block;
  &:after {
    content: " ";
  }
  &:hover {
    color : red;
  }
}

三：运算

Tip:任何数值，颜色和变量都可以进行运算。这里有一对示例:

@base: 5%;
@filler: @base * 2;   // 10%
@other: @base + @filler;   // 15%
color: #888 / 4 + #111;   // #333(遵循算术规则) // 除不尽的会四舍五入
@var: 1px + 5;   // 6px (如果在一个运算中使用了单位,less会在最终结果中使用这个单位).

四：Extend（继承）

4.1-Extend 是Less的伪类，他将所放置它的选择器与匹配引用的选择器进行合并。

.a{ 
  color: red;
}

.text { 
  background-color: #0d94f3;
  &:extend(.a);
  font-size: 12px;
}

将会输出

less1.png

在绑定的div内，会输出上面所有的样式。

4.2-Extend all 用法
看如下代码:

.a{
    background-color: #fff;
    &:extend(.b all);
    border-bottom: 2px;
}
.b{
    font-weight: 700;
    color: yellow;
}
.b:hover{
    font-size: 2em;
}

将会输出:

.a {
  background-color: #fff;
  border-bottom: 2px;
}
.b,
.a {
  font-weight: 700;
  color: yellow;
}
.b:hover,
.a:hover {
  font-size: 2em;
}

嵌套继承选择器：

.parentClass{
    span{
        color:red
    }
}
.subClassOne{
    &:extend(.parentClass span);
}

输出:

.parentClass span,
.subClassOne {
  color: red;
}

extend精确匹配特性（exactly matching）:

Less中，关键字extend里面的选择器必须与已定义的样式选择器严格一致，如div .a{}样式只能通过extend（div .a）继承，而不能是extend（.a）

重复问题：

.a{
  color: red;
}
.b{
  font-size: 20px;
}
.text {
  background-color: #0d94f3;
  &:extend(.a, .b);
}

输出：

less2.png

继承的使用情况:

extend的经典使用情况在于，用于减少基类的使用。
如：现在有个默认字体样式类baseStyle，此外有个与baseStyle稍有差别的类specialStyle。则使css较少的css与html分别可为：

css


.baseStyle{
    color:gray;
    font-weight:500;
}
.specialStyle{
    color:blue;

html

<p class="baseStyle">我是默认的段落样式</p>
<p class="baseStyle specialStyle">我是默认样式上加了特殊样式的段落</p>

而思路相同，却更好的做法是使用Less的继承：

.baseStyle{
    color:gray;
    font-weight:500;
}
.specialStyle:extend(.baseStyle){
    color:blue;
}

注意：
情况一：被继承的选择器在前面

编译结果，与预期一致，使用了自身的特殊color：
.parentClass{
    color:red;
}
.subClass{
    color:blue;
    &:extend(.parentClass);
    border:1px solid blue;
}

情况二:

因为位置原因，与预期不一致，此时此例中继承没达到目的：
.subClass{
    color:blue;
    &:extend(.parentClass);
    border:1px solid blue;
}
.parentClass{
    color:red;
}

五： Mixins(混合)

3.1-创建一个混合集：

.a, #b {
  color: red;
}
.mixin-class {
  .a();  // 这里也可以用 .a,效果于.a()相同
}
.mixin-id {
  #b(); // 同上
}
// 以下是输出：
.a, #b {
  color: red;
}
.mixin-class {
  color: red;
}
.mixin-id {
  color: red;
}

3.2-如果我们想创建一个混合集但是并不想让他输出到样式中，那么我门可以这样做：

.my-mixin {
  color: black;
}
// 在混合集的名字后面加上一个括号，将不会在样式中输出。
.my-other-mixin() {
  background: white;
}
.class {
  .my-mixin;
  .my-other-mixin;
}
// 以上的代码将会输出(没有了my-other-mixin())：

.my-mixin {
  color: black;
}
.class {
  color: black;
  background: white;
}

3.3-我们同样可以把选择器写在混合集中：

.my-hover-mixin() {
  &:hover {
    border: 1px solid red;
  }
}
button {
  .my-hover-mixin();
}

// 将会输出：
button:hover {
  border: 1px solid red;
}

3.4-现在想要将属性混合在比较复杂的选择器中，可以通过嵌套：

#outer {
  .inner {
    color: red;
  }
}

.c {
  #outer > .inner;
}
// 输出：
.c {
 color: red;
}

3.5- !important keyword(!improtant关键字的应用)
在调用的混合集后面追加 !important 关键字，可以使混合集里面的所有属性都继承 !important：

.foo (@bg: #f5f5f5, @color: #900) {
  background: @bg;
  color: @color;
}
.unimportant {
  .foo();
}
.important {
  .foo() !important;
}

输出将会是

.unimportant {
  background: #f5f5f5;
  color: #900;
}
.important {
  background: #f5f5f5 !important;
  color: #900 !important;
}

3.6-mixins也可以接受参数，在他进行minx in 操作时会将变量传递给选择器代码块.

.border-radius(@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
   border-radius: @radius;
}

接下来你可以在混入变量值：

#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}
// 这样是不是大幅度简化了重复的代码， 同样你可以给@radius设一个初值，之后直接引用就可以了。

3.7-带多个参数的mixins
定义多个具有相同名称和参数数量的mixins是合法的，Less会使用它可以应用的属性。

.mixin(@color) {
  color-1: @color;
}
.mixin(@color; @padding: 2) {
  color-2: @color;
  padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2) {
  color-3: @color;
  padding-3: @padding;
  margin: @margin @margin @margin @margin;
}

------------------以上是多个相同名称的mixins
.lucy {
  .mixin(#008000);
}
// 这时输出为：
.lucy  {
  color-1: #008000;
  color-2: #008000;
  padding-2: 2;
}
// 无法匹配第三个mixin，因为只有一个参数，而第三个的mixin的第二个参数@padding又没设置初值，所以无法匹配。
如果这时有两个参数：
.lucy {
  .mixin(#008000；3);
}
// 这是输出为：
    color-2: #008000;
    padding-2: 3;
    color-3: #008000;
    padding-3: 3;
    margin: 2 2 2 2;
// 第一个mixin直接不匹配，因为第一个只有一个参数。第二个@padding有初值，但是如果参数明确设定了值，那么就会覆盖这个初值。

3.8-命名参数
你是否会觉得上面的参数书写十分不便，很多时候还要遵循它的顺序来使用，那么现在，命名参数将很好的解决这个问题：

.mixin(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}
.class1 {
  .mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
  .mixin(#efca44; @padding: 40px);
}

将会编译为

.class1 {
  color: #33acfe;
  margin: 20px;
  padding: 20px;
}
.class2 {
  color: #efca44;
  margin: 10px;
  padding: 40px;
}

3.9-@arguments变量
或许你已经发现了，当参数比较多的情况下，如果还在这样一个一个处理参数，将会是一件浪费时间且没有意义的事情，那么@arguments就可以很好的解决这个问题，它包含了所有传入的参数.

.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
  -webkit-box-shadow: @arguments;
     -moz-box-shadow: @arguments;
          box-shadow: @arguments;
}
.big-block {
  .box-shadow(2px; 5px);
}

返回的结果为：

.big-block {
  -webkit-box-shadow: 2px 5px 1px #000;
     -moz-box-shadow: 2px 5px 1px #000;
          box-shadow: 2px 5px 1px #000;
}

是不是帮我们节约了很多不必要的操作呢。

3.10- arguments与@rest一起使用：
经过上面的改良，你是不是觉得，参数那一堆写的太多了，那有什么方法可以使我只写一个变量来包含这些参数呢，@rest与...，可以解决这个问题：

.mixin(...) {        // 匹配 0-N 个 arguments
.mixin() {           // 只能匹配 0 arguments
.mixin(@a: 1) {      // 匹配 0-1 arguments
.mixin(@a: 1; ...) { // 匹配 0-N arguments
.mixin(@a; ...) {    // 匹配 1-N arguments

那么我们之前的代码可以写成

.box-shadow(@rest...) {
  box-shadow: @arguments;
}
或者：
.box-shadow(...) {
  box-shadow: @arguments;
}
使用它：
.big-block {
  .box-shadow(2px; 3px; 1px ; #666);
}

输出结果为：

.big-block {
    box-shadow: 2px 5px 1px #666;
}

3.11-匹配模式
现在我想要mixin基于@switch的值以不同的方式表现，可以这样定义：

.mixin(dark; @color) {
  color: darken(@color, 10%);
}
.mixin(light; @color) {
  color: lighten(@color, 10%);
}
.mixin(@_; @color) {
  display: block;
}

现在我运行它：

.class {
  .mixin(light; #888);
}

我将得到如下的CSS:

.class {
  color: #a2a2a2;
  display: block;
}

这里发生了什么？
1.第一个mixin定义并没有匹配，因为它期望第一个参数是dark。
2.第二个mixin定义匹配了，因为它接受的参数是预期的light。
3.第三个mixin定义也匹配了，它是一个变量，任何值进来都会赋值给它,变量匹配的值与它自身相等（这个就可以用来做相同的公共的样式部分）。

同样的，我们除了可以用变量来匹配，我们也可以用参数的数量来匹配，下面给一个例子：

.mixin(@a) {
  color: @a;
}
.mixin(@a; @b) {
  color: fade(@a; @b);
}

显而易见：
1.如果我们用一个参数来调用.mixin，则将会输出第一个定义: color : @a;
2.如果我们使用两个参数，则会获取第二个定义：
实现@a淡入到@b。

3.12-Mixins作为函数使用

.mixin() {
  @width:  100%;
  @height: 200px;
}

.caller {
  .mixin();
  width:  @width;
  height: @height;
}

将会输出：

.caller {
  width:  100%;
  height: 200px;
}

我们还可以用mixin中定义的变量来充当它的返回值(return value):

.average(@x, @y) {
  @average: ((@x + @y) / 2);
}

div {
  .average(16px, 50px); // "call" the mixin
  padding: @average;    // use its "return" value
}

结果

div {
  padding: 33px;
}

导入准则

在标准的CSS中，@import必须在所有其他类型的规则之前。但是Less.js不在乎你把@import语句放在什么位置。

.foo {
  background: #900;
}
@import "this-is-valid.less";

六：Function(函数)

6.1-Misc Functions （杂项函数）

color

参数： string: 代表颜色值的字符串。

返回： color

示例： color("#aaa");

输出： #aaa

convert

第一个参数为带单位的数值，第二个参数为单位。如果两个参数的单位是兼容的，则数字的单位被转换。如果两个参数的单位不兼容，则原样返回第一个参数。
兼容的单位组:

长度: m, cm, mm, in, pt and pc,

时间: s and ms,

角度: rad, deg, grad and turn.

参数：

角度: rad, deg, grad and turn.

identifier, string 或 escaped value: 单位

返回: number

示例
convert(9s, "ms")
convert(14cm, mm)
convert(8, mm) // 不兼容的单位类型
输出:
9000ms
140mm
8

unit

移除或改变属性值的单位
参数：

dimension: 数字，带或不带单位。

unit: 可选参数，将要替换成的单位，如果省略则移除原单位。
示例：unit(5, px)
输出: 5px
示例: unit(5em)
输出: 5

get-unit

返回一个值的单位.
如果参数中包含了数字与单位，该函数就返回其单位。如果参数不包含单位，该函数就返回空。
参数：

number: 带单位或者不带单位的数字。
示例:number: 带单位或者不带单位的数字。
输出:px
示例：get-unit(5)
输出：//nothing

6.2-String Functions （字符串函数）

e （预判函数）

Css 转义, 用~"值" 符号代替。
他认为字符串是一个参数返回不带引号的原内容。这可以用来输出一些Less并不认可的Css值，包括未验证的Css语法或者一个专有的语法。
参数： string - 用来转义的字符串。
返回： string - 不带引号的转义字符串。

示例：
width: calc(~'50% - 10px');

replace （替换)

用另一个字符串替换文本.

参数：

string: 搜索和替换用的字符串.

pattern:一个字符串或者能搜索的正则表达式.

replacement: 匹配模式成功的替换字符串.

flags: (可选的) 正则表达式匹配标识（全匹配还是...）

返回：替换过值后的字符串.
示例:
replace("Hello, Mars?", "Mars\?", "Earth!");
replace("One + one = 4", "one", "2", "gi");
replace('This is a string.', "(string)\.$", "new $1.");
replace(~"bar-1", '1', '2');
结果：
"Hello, Earth!";
"2 + 2 = 4";
'This is a new string.';
bar-2;

6.3-List Functions （列表函数）

length (长度)

返回集合中的值的数目.
参数：list - 逗号或者空格隔开的值集合。返回：集合的值个数。
示例：length(1px solid #0080ff); 输出： 3
示例:
@list: 1px, solid, red
n: length(@list)
输出
n: 4;

extract (提取)

返回集合中指定索引的值。
参数： list - 逗号或者空格隔开的值集合。 index - 用于返回集合中指定位置值的整型数字。返回：集合指定位置处的值。
示例：extract(8px dotted red, 2); 输出： dotted
示例：
@list: 1px, solid, red;
value: extract(@list, 3);
输出:
value: red

6.4-Math Functions （数学函数）

ceil

向上取整
参数： number - 浮点数。
返回： integer
示例： ceil(2.4)
输出： 3

floor

向下取整
参数： number - 浮点数。
返回： integer
示例： floor(2.6)
输出： 2

percentage

将浮点数转换为百分比字符串。
参数： number - 浮点数。
返回： string
示例： percentage(0.5)
输出： 50%

round

取整数
参数：

number：浮点数。

decimalPlaces：可选参数，四舍五入取整的小数点位置，默认值为0。
返回： number
示例： round(1.67)
输出： 2
示例： round(1.67, 1)
输出： 1.7

sqrt

计算一个数的平方根，原样保持单位。
参数： number - 浮点数。
返回： number
示例：
sqrt(25cm)
输出：5cm
sqrt(18.6%)
输出：4.312771730569565%

abs

计算数字的绝对值，原样保持单位。
参数： number - 浮点数。
返回： number
示例 #1： abs(25cm)
输出： 25cm
示例 #2： abs(-18.6%)
输出： 18.6%;

sin

正弦函数。
处理时会将没有单位的数字认为是弧度值。
参数： number - 浮点数。
返回： number
sin(1); // 1弧度角的正弦值
sin(1deg); // 1角度角的正弦值
sin(1grad); // 1百分度角的正弦值
输出"
0.8414709848078965; // 1弧度角的正弦值
0.01745240643728351; // 1角度角的正弦值
0.015707317311820675; // 1百分度角的正弦值
类似用法的还有：

asin 反正弦函数。

cos 余弦函数。acos 反余弦函数。

tan 正切函数。atan 反正切函数。

pi

返回 π (pi);
示例：
pi()
输出：
3.141592653589793

pow

乘方运算。
假设第一个参数为A，第二个参数为B，返回A的B次方。返回值与A有相同单位，B的单位被忽略。
参数：

number：基数 - 浮点数。

number：冪指数 - 浮点数。
返回： number
示例:
pow(0cm, 0px)
pow(25, -2)
pow(25, 0.5)
pow(-25, 0.5)
pow(-25%, -0.5)
输出:
1cm
0.0016
5
NaN
NaN%

mod

取余运算。
假设第一个参数为A，第二个参数为B，返回A对B取余的结果。返回值与A有相同单位，B的单位被忽略。这个函数也可以处理负数和浮点数.
参数：

number：浮点数。

number：浮点数。
返回：number
示例：
mod(0cm, 0px)
mod(11cm, 6px);
mod(-26%, -5);
输出：
NaNcm;
5cm
-1%;

min

最小值运算。
参数： value1, ..., valueN - 一个或多个待比较的值。
返回：最小值。
示例： min(5, 10);
输出： 5
示例： min(3px, 42px, 1px, 16px);
输出： 1px
同理还有max最大值运算，规则同上。

6.5-Type Functions （类型函数）

isnumber

参数： value - 待判断的值或变量.
返回：若是数字返回真true,否则假false.
示例：
isnumber(#ff0);     // false
isnumber(blue);     // false
isnumber("string"); // false
isnumber(1234);     // true
isnumber(56px);     // true
isnumber(7.8%);     // true
isnumber(keyword);  // false
isnumber(url(...)); // false
同理还有：
isstring：如果一个值是一个字符串，返回'真(true)',否则返回'假(false)'.

iscolor：如果一个值是一个颜色，返回'真(true)',否则返回'假(false)'.

isurl：如果一个值是一个url地址，返回'真(true)',否则返回'假(false)'.

ispixel：如果一个值是带像素长度单位的数字，返回'真(true)',否则返回'假(false)'.
isem: 如果一个值是带em长度单位的数字，返回'真(true)',否则返回'假(false)'.

ispercentage:如果一个值是带百分比单位的数字，返回'真(true)',否则返回'假(false)'.

isunit
如果一个值是带指定单位的数字，返回'真(true)',否则返回'假(false)'.
参数：

value - 待判断的值或变量.

unit - 用于测试比较的一个单位标示符.
参数

value - 待判断的值或变量.

unit - 用于测试比较的一个单位标示符.
返回: 若是带指定单位的数字返回真true,否则假false.
例如:
isunit(11px, px);  // true
isunit(2.2%, px);  // false
isruleset
如果值是一个规则集合，返回'真(true)',否则返回'假(false)'。
参数:

value - 待判断的值或变量。
示例:
@rules: {
  color: red;
}
isruleset(@rules);   // true
isruleset(#ff0);     // false
isruleset(blue);     // false
isruleset("string"); // false

6.6-Color Definition Functions （颜色定义函数）

rgb

返回值：颜色(color)
例如：rgb(90, 129, 32)
输出： #5a8120

rgba

通过十进制红色，绿色，蓝色，以及 alpha 四种值 (RGBA) 创建带alpha透明的颜色对象。
此外还有：

hsl,hsla
通过色相 (hue)，饱和度 (saturation)，亮度 (lightness) 三种值 (HSL) 创建颜色对象。

hsv,hsva
通过色相 (hue)，饱和度 (saturation)，色调 (value)，以及 alpha 四种值 (HSVA) 创建透明的颜色对象。

6.7-Color Channel Functions （颜色通道函数）

hue

从HSL色彩空间中提取颜色对象的色相值。
例如:hue(hsl(90, 100%, 50%))
输出： 90

saturation

从HSL色彩空间中提取颜色对象的饱和度值。

lightness

从HSL色彩空间中提取颜色对象的亮度值.

hsvhue

从HSV色彩空间中提取颜色对象的色相值。

hsvsaturation

从HSV色彩空间中提取颜色对象的饱和度值。

hsvvalue

从色彩空间中提取颜色对象的色调值。

red

提取颜色对象的红色值。
参数： @color - 颜色对象(a color object)
返回值：整数 0-255
例如： red(rgb(10, 20, 30))
输出： 10

green

提取颜色对象的绿色值。
参数： @color - 颜色对象(a color object)
返回值：整数 0-255
例如： green(rgb(10, 20, 30))
输出： 20

blue

提取颜色对象的蓝色值。
参数： @color - 颜色对象(a color object)
返回值：整数 0-255
例如： blue(rgb(10, 20, 30))
输出： 30

alpha

提取颜色对象的透明度值。
参数： @color - 颜色对象(a color object)
返回值：浮点数 0-1
例如： alpha(rgba(10, 20, 30, 0.5))
输出： 0.5

6.8-Color Operation Functions （颜色操作函数）

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

saturate

desaturate

增加/降低一定数值的颜色饱和度。
参数：

@color: 颜色对象(A color object)

@amount: 百分比 0-100%
返回： color
saturate(hsl(90, 80%, 50%), 20%) // 以saturate为例
'#80ff00' // hsl(90, 100%, 50%)

lighten

darken

增加/降低一定数值的颜色亮度。
参数：

color: 颜色对象.

amount: 一个百分比 0-100%.
示例： lighten(hsl(90, 80%, 50%), 20%) // 以lighten为例
输出： #b3f075 // hsl(90, 80%, 70%)

fadein

降低颜色的透明度（或增加不透明度），令其更不透明。
参数：

color: 颜色对象(A color object)

amount: 百分比 0-100%
返回： color
示例： fadein(hsla(90, 90%, 50%, 0.5), 10%)
输出： rgba(128, 242, 13, 0.6) // hsla(90, 90%, 50%, 0.6)

fadeout

增加颜色的透明度（或降低不透明度），令其更透明。对不透明的颜色无效。如果要增加颜色的透明度，使用fadein() 函数。
参数：

color: 颜色对象(A color object)

amount: 百分比 0-100%
返回： color
示例： fadeout(hsla(90, 90%, 50%, 0.5), 10%)
输出： rgba(128, 242, 13, 0.4) // hsla(90, 90%, 50%, 0.4)

fade

给颜色（包括不透明的颜色）设定一定数值的透明度。
参数：

color: 颜色对象(A color object)

amount: 百分比 0-100%
返回： color
示例： fade(hsl(90, 90%, 50%), 10%)
输出： rgba(128, 242, 13, 0.1) //hsla(90, 90%, 50%, 0.1)

mix

根据比例混合两种颜色，包括计算不透明度。
参数：

color1: 一个颜色对象.

color2: 一个颜色对象.

weight: 可选项：平衡两种颜色的百分比, 默认 50%。
返回： color
示例：
mix(#ff0000, #0000ff, 50%)
mix(rgba(100,0,0,1.0), >rgba(0,100,0,0.5), 50%)
输出：两种颜色混合后的颜色

greyscale

完全移除颜色的饱和度，与 desaturate(@color, 100%) 函数效果相同。

七：Merge(合并)

merge特性可以从多个属性中将值集合集合到一个单一属性之下的逗号或空格分割属性列表中。对于诸如background和transform之类的属性来说，merge非常有用.
示例：

.mixin() {
  border+_: 1px;
}
.text {
  .mixin();
  background-color: #0d94f3;
  color: white;
  border+_: salmon solid;
}

输出:

less3.png

为避免任何非有意的添加，merge需要在每个待加入的声明中显示的设置一个+或者+_标记。
注意：尽管transform规范中属性使用空格分割，但它仍然支持使用逗号分割；这也是为什么这个特性中没有选项来配置用空格还是逗号分割的原因。('+' 添加为 ',')

八: 父级选择器

使用&引用父选择器

.a {
  color: blue;
  &:hover {
    color: green;
  }
}

输出结果：

a {
  color: blue;
}

a:hover {
  color: green;
}

一个使用&的典型场景就是生成重复的类名:

.text {
  &-ok {
    background-image: url("ok.png");
  }
  &-cancel {
    background-image: url("cancel.png");
  }

  &-custom {
    background-image: url("custom.png");
  }
}

输出：

.text-ok {
  background-image: url("ok.png");
}
.text-cancel {
  background-image: url("cancel.png");
}
.text-custom {
  background-image: url("custom.png");
}