less预处理的概念与使用

概念

less 官网 Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。

基本的使用

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

总览

1. 变量 @

变量是延迟加载的，不必在使用前声明。所以可以先使用，后定义。因此会出现后面定义的变量覆盖前面的变量

// Variables @link-color: #428bca; // sea blue @link-color-hover: darken(@link-color, 10%); // Usage a, .link { color: @link-color; } a:hover { color: @link-color-hover; } .widget { color: #fff; background: @link-color; }

2. 可变插值

// Variables @my-selector: banner; // Usage .@{my-selector} { font-weight: bold; line-height: 40px; margin: 0 auto; } //编译后 .banner { font-weight: bold; line-height: 40px; margin: 0 auto; }

3.混合（类似函数的使用）

.b-coloe { border: 4px solid red; } .box { .b-coloe(); width: 100px; height: 200px; background-color: blue; } //编译后 .b-coloe { border: 4px solid red; } .box { border: 4px solid red; width: 100px; height: 200px; background-color: blue; }

4.父选择器&

经典的清除浮动案例 .clearfix { display: block; zoom: 1; &:after { content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; } } //编译后 .clearfix { display: block; zoom: 1; } .clearfix:after { content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; }

5.嵌套的冒泡

思路：就近原则

.component { width: 300px; @media (min-width: 768px) { width: 600px; @media (min-resolution: 192dpi) { background-image: url(/img/retina2x.png); } } .box { @media (min-width: 1280px) { width: 800px; } } } //编译后 .component { width: 300px; } @media (min-width: 768px) { .component { width: 600px; } } @media (min-width: 768px) and (min-resolution: 192dpi) { .component { background-image: url(/img/retina2x.png); } } @media (min-width: 1280px) { .component .box { width: 800px; } }

6.运算（符合数学运算）

// 所有操作数被转换成相同的单位 @conversion-1: 5cm + 10mm; // 结果是 6cm @conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm // conversion is impossible @incompatible-units: 2 + 5px - 3cm; // 结果是 4px // example with variables @base: 5%; @filler: @base * 2; // 结果是 10% @other: @base + @filler; // 结果是 15%

calc() 特例 为了与 CSS 保持兼容，calc() 并不对数学表达式进行计算，但是在嵌套函数中会计算变量和数学公式的值。符号必须有空格

@var: 50vh/2; width: calc(50% + (@var - 20px)); // 结果是 calc(50% + (25vh - 20px))

转义符，原样输出 ~“anything” 或 ~‘anything’，可省略 ~

@min768: ~"(min-width: 768px)"; .element { @media @min768 { font-size: 1.2rem; } } 编译为： @media (min-width: 768px) { .element { font-size: 1.2rem; } }

7.函数

简单使用 @base: #f04615; @width: 0.5; .class { width: percentage(@width); // returns `50%` color: saturate(@base, 5%); background-color: spin(lighten(@base, 25%), 8); }