less语法总结
嵌套
Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
// 上面的代码等同于css中的代码，通过lessc编译出来
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
- @规则嵌套和冒泡
@ 规则（例如 @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;
}
}
会被编译为css：
.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;
}
}
嵌套的@规则会被and 连接起来
变量的使用
通过变量，可以省去很多重复赋值的过程，直接调用相关的变量就行，方便快捷。
- 作为属性名
// 变量
@property: color;
// 使用
.widget {
@{
property}: #0ee;
background-@{
property}: #999;
}
/* 编译结果
.widget {
color: #0ee;
background-color: #999;
}
*/
- 作为属性值
/* 定义两个变量，分别表示宽高，语法格式：@变量名:变量值*/
@width: 10px;
@height: @width+20px;
#header {
width: @width;
height: @height;
}
/*
编译之后：
#header {
width: 10px;
height: 30px;
}
*/
- 放在选择器中
// 变量
@my-selector:banner;
// 作为选择器名使用
.@{
my-selector}{
font-weight: bold;
}
/* 编译结果
.banner {
font-weight: bold;
}
*/
- 放在url中
// 变量
@images: "../img";
// 使用
body {
color: #444;
background: url("@{images}/white-sand.png");
}
- 导入@import中使用
// 变量
@themes: "../../src/themes";
// 使用
@import "@{
themes}/tidal-wave.less";
/*
编译结果
@import "../../src/themes/tidal-wave.less";
*/
- 变量的嵌套使用
// 定义两个外部变量
@primary: green;
@secondary: blue;
.section {
@color: primary; // 将一个外部变量的名作为内部变量的值
.element {
color: @@color; // 第一个@表示@@color得到primary，第二个@表示@primary得到green
}
}
/*编译结果
.section .element {
color: green;
}
*/
- 变量的惰性求值
简单来说就是无论你的变量再使用前声明的还是使用后声明的，都不会影响到变量的正常使用
@width: 100px;
.lazy-eval {
width: @width;
height: @height;
}
@height: 100px;
- 当多次声明赋值同一个变量时
@var: 0;
.class {
@var: 1;
.brass {
@var: 2;
three: @var;
@var: 3;
}
one: @var;
}
/* 编译结果：
.class {
one: 1;
}
.class .brass {
three: 3;
}
*/
- 引用定义好的属性名
通过$进行内部属性名的调用
.block {
color: red;
.inner {
background-color: $color;
color: pink;
}
color: blue;
}
/**编译结果
.block {
color: red;
color: blue;
}
.block .inner {
background-color: pink;
color: pink;
}
**/
.block {
color: red;
.inner {
background-color: $color;
}
color: blue;
}
/*
编译结果：
.block {
color: red;
color: blue;
}
.block .inner {
background-color: blue;
}
*/
父选择器&
&操作符表示嵌套规则的父选择器，在将修改类或伪类应用于现有选择器时最常用:
- 添加伪类
a {
color: blue;
&:hover {
color: green;
}
}
/*
a {
color: blue;
}
a:hover {
color: green;
}
*/
- 生成多个类名
.button {
&-ok {
background-image: url("ok.png");
}
&-cancel {
background-image: url("cancel.png");
}
&-custom {
background-image: url("custom.png");
}
}
/*
.button-ok {
background-image: url("ok.png");
}
.button-cancel {
background-image: url("cancel.png");
}
.button-custom {
background-image: url("custom.png");
}
*/
- 重复引用父选择器
&可以在选择器中出现多次。这使得重复引用父选择器
.link {
& + & {
color: red;
}
& & {
color: green;
}
&& {
color: blue;
}
&,
&ish {
color: cyan;
}
}
/* 编译结果
.link + .link {
color: red;
}
.link .link {
color: green;
}
.link.link {
color: blue;
}
.link,
.linkish {
color: cyan;
}
*/
注意&表示所有父选择器(不仅仅是最近的祖先)，例如
扫描二维码关注公众号，回复：
15539658 查看本文章
.grand {
.parent {
& > & {
color: red;
}
& & {
color: green;
}
&& {
color: blue;
}
&,
&ish {
color: cyan;
}
}
}
/*
编译结果：
.grand .parent > .grand .parent {
color: red;
}
.grand .parent .grand .parent {
color: green;
}
.grand .parent.grand .parent {
color: blue;
}
.grand .parent,
.grand .parentish {
color: cyan;
}
*/
- &也可用于在逗号分隔的列表中生成选择器的所有可能的排列
p, a, ul, li {
border-top: 2px dotted #366;
& + & {
border-top: 0;
}
}
/*
编译结果：
p,
a,
ul,
li {
border-top: 2px dotted #366;
}
p + p,
p + a,
p + ul,
p + li,
a + p,
a + a,
a + ul,
a + li,
ul + p,
ul + a,
ul + ul,
ul + li,
li + p,
li + a,
li + ul,
li + li {
border-top: 0;
}
*/
注释
less也分为单行注释//和多行注释/**/，其中多行注释会被lessc编译出来显示。
运算
算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换
// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm
// 无效的单位转换
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px
// 带着变量进行运算
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%
// 计算颜色
@color: (#224488 / 2); // 结果是 #112244
background-color: #112244 + #111; // 结果是 #223355
乘法和除法不作转换。因为这两种运算在大多数情况下都没有意义，一个长度乘以一个长度就得到一个区域，而 CSS 是不支持指定区域的。
转义
转义（Escaping）允许你使用任意字符串作为属性或变量值。任何 ~"anything" 或 ~'anything' 形式的内容都将按原样输出，除了 interpolation外。
@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;
}
}
继承
Extend是一个Less伪类，它将它所使用的选择器与它所引用的匹配的选择器合并在一起。语法：xxx:extend(selector)
nav ul {
&:extend(.inline);
background: blue;
}
.inline {
color: red;
}
/* 编译结果
nav ul {
background: blue;
}
.inline,
nav ul {
color: red;
}
*/
// ==========================================
.b {
color: red;
}
.a:extend(.b) {
}
/*
编译结果：
.b,
.a {
color: red;
}
*/
- 继承多个
// 扩展多个类
.f {
width: 100px;
}
.d {
height: 100px;
}
.e:extend(.f, .d) {
}
/*
编译结果：
.f,
.e {
width: 100px;
}
.d,
.e {
height: 100px;
}
*/
// =====================================
// 或者这样
div pre{
color:red;
}
.bucket tr{
width:100px;
}
pre:hover:extend(div pre):extend(.bucket tr) {
}
// 等同于
// pre:hover:extend(div pre, .bucket tr){
}
/*
编译结果：
div pre,
pre:hover {
color: red;
}
.bucket tr,
pre:hover {
width: 100px;
}
*/
合并
// 声明一个用于合并的样式
.mixin() {
box-shadow+: inset 0 0 10px #555;
}
.myclass {
/* 合并 */
.mixin();
box-shadow+: 0 0 20px black;
}
/*
结果：
.myclass {
box-shadow: inset 0 0 10px #555, 0 0 20px black;
}
*/
提交判断
使用when关键字进行判断，使用如下：
// 定义一个变量
@my-option: true;
// 这个是1.5版本之前的写法
.my-optional-style() when (@my-option = true) {
button {
color: white;
}
}
.my-optional-style();
// 这个是1.5版本之后的写法
button when (@my-option = true) {
color: white;
}
// 如果取得是相反的值
button when not (@my-option = true) {
property: value;
}
当然也可以通过if()函数来实现，这个后面再补充
混入
通过()实现混入，混入可以把已经出现过的样式进行复用，就不用重新写了，如下：
.a, #b {
color: red;
}
.mixin-class {
.a();
}
.mixin-id {
#b();
}
/*
.a, #b {
color: red;
}
.mixin-class {
color: red;
}
.mixin-id {
color: red;
}
*/
Mixins不仅可以包含属性，还可以包含选择器。
.my-hover-mixin() {
&:hover {
border: 1px solid red;
}
}
button {
.my-hover-mixin();
}
/*输出结果
button:hover {
border: 1px solid red;
}
*/
命名空间和访问符
通过#开启命名空间
#my-library {
.my-mixin() {
color: black;
}
}
.class {
/*通过命名空间调用混入*/
#my-library.my-mixin();
}
混入可以接收参数，使用如下：
/*这里相当于定义了一个函数（这样好理解）*/
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
// 使用参数混合
#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}
/*结果
.myclass {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.button {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
*/
同时，还可以为参数指定默认值：
.border-radius(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
此外，还可以通过@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;
}
*/
还可以@rest用于接收不定数量的参数：
.mixin(@rest...) {
}
.test {
.mixin(1,2,3,4);
}
在mixin调用后使用!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;
}
*/
混入的模式匹配
根据传入的参数来选择合适的混入
// 定义几个混入
.mixin(dark, @color) {
color: darken(@color, 10%);
}
.mixin(light, @color) {
color: lighten(@color, 10%);
}
.mixin(@_, @color) {
display: block;
}
// 定义一个切换混入的变量
@switch: light;
// 通过控制变量的取值来决定使用哪个混入
.class {
.mixin(@switch, #888);
}
@switch2:dark;
.class {
.mixin(@switch2,#100)
}
/*
结果：
.class {
color: #a2a2a2;
display: block;
}
.class {
color: #000000;
display: block;
}
*/
将混入当作函数一样使用【3.5版本以上】：
// 定义好一个带参数的混入：
.average(@x, @y) {
@result: ((@x + @y) / 2); // 定义一个参数接收计算结果
}
div {
padding: .average(16px, 50px)[@result]; // 调用
}
/*
结果：
div {
padding: 33px;
}
*/
搭配CSS Guard一起使用
// 下面代码的作用是循环输出指定次数的样式
.loop(@counter) when (@counter > 0) {
.loop((@counter - 1));
width: (10px * @counter);
}
div {
.loop(5); // 调用循环
}
/*
结果：
div {
width: 10px;
width: 20px;
width: 30px;
width: 40px;
width: 50px;
}
*/
再例如实现一个网格视图
.generate-columns(4);
.generate-columns(@n, @i: 1) when (@i =< @n) {
.column-@{
i} {
width: (@i * 100% / @n);
}
.generate-columns(@n, (@i + 1));
}
/*
输出结果：
.column-1 {
width: 25%;
}
.column-2 {
width: 50%;
}
.column-3 {
width: 75%;
}
.column-4 {
width: 100%;
}
*/
函数
less中函数很多，这里就只列举下几个好了，其他看【官网】
if(condition,value1,value2)
参数介绍：
condition：条件表达式
value1：如果条件表达式的返回值为真，那么结果为这个值
value2：如果条件表达式的返回值为假，那么结果为这个值
例如：
@some: foo;
div {
margin: if((2 > 1), 0, 3px);
color: if((iscolor(@some)), @some, black);
}
/*
div {
margin: 0;
color: black;
}
*/
- boolean(condiiton)
传入一个表达式，通常结合if()函数来使用，如下：
@bg: black;
/* 通过boolean(condition）定义一个条件表达式*/
@bg-light: boolean(luma(@bg) > 50%);
div {
background: @bg;
color: if(@bg-light, black, white);
}
/*
结果：
div {
background: black;
color: white;
}
*/
- lenght(list)
返回某个list列表的长度
@list: "banana", "tomato", "potato", "peach";
n: length(@list);
/*
结果：
n:4*/
- each(list,rules)
list:列表
rules:传入一个匿名规则集或者混入
@selectors: blue, green, red;
each(@selectors, {
.sel-@{
value} {
a: b;
}
});
/*结果：
.sel-blue {
a: b;
}
.sel-green {
a: b;
}
.sel-red {
a: b;
}
*/
还有一些关于数学运算、类型判断、图片大小获取、颜色计算的函数可以去研究官网，这里就不写了。
导入
引入文件
@import "foo.less"
Less为CSS @import CSS at-rule提供了几个扩展，以便在处理外部文件时提供更大的灵活性。
语法格式为：@import (keyword) "filename";
其中keyword的可选值有：
reference:引用less文件，但不会将他输出
Inline:在输出中包含源文件，但不处理它
less:将文件视为less文件，无论文件扩展名是什么
css:将文件视为css文件，无论文件扩展名是什么
Once:只包含文件一次(这是默认行为)
multiple:多次包含该文件
optional:当找不到文件时继续编译
可以同时使用多个keyword，如下：
@import (optional, reference) "foo.less";
# reference
@import(reference) "foo.less"
使用@ import(引用)导入外部文件,但没有将导入的样式添加到编译后的输出,除非引用。
# Inline
@import (Inline) "foo.less"
通常用于当CSS文件可能不兼容时，因为尽管Less支持大多数已知的CSS标准，
但它在某些地方不支持注释，并且在不修改CSS的情况下不支持所有已知的CSS hack。
# less
@import (less) "foo.css";
无论引入啥类型文件都当作less后缀的文件处理
#css
@import (css) "foo.less";
使用@import (css)将导入的文件视为常规css，而不考虑文件扩展名。这意味着import语句将保持原样。
# once
只会引入一次
@import (once) "foo.less";
@import (once) "foo.less"; // this statement will be ignored
# multiple
可以重复引入，例如：
// file: foo.less
.a {
color: green;
}
// file: main.less
@import (multiple) "foo.less";
@import (multiple) "foo.less";
#optional
使用@import(可选)来允许只在文件存在时才导入文件。
如果没有可选关键字，则Less会抛出FileError并在导入找不到的文件时停止编译。
Maps映射
// 映射
@sizes: {
mobile: 320px;
tablet: 768px;
desktop: 1024px;
}
.navbar {
display: block;
// 使用映射 @sizes[tablet]
@media (min-width: @sizes[tablet]) {
display: inline-block;
}
}
/*
结果：
.navbar {
display: block;
}
@media (min-width: 768px) {
.navbar {
display: inline-block;
}
}
*/
其他详细使用，请查阅【官网】