变量及映射
@primary-color: white;
#colors() {
primary: pink;
danger: red;
warning: orange;
}
// 变量及映射的使用
.div {
color: @primary-color;
background-color: #colors[primary];
}
混合
参数可以用,
分隔也可以用;
分隔,但是使用方案的时候不能用;
分隔
/* 类似函数重载,根据传的参数的数量使用不同的函数 */
.theme(@color,@bg) {
color: @color;
background: @bg;
}
.theme(@fontSize) {
font-size: @fontSize;
}
/* 混合参数默认值,不传参数的时候默认该值,该函数有重载的时候慎用 */
.bg(@bg:#f5f5f5) {
background: #bg;
}
/* 混合的使用 */
.div {
.theme(#fff,#f5f5f5);
.theme(@bg:#f5f5f5, @color:#fff) /* 如果参数顺序打乱的话加上命名空间可以给对应的参数赋值 */
}
方案
函数重载在参数数量相同的时候是实现不了的,这时候可以使用 方案 来实现函数重载的效果
/* 方案的定义 */
.case(@_, @bg:#f5f5f5) { /* 默认方案 */
background: @bg;
}
.case(a, @bg:#ffffff) { /* 方案a */
background: @bg;
}
.case(b, @color:#ffffff) { /* 方案b */
color: @color;
}
/* 方案的使用 */
.div {
.case() /* 使用默认方案 */
.case(a) /* 使用方案a */
}
命名空间
#bundle() {
.button {
display: block;
border: 1px solid black;
background-color: grey;
&:hover {
background-color: white;
}
}
.tap {}
}
/* 把.button混合到.div中 */
.div {
color: orange;
#bundle.button(); /* 还可以书写为 #bundle > .button 形式 */
#bundle().button(); /* 如果不想要像 #bundle .tap 这样的出现在css中就在命名空间后面加上() */
}
when条件判断和循环
/* 先看看when的使用 */
.color(@width) when(@width <= 100) {
color: blue;
}
.color(@width) when(@width > 100) {
color: red;
}
.div {
.color(100); //这里color为blue
.color(200); //这里color为red
}
/* 循环是在when的基础上使用的 */
.widthFun(@n, @i:100) when(@i <= @n) {
.widthFun(@n, (@i + 100));
.width-@{i} { /* @{i}表示这个变量的值 */
width: 1px * @i;
}
}
.widthFun(500)
/* 上面的会被编译成 */
.width-100 {width: 100px}
.width-200 {width: 200px}
.width-300 {width: 300px}
.width-400 {width: 400px}
.width-500 {width: 500px}
写法技巧
/*
转义
*/
@min768: ~"(min-width: 768px)"; /*从less3.5开始可以简写为 @min768: (min-width: 768px)*/
.div {
@media @min768 {
font-size: 1.2rem;
}
}
.div {
/* border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; 这里50% / 60%会被计算成0.8333333%显示在样式中*/
border-radius: ~"50% 50% 50% 50% / 60% 60% 40% 40%;" /*所以这种情况要用到转义符*/
}
/*
&的用法
*/
.a {
&:hover {} /* & 映射为parent的名字,从而使用伪类选择器 */
}
.button {
&-ok {}; /* 解析成 .button-ok 。如果有跟parent重复的class名字,可以使用&代替 */
&s {}; /* 解析成 .buttons */
}
.a {
.b {
.c & {} /* 通过 & 追加父元素的属性。用来写不同类里面的相同属性 */
}
}
/* 上面的会被编译成 */
.a .b {}
.c .a .b {}
/*
!important
*/
.a {
color: red;
font-size: 20px;
}
.div {
.a !important; /* 每个a中的属性都会被编译成!important */
}