less常用操作

选择器变量

让 选择器 变成 动态

/* Less */
@mySelector: #wrap;
@Wrap: wrap;
@{mySelector}{ //变量名 必须使用大括号包裹
  color: #999;
  width: 50%;
}
.@{Wrap}{
  color:#ccc;
}
#@{Wrap}{
  color:#666;
}

/* 生成的 CSS */
#wrap{
  color: #999;
  width: 50%;
}
.wrap{
  color:#ccc;
}
#wrap{
  color:#666;
}

1. less函数混合minxin

@bgc: #232424;
.changeBg(@c){//函数定义必须带个.并且前面不带@
  background-color: @c;
}
.tem{
  width: @tem;
  height: @tem;
  .changeBg(red);
}

2. 循环（递归实现）

.less

 .loop(@index) when(@index > 0){
  .d@{index}{//当用本身的值时变量名时，要用大括号
    width: @index * 1px;
  }
  .loop(@index - 1)
}
.loop(10);


/* 在css:
   因为是递归，所以是类似于栈的弹出，
   先进后出
*/
.d10 {
  width: 10px;
}
.d9 {
  width: 9px;
}
.d8 {
  width: 8px;
}
.d7 {
  width: 7px;
}
.d6 {
  width: 6px;
}
.d5 {
  width: 5px;
}
.d4 {
  width: 4px;
}
.d3 {
  width: 3px;
}
.d2 {
  width: 2px;
}
.d1 {
  width: 1px;
}

效果如下：

3. 值变量

/* Less */
@color: #999;
@bgColor: skyblue;//不要添加引号
@width: 50%;
#wrap {
  color: @color;
  background: @bgColor;
  width: @width;
}

/* 生成后的 CSS */
#wrap {
  color: #999;
  background: skyblue;
  width: 50%;
}

嵌套

& 的妙用

& ：代表的上一层选择器的名字，此例便是header。

/* Less */
#header{
  &:after{
    content:"Less is more!";
  }
  .title{
    font-weight:bold;
  }
  &_content{//理解方式：直接把 & 替换成 #header
    margin:20px;
  }
}
/* 生成的 CSS */
#header::after{
  content:"Less is more!";
}
#header .title{ //嵌套了
  font-weight:bold;
}
#header_content{//没有嵌套！
    margin:20px;
}

媒体查询

在以往的工作中，我们使用 媒体查询，都要把一个元素 分开写

#wrap{
  width:500px;
}
@media screen and (max-width:768px){
  #wrap{
    width:100px;
  }
}

Less 提供了一个十分便捷的方式

/* Less */
#main{
    //something...

    @media screen{
        @media (max-width:768px){
          width:100px;
        }
    }
    @media tv {
      width:2000px;
    }
}
/* 生成的 CSS */
@media screen and (maxwidth:768px){
  #main{
      width:100px; 
  }
}
@media tv{
  #main{
    width:2000px;
  }
}

唯一的缺点就是 每一个元素都会编译出自己 @media 声明，并不会合并。

实战技巧

可以借助 Less 在元素中，去定义自己的私有样式。

/* Less */
#main{
  // something..
  &.show{
    display:block;
  }
}
.show{
  display:none;
}

const main = document.getElementById("main");
main.classList.add("show");

结果：

#main.show{
  display:block;
}
.show{
  display:none; //会被覆盖。
}

方法的条件筛选

Less 没有 if else，可是它有 when

/* Less */
#card{
    
    // and 运算符 ，相当于 与运算 &&，必须条件全部符合才会执行
    .border(@width,@color,@style) when (@width>100px) and(@color=#999){
        border:@style @color @width;
    }

    // not 运算符，相当于 非运算 !，条件为 不符合才会执行
    .background(@color) when not (@color>=#222){
        background:@color;
    }

    // , 逗号分隔符：相当于 或运算 ||，只要有一个符合条件就会执行
    .font(@size:20px) when (@size>50px) , (@size<100px){
        font-size: @size;
    }
}
#main{
    #card>.border(200px,#999,solid);
    #card .background(#111);
    #card > .font(40px);
}
/* 生成后的 CSS */
#main{
  border:solid #999 200px;
  background:#111;
  font-size:40px;
}