一、变量
声明变量用@
例:@width:100px;
width:@width
二、混合
想要在哪里使用这个元素的样式就在哪里使用 “选择器()”的方式使用
例:#one{font-size:28px}
div{#one()}
三、嵌套
在css中给子代设置样式的时候还要在前面写父级,但是less中可以将子级直接嵌套在父级
例:
css
#header { color: black; }
#header .navigation { font-size: 12px; }
less
#header .logo { width: 300px; }
#header { color: black;
.navigation { font-size: 12px; }
.logo { width: 300px; }
}
四、运算
算术运算符 +
、-
、*
、/
可以对任何数字、颜色或变量进行运算。
width:100px+200rem;
width:100px+10cm;
运算规则:
1.绝对单位和相对单位运算,以第一个的运算符单位为准
2.绝对单位和绝对单位(eg:cm),以实际为准
五、转义
允许变量的属性值是字符串
例:@min:~'(min-width:786px)'
六、命名空间访问符
一个父级元素有多个子级,想要使用其中一个的样式就可以使用命名空间 使用方法:父级选择器名子级选择器名()
例:#one{
.button{
color:'red'
}
.button2{color:blue
}
}
#one.button()
七、映射
使用一个元素中的一个属性
例:#one{
.button{
color:'red'
font-size:18px
}
使用:#one.button[color]
八、作用域
访问变量声明的一些属性,会现在当前作用域查找,找不到再向父级查找
九、注释
// 单行注释
/**/ 多行注释