1.Less 嵌套规则
.container{
h1{
font-size: 25px;
color:#E45456;
}
p{
font-size: 25px;
color:#3C7949;
}
}
.container h1 {
font-size: 25px;
color: #E45456;
}
.container p {
font-size: 25px;
color: #3C7949;
}
2.Less 操作
@fontSize: 10px;
.myclass {
font-size: @fontSize * 2;
color:green;
}
.myclass {
font-size: 20px;
color: green;
}
3.Less 转义
它动态构建选择器,并使用属性或变量值作为任意字符串。写法:~"xxx" 输出 xxx ,js语言为\
4.Less 函数
LESS映射具有值操作的JavaScript代码,并使用预定义的函数来操纵样式表中的HTML元素。 它提供了操作颜色的几个功能,如圆函数,floor函数,ceil函数,百分比函数等。
5.Less 变量范围
变量范围指定可用变量的位置。 变量将从本地作用域搜索,如果它们不可用,则编译器将从父作用域搜索。
@var: @a;
@a: 15px;
.myclass {
font-size: @var;
@a:20px;
color: green;
}
.myclass {
font-size: 20px;
color: green;
}
6.Less 注释
注释与JS语言一样
7.Less 导入
@import "xxx.less";
8.Less 变量
LESS允许使用 @ 符号定义变量。 变量分配使用冒号(:)完成。
LESS中声明变量的格式为“@变量名:变量值”。
Less 选择器:
@selector: h2;
@{selector} {
background: #2ECCFA;
}
Less URL:
@images: "http://www.w3cschool.cn";
.myclass {
background : url("@{images}/less/images/less_variables/birds.jpg");
width:800px;
height:500px;
}
Less Import语句
@path : "//www.w3cschool.cn/less";
@import "@{path}/external1.less";
.myclass{
color : #A52A2A;
}
Less 变量插值属性
@my-property: color;
.myclass {
background-@{my-property}: #81F7D8;
}
Less 变量名称
.myclass{
@col: #ca428b;
@color: "col";
background-color: @@color;
}
Less 变量延迟加载
p {
font-size: @a;
color: #ca428b;
}
@a: @b;
@b: 25px;
9.Less 扩展
Extend是一个LESS伪类,它通过使用:extend 选择器在一个选择器中扩展其他选择器样式。
第一种:会将本身的选择器加到扩展的类后面,相当于给本身加上扩展的类一样的样式
h2 {
&:extend(.style);
font-style: italic;
}
.style {
background: green;
}
结果:
h2 {
font-style: italic;
}
.style,
h2 {
background: green;
}
第二种:在本身加上扩展的类的样式
.style:extend(.container, .img)
{
background: #BF70A5;
}
.container {
font-style: italic;
}
.img{
font-size: 30px;
}
结果:
.style {
background: #BF70A5;
}
.container,
.style {
font-style: italic;
}
.img,
.style {
font-size: 30px;
}
LESS 完全匹配与扩展:默认情况下, extend 查找选择器之间的完全匹配。 对于具有相同含义的两个第n个表达式,扩展无关紧要,但它只寻找与为选择器匹配定义的相同的顺序形式
.style h3,
h3.style{
color: #BF70A5;
font-style: italic;
}
.img:extend(.style h3){}
结果:
.style h3,
h3.style,
.img {
color: #BF70A5;
font-style: italic;
}
extend扩展不识别单引号和单引号,结果是三种后面都被扩展了
[title=tutorialspoint] {
font-style: italic;
}
[title='tutorialspoint'] {
font-style: italic;
}
[title="tutorialspoint"] {
font-style: italic;
}
.style:extend([title=tutorialspoint]) {}
.container:extend([title='tutorialspoint']) {}
.img:extend([title="tutorialspoint"]) {}
LESS 扩展“all”
当最后在扩展参数中标识关键字 all 时,LESS将该选择器作为另一个选择器的一部分。 匹配的选择器部分将被extend替换,形成一个新的选择器。
.style.nav,
.nav h3 {
color: orange;
}
.nav {
&:hover {
color: green;
}
}
.container:extend(.nav all) {}
结果:将扩展的部分对应的替换为现在
.style.nav,
.nav h3,
.style.container,
.container h3 {
color: orange;
}
.nav:hover,
.container:hover {
color: green;
}
LESS 选择器插值扩展
@ {variable} 符号用作变量名,id和类名的一部分。 扩展不具有使选择器与变量匹配的能力。 扩展可以连接到内插选择器。
.style {
color: #BF70A5;
font-style: italic;
}
@{variable}:extend(.style) {}
@variable: .selector;
结果:
.style,
.selector {
color: #BF70A5;
font-style: italic;
}
LESS @media内部作用域/扩展
在媒体声明中,应写入extend。 该扩展匹配仅在同一媒体声明内存在的选择器。 在媒体声明中存在的扩展与嵌套声明中存在的选择器不匹配。
@media screen {
.style {
width:500px;
}
@media (min-width: 1023px) {
.style {
width:500px;
}
}
}
.cont:extend(.style) {}
结果:作用到@media内部
@media screen {
.style,
.cont {
width: 500px;
}
}
@media screen and (min-width: 1023px) {
.style,
.cont {
width: 500px;
}
}