首先使用less来编写css样式,需要编译处理,有很多IDE都要自带的less插件或者是可以安装插件,这里我推荐一个轻量级的编译器Koala - LESS/Sass/Compass/CoffeeScript编译工具,使用就是
下面开始介绍Less的使用
-
变量
使用@定义需要重复的变量,然后在写css样式的时候就可以直接使用
@width: 10px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
}
-
混合(Mixins)
Mixins是一种将一组属性从一个规则集包含(“混入”)到另一个规则集中的方法。
定义:
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
使用:
#menu a {
color: #111;
.bordered();
}
.post a {
color: red;
.bordered();
}
在上面定义好需要重复使用的样式,就可以(.bordered();)来使用,注意不用少一点和后面的括号
-
嵌套
平时使用css来写样式,特别是多层包裹的样式
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
使用less的嵌套来写:
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
Nested At-Rules and Bubbling(在规则和冒泡中嵌套,可以嵌套实现响应式的适配);诸如@media
或者@supports
可以以与选择器相同的方式嵌套的规则。编译前:
.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;
}
}
这是经典的clearfix hack,重写为mixin:
.clearfix {
display: block;
zoom: 1;
&:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
}
注意:&:after(使用&可以嵌套伪类元素,&代表当前的选择器父级)
-
运算
Less的运算支持+
, -
, *
, /
来进行任何数量,颜色或可变的操作。数学运算会考虑单位并在添加,减去或比较数字之前转换数字。
不可能转换的示例:px到cm或rad到%。
// numbers are converted into the same units
@conversion-1: 5cm + 10mm; // result is 6cm
@conversion-2: 2 - 3cm - 5mm; // result is -1.5cm
// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // result is 4px
// example with variables
@base: 5%;
@filler: @base * 2; // result is 10%
@other: @base + @filler; // result is 15%
乘法和除法不转换数字。在大多数情况下它没有意义 - 长度乘以长度给出一个区域,而css不支持指定区域。Less将按原样对数字进行操作,并将明确说明的单位类型分配给结果
@base: 2cm * 3mm; // result is 6cm
也可以在颜色上进行arithemtic:
@color: #224488 / 2; //results in #112244
background-color: #112244 + #111; // result is #223355
-
Escaping
转义允许您使用任意字符串作为属性或变量值。内部的任何内容~"anything"或~'anything'按原样使用,除插值外没有任何变化。
编译前:
@min768: ~"(min-width: 768px)";
.element {
@media @min768 {
font-size: 1.2rem;
}
}
编译后:
@media (min-width: 768px) {
.element {
font-size: 1.2rem;
}
}
注意,从Less 3.5开始,您可以简单地写:
@min768: (min-width: 768px);
.element {
@media @min768 {
font-size: 1.2rem;
}
}
-
函数
Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。这些函数在函数手册中有详细介绍。
案例:将介绍如何利用 percentage 函数将 0.5 转换为 50%,将颜色饱和度增加 5%,以及颜色亮度降低 25% 并且色相值增加 8 等用法
@base: #f04615;
@width: 0.5;
.class {
width: percentage(@width); // returns `50%`
color: saturate(@base, 5%);
background-color: spin(lighten(@base, 25%), 8);
}
-
Namespaces and Accessors
有时,你可能希望将mixin分组,用于组织目的,或者仅提供一些封装。这就可以在Less中直观地做到这一点。假设你想捆绑一些mixins和变量#bundle,以便以后重用或分发:
#bundle() {
.button {
display: block;
border: 1px solid black;
background-color: grey;
&:hover {
background-color: white;
}
}
.tab { ... }
.citation { ... }
}
将.button混入#header a,可以这样做
#header a {
color: orange;
#bundle.button(); // can also be written as #bundle > .button
}
-
Maps
在less3.5,你可以用mixins和rulesets作为值的映射
#colors() {
primary: blue;
secondary: green;
}
.button {
color: #colors[primary];
border: 1px solid #colors[secondary];
}
输出:
.button {
color: blue;
border: 1px solid green;
}
-
作用域(Scope)
Less中的Scope与CSS的范围非常相似。变量和mixin首先在本地查找,如果找不到它们,它将继承自“父”范围。
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
与CSS自定义属性一样,mixin和变量定义不必放在引用它们的行之前。因此,以下Less代码与前一个示例相同:
@var: red;
#page {
#header {
color: @var; // white
}
@var: white;
}
懒加载:变量在使用之前不必声明。
-
注释(Comments)
块注释和行注释都可以使用:
/* 一个块注释
* style comment! */
@var: red;
// 这一行被注释掉了!
@var: white;
-
导入(Importing)
“导入”的工作方式和你预期的一样。你可以导入一个 .less
文件,此文件中的所有变量就可以全部使用了。如果导入的文件是 .less
扩展名,则可以将扩展名省略掉:
@import "library"; // library.less
@import "typo.css";