关于Less的使用入门(一)

本篇文不再叙述如何安装less以及为何使用它;直接从如何使用开始.

一.值变量;

      @color: #fff;
      @width: 50%;
      #index{
        color: @color;
        width: @width;
      }
    
      /* 生成后的 CSS */
      #index {
        color: #fff;
        width: 50%;
      }

如上代码所示,当声明一个值变量时(需要@符号定义),在引用时直接写上那个变量的名字即可.

二.属性变量;

@backgroundStyle: background-color;
@color: #999;

#index{
  @{backgroundStyle}: @color;
}

/*生成的css*/
#index{
  background-color: #999;
}

如上所示声明属性变量引用时是需要加花括号的.

三.url变量

     /* Less */
      @images: "../img";//需要加引号
      #index{
        background: url("@{images}/dog.png");//变量名 必须使用大括号包裹
      }
    
      /* 生成的 CSS */
      #index{
        background: url("../img/dog.png");
      }

同属性变量一样,url变量引用的时候也是需要加花括号的.

四.选择器变量;

@isId: #index;
@isName: index;
@{isId}{
   color: #fff;
}
.@{isName}{
   color: #fff;
}
#@{isName}{
   color: #666;
}
/*生成的css*/
#index{
  color: #fff;
}
.index{
  color: #fff;
}
#index{
  color: #666;
}

如上所示,声明选择器引用时是需要使用花括号的.

五.声明变量

@bgc: { background-color: rgba(0,0,0,.7);};
@Rules:{
          width: 200px;
          height: 200px;
          border: solid 1px red;
      };

.hello {
    @bgc();
    width: @width;
    color: red;
    font-size: 0.45rem;
  }
.index{
    @Rules();
}

/*生成的css*/
.hello {
    background-color: rgba(0,0,0,.7);
    width: @width;
    color: red;
    font-size: 0.45rem;
  }
.index{
    width: 200px;
    height: 200px;
    border: solid 1px red;
}

如上所示,声明变量并引用时,就如同js中一个方法调用一样来使用.

六.变量的运算

     /* Less */
      @width:300px;
      @color:#222;
      #wrap{
        width:@width-20;
        height:@width-20*5;
        margin:(@width-20)*5;
        color:@color*2;
        background-color:@color + #111;
      }
    
      /* 生成的 CSS */
      #wrap{
        width:280px;
        height:200px;
        margin:1400px;
        color:#444;
        background-color:#333;
      }

如上,运算同常用的运算方式.

七.变量作用域

     /* Less */
      @var: @a;
      @a: 100%;
      #wrap {
        width: @var;
        @a: 9%;
      }
    
      /* 生成的 CSS */
      #wrap {
        width: 9%;
      }

还有用变量来再次引用变量;

     /* Less */
      @fnord:  "I am fnord.";
      @var:    "fnord";
      #wrap::after{
        content: @@var; //将@var替换为其值 content:@fnord;
      }
      /* 生成的 CSS */
      #wrap::after{
        content: "I am fnord.";
      }