目录
Less简介
Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展,Less文件需要经过预处理器编译成为CSS。
Less新增功能
变量-Variables
在样式中,重复的运用的参数,可以通过变量传递,更方便。
@myColor: red;
@myWidth: 10px;
#myBox {
color: @myColor; //red
width: @myWidth; //10px
}
混合-Mixins
混合(Mixin)是一种将一组属性从一个规则集包含(或混入)到另一个规则集的方法。
//定义一个类
.myBorder{
border-top: solid 1px black;
border-left: solid 1px red;
}
//在另一个样式中使用
#header{
background-color: #111;
.myBorder(); //调用
}
嵌套-Nesting
Less 提供了使用嵌套(nesting)代替层叠或与层叠结合使用的能力。
//父元素
#header{
color: red;
//子元素
#box{
width: 10px;
height: 20px;
}
}
//————css这样写————————
#header{
color: red;
}
#header #box{
width: 10px;
height: 20px;
}
@规则嵌套和冒泡
@ 规则(例如@media 或 @supports)可以与选择器以相同的方式进行嵌套。@ 规则会被放在前面,同一规则集中的其它元素的相对顺序保持不变。这叫做冒泡(bubbling)。
.component {
width: 300px;
@media (min-width: 768px) {
width: 600px;
@media (min-resolution: 192dpi) {
background-image: url(/img/retina2x.png);
}
}
@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 {
width: 800px;
}
}
运算-Operations
算术运算符 +
、-
、*
、/
可以对任何数字、颜色或变量进行运算。
算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义,则忽略单位。无效的单位换算例如:px 到 cm 或 rad 到 % 的转换。
// 所有操作数被转换成相同的单位
@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%
//乘法和除法不作转换
@base: 2cm * 3mm; // 结果是 6cm
//对颜色进行算术运算
@color: (#224488 / 2); // 结果是 #112244
background-color: #112244 + #111; // 结果是 #223355
转义-Escaping
转义允许使用任意字符串作为属性或变量值,除非 interpolation。
@min768: ~"(min-width: 768px)";//从less3.5之后,引号可省略。
.element {
@media @min768 {
font-size: 1.2rem;
}
}
//——————编译为——————
@media (min-width: 768px) {
.element {
font-size: 1.2rem;
}
}
函数-Functions
Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。这些函数在Less 函数手册中有详细介绍。
@base: #f04615;
@width: 0.5;
.class {
width: percentage(@width); // returns `50%`
color: saturate(@base, 5%);
background-color: spin(lighten(@base, 25%), 8);
}
命名空间和访问符
为了提供一些封装的目的,对混合(mixins)进行分组。
#bundle() {
.button {
display: block;
border: 1px solid black;
background-color: grey;
&:hover {
background-color: white;
}
}
.tab { ... }
.citation { ... }
}
//——————这样写——————
#header a {
color: orange;
#bundle.button(); // 还可以书写为 #bundle > .button 形式
}
如果不希望它们出现在输出的 CSS 中,例如 #bundle .tab
,请将 ()
附加到命名空间(例如 #bundle()
)后面。
映射-Maps
从 Less 3.5 版本开始,可以将混合(mixins)和规则集(rulesets)作为一组值的映射(map)使用。
#colors() {
primary: blue;
secondary: green;
}
.button {
color: #colors[primary];
border: 1px solid #colors[secondary];
}
//——————编译成——————
.button {
color: blue;
border: 1px solid green;
}
作用域-Scope
Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合(mixins),如果找不到,则从“父”级作用域继承。
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
注释-Comments
单行注释//,多行注释/* */
/* 一个块注释
* style comment! */
@var: red;
// 这一行被注释掉了!
@var: white;
导入-Importing
可以导入一个 .less
文件,此文件中的所有变量就可以全部使用了。如果导入的文件是 .less
扩展名,则可以将扩展名省略掉;也可以赋予一个新参数。
import "library"; // library.less
import "typo.css";
import styles from "myless";
此文章参考的文章链接在这里: