1. Less 变量
1.1 定义
@变量名: 值;
变量是延迟加载的，可以写在使用行的后面
1.2 命名规范
- 必须有
@为前缀 - 不能包含特殊字符
- 不能以数字开头
- 大小写敏感
@color: pink; /* 定义 */
body {
background-color: @color; /* 使用 */
}
特别地，如果自定义名和保留字、关键字一样，调用时注意加大括号：
@mydiv: div;
@{
mydiv} {
background-color: red;
}
编译后为：
div {
background-color: red;
}
2. Less 注释
/* XXXXX */：编译后可见注释// XXXX：编译后不可见注释
3. Less 嵌套
2.1 后代选择器
div {
width: 200px;
height: 200px;
background-color: pink;
/* 后代选择器 */
a {
color: red;
}
}
2.2 交集|伪类|伪元素选择器
- 内层选择器的前面没有
&符号，则他被解析为父选择器的后代 - 如果有
&符号，它就被解析为父元素自身或父元素的伪类
div {
/* 伪类选择器 */
&:hover {
color: blue;
}
/* 伪元素选择器 */
&::before {
content: "";
}
/* 交集选择器 */
&.font14{
font-size: 14;
}
/* 子选择器 */
&>a{
font-weight: 1000;
}
}
4. Less Mixins
Mixins 就是将一系列属性从一个规则集引入到另一个规则集的方式
4.1 普通 Mixins
.format{
float: left;
width: 200px;
height: 200px;
background-color: skyblue
}
div{
background-color: black;
.div1{
.format;
background-color: red;
}
.div2{
.format;
}
}
预编译后为：
.format {
float: left;
width: 200px;
height: 200px;
background-color: skyblue;
}
div {
background-color: black;
}
div .div1 {
float: left;
width: 200px;
height: 200px;
background-color: skyblue;
}
div .div2 {
float: left;
width: 200px;
height: 200px;
background-color: skyblue;
}
4.2 不带输出的 Mixins
上面的 Less 有个问题，.format 样式也被编译出来了，是多余的部分，解决方式如下：
.format(){
float: left;
width: 200px;
height: 200px;
background-color: skyblue
}
这样，这部分就不会预编译出来了
4.3 带参数的 Mixins
类似函数，可以传参，Less 代码如下：
.format(@w, @h, @c){
float: left;
width: @w;
height: @h;
background-color: @c
}
div{
background-color: black;
.div1{
.format(200px,200px,pink);
}
.div2{
.format(400px,400px,green);
}
}
预编译之后，CSS 文件如下：
div {
background-color: black;
}
div .div1 {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
div .div2 {
float: left;
width: 400px;
height: 400px;
background-color: green;
}
4.4 带有默认值的 Mixins
Less 代码如下：
.format(@w:200px, @h:200px, @c:green){
float: left;
width: @w;
height: @h;
background-color: @c
}
div{
background-color: black;
.div1{
.format();
}
.div2{
.format(400px,400px,red);
}
}
预编译的代码如下：
div {
background-color: black;
}
div .div1 {
float: left;
width: 200px;
height: 200px;
background-color: green;
}
div .div2 {
float: left;
width: 400px;
height: 400px;
background-color: red;
}
4.5 命名参数
当你想自定义的样式在默认值的后面，需要手动指定传参到哪个参数
.format(@w:200px, @h:200px, @c:green){
float: left;
width: @w;
height: @h;
background-color: @c
}
div{
background-color: black;
.div1{
.format(@c:blue);
}
.div2{
.format(@c:orange);
}
}
预编译之后的 CSS 代码如下：
div {
background-color: black;
}
div .div1 {
float: left;
width: 200px;
height: 200px;
background-color: blue;
}
div .div2 {
float: left;
width: 200px;
height: 200px;
background-color: orange;
}
4.6 匹配模式
例如画三角形，我想随我设定画的是哪个方向的，此时，第一个参数可以设置为标识符，只要每次传参会自动选择对应标识符的样式
特别地，为了避免冗余，要定义一个同名的样式，第一个参数必须是 @_，这样调用下面的样式时，默认会调用该样式里的设置
【triangle.less】
.triangle(@_,@w,@c){
// 此处参数必须与下面的一一兑对应，只是标识符换成 @_，否则无法匹配导致样式不生效
width: 0px;
height: 0px;
border-style: solid;
}
.triangle(T,@w,@c) {
border-width: @w;
border-color: @c transparent transparent transparent;
}
.triangle(R,@w,@c) {
border-width: @w;
border-color: transparent @c transparent transparent;
}
.triangle(B,@w,@c) {
border-width: @w;
border-color: transparent transparent @c transparent;
}
.triangle(L,@w,@c) {
border-width: @w;
border-color: transparent transparent transparent @c;
}
【test.less】
@import "./triangle.less";
#wrap>.sjx {
.triangle(R, 40px, blue)
}
【test.css】
#wrap > .sjx {
width: 0px;
height: 0px;
border-style: solid;
border-width: 40px;
border-color: transparent blue transparent transparent;
}
4.7 @arguments 变量
Less 代码
.border(@1,@2,@3){
border: @arguments;
}
#wrap>.sjx {
.border(1px,solid,blue)
}
CSS 代码
#wrap > .sjx {
border: 1px solid blue;
}
5. Less 运算
@border: 5px + 5; /* 单位以第一个操作数为准 */
- 运算符左右必须有空格
- 以第一个操作数的单位为准
+、-、*、/运算都可以
6. Less 继承
首先定义一个基类
.center{
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
.center:hover{
background-color: red!important; // 此处由于优先级问题，所以强制最高级
}
类名可以是多个类，如
.class1.class2
然后在 Less 中继承它
*{
margin: 0;
padding: 0;
}
@import "./center.less";
#wrap{
position: relative;
width: 300px;
height: 300px;
border: 1px solid;
margin: 0 auto;
.inner{
&:extend(.center all); // all 代表该类的伪类选择器也被继承，只继承一个的话 all 可以省略
&:nth-child(1){
width: 200px;
height: 200px;
background-color: pink;
}
&:nth-child(2){
width: 100px;
height: 100px;
background-color: skyblue;
}
}
}
编译后的结果为
* {
margin: 0;
padding: 0;
}
.center,
#wrap .inner {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
.center:hover,
#wrap .inner:hover {
background-color: red!important;
}
#wrap {
position: relative;
width: 300px;
height: 300px;
border: 1px solid;
margin: 0 auto;
}
#wrap .inner:nth-child(1) {
width: 200px;
height: 200px;
background-color: pink;
}
#wrap .inner:nth-child(2) {
width: 100px;
height: 100px;
background-color: skyblue;
}
7. Less 避免编译
使用 ~"cacl(100px + 100)" 这种形式强制 Less 不编译， CSS 仍保留 cacl(100px + 100)
Less 文件：
div {
margin: ~"100% - 10px" 100% - 10px;
}
CSS 文件：
div {
margin: 100% - 10px 90%;
}