less的简单用法，看完你就能学会

Less也是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量，继承，运算， 函数. Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行 (借助 Node.js)。

使用方式

两种使用方式：第一种全局安装less，利用命令编译less;第二种直接引入less.js.

npm安装

npm install -g less 
npm install -g less-plugin-clean-css 

命令行

lessc styles.less styles.css  // 编译成css
lessc --clean-css styles.less styles.min.css  // 编译压缩css

引入less.js

这里注意要在less.js引入前引入.less样式文件

<link rel="stylesheet/less" href="style.less">
<script src="less.min.js"></script>

使用

变量

1. 值变量

less 的变量声明是以@开头

/* less */
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
  color: @light-blue;
}

2. 选择器变量

选择器也可使用变量,变量需要用@{}包括

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

3. 属性变量

属性名称使用变量

@borderStyle: border-style;
@Soild:solid;
#wrap{
  @{borderStyle}: @Soild;//变量名 必须使用大括号包裹
}

4. url变量

@images: "../img";//需要加引号
body {
  background: url("@{images}/dog.png");//变量名 必须使用大括号包裹
}

5. 声明变量

类似于mixins,用于引入公共代码块

• 结构: @name: { 属性: 值 ;};
• 使用：@name();

// less
@background: {background:red;};
#main{
    @background();
}

// css
#main{
  background:red;
}

6. 变量作用域

less 中变量的作用域是采用就近原则

/* Less */
@var: @a;
@a: 100%;
#wrap {
  width: @var;
  @a: 9%;
}
@a: 8%;

/* 生成的 CSS */
#wrap {
  width: 9%;
}

Mixins

可以直接引入定义好的类的样式直接混入到当前

1. 无参混入

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered;  // 等价于.bordered()
}

2. 默认参数方法

• Less 可以使用默认参数，如果 没有传参数，那么将使用默认参数。
• @arguments 犹如 JS 中的 arguments 指代的是 全部参数。
• 传的参数中 必须带着单位。

.border(@a:10px,@b:50px,@c:30px,@color:#000){
    border:solid 1px @color;
    box-shadow: @arguments;//指代的是 全部参数
}
#main{
    .border(0px,5px,30px,red);//必须带着单位
}

条件语句when

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;
}

嵌套

less 支持嵌套写法

1. 基本层级嵌套

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

2. 父选择&符

a {
  color: blue;
  &:hover {
    color: green;
  }
}

3. 嵌套指令冒泡

// less
.screen-color {
  @media screen {
    color: green;
    @media (min-width: 768px) {
      color: red;
    }
  }
}

/* css */
@media screen {
  .screen-color {
    color: green;
  }
}
@media screen and (min-width: 768px) {
  .screen-color {
    color: red;
  }
}

运算符

@base: 5%;
@filler: @base * 2; // result is 10%
@other: @base + @filler; // result is 15%

继承

extend 是 Less 的一个伪类。它可继承 所匹配声明中的全部样式

1. extend 关键字的使用

/* Less */
.animation{
    transition: all .3s ease-out;
    .hide{
      transform:scale(0);
    }
}
#main{
    &:extend(.animation);
}
#con{
    &:extend(.animation .hide);
}

/*  CSS */
.animation,#main{
  transition: all .3s ease-out;
}
.animation .hide , #con{
    transform:scale(0);
}

2. all 全局搜索替换

使用选择器匹配到的 全部声明

/* Less */
#main{
  width: 200px;
}
#main {
  &:after {
    content:"Less is good!";
  }
}
#wrap:extend(#main all) {}

/*  CSS */
#main,#wrap{
  width: 200px;
}
#main:after, #wrap:after {
    content: "Less is good!";
}

导入

1. 导入 less 文件 可省略后缀

import "main"; 
//等价于
import "main.less";

2. @import 的位置可随意放置

#main{
  font-size:15px;
}
@import "style";

3. reference

使用@import (reference)导入外部文件，但不会添加 把导入的文件 编译到最终输出中，只引用。

/* Less */
@import (reference) "bootstrap.less"; 

#wrap:extend(.navbar all){}

函数

less 提供多种函数可以使用

1. 判断类型

isnumber(#ff0);     // 判断给定的值 是否 是一个数字
iscolor(#ccc)      //判断给定的值 是否 是一个颜色
isurl("")         // 判断给定的值 是否 是一个 url

2. 颜色操作

rgb(90, 129, 32)   //  #5a8120
mix(#ff0000, #0000ff, 50%)   // #800080
hsl(90, 100%, 50%)   // #80ff00 
argb(rgba(90, 23, 148, 0.5)) // #805a1794
darken(hsl(90, 80%, 50%), 20%)  // #4d8a0f

3. 数学函数

ceil(2.4)  // 3  
floor(2.6)  // 2
percentage(0.5) // 50%
round(1.67, 1) // 1.7
sqrt(25cm)   // 5cm
abs(-18.6%)  // 18.6%

其他

注释

/* */ CSS原生注释，会被编译在 CSS 文件中。
/   / Less提供的一种注释，不会被编译在 CSS 文件中

避免编译

使用 ~' 值 ' 结构可以避免被编译

• 结构： ~' 值 '

/* Less */
#main{
  width:~'calc(300px-30px)';
}

/*  CSS */
#main{
  width:calc(300px-30px);
}

变量拼串

在平时工作中，这种需求 太常见了。 在下面例子中， 实现了不同的 transtion-delay、animation、@keyframes

• 结构： ~"字符@{变量}字符";

.judge(@i) when(@i=1){
  @size:15px;
}
.judge(@i) when(@i>1){
  @size:16px;
}
.loopAnimation(@i) when (@i<16) {
  
  .circle:nth-child(@{i}){
      .judeg(@i);
      border-radius:@size @size 0 0;
      animation: ~"circle-@{i}" @duration infinite @ease;
      transition-delay:~"@{i}ms";
  }
  @keyframes ~"circle-@{i}" {
      // do something...
  }
  .loopAnimation(@i + 1);
}

使用 JS

因为 Less 是由 JS 编写，所以 Less 有一得天独厚的特性：代码中使用 Javascript

/* Less */
@content:`"aaa".toUpperCase()`;
#randomColor{
  @randomColor: ~"rgb(`Math.round(Math.random() * 256)`,`Math.round(Math.random() * 256)`,`Math.round(Math.random() * 256)`)";
}
#wrap{
  width: ~"`Math.round(Math.random() * 100)`px";
  &:after{
      content:@content;
  }
  height: ~"`window.innerHeight`px";
  alert:~"`alert(1)`";
  #randomColor();
  background-color: @randomColor;
}
/* 生成后的 CSS */

// 弹出 1
#wrap{
  width: 随机值（0~100）px;
  height: 743px;//由电脑而异
  background: 随机颜色;
}
#wrap::after{
  content:"AAA";
}