Less学习指南

less简介

---

Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。

我个人觉得使用less在书写大量的样式代码时显得十分重要，它通过变量、继承、混合、嵌套等语言特性，会极大提高css的书写效率，而且它的代码结构很好地保持了html的文档结构，也更加清晰易读！

基于node.js的less

---

通过npm安装

npm install less -g

命令行用法示例

lessc style.less style.css

变量

---

less代码

@w:100px;
@outw:@w+200px;
@pos:position;
@o:.outBox;
@color:lightgreen;
@prop:color;
@{o} {
  @{pos}:relative;
  width:@outw;
  height:@outw;
  background-color:lightcyan;
  margin:60px auto;
  border:1px solid @color;
  .box1 {
    @{pos}: absolute;
    width:@w;
    height:@w;
    background-@{prop}:lightsalmon;
    left:50%;
    top:10%;
    margin-left:-50px;
  }
  .box2 {
    @{pos}: absolute;
    width:@w;
    height:@w;
    background-@{prop}:rgb(122, 206, 255);
    left:50%;
    bottom:10%;
    margin-left:-50px;
  }
}

编译后

.outBox {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: lightcyan;
  margin: 60px auto;
  border: 1px solid lightgreen;
}
.outBox .box1 {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: lightsalmon;
  left: 50%;
  top: 10%;
  margin-left: -50px;
}
.outBox .box2 {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #7aceff;
  left: 50%;
  bottom: 10%;
  margin-left: -50px;
}

嵌套

---

less代码

.posit {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  margin-left: -50px;
}
.outBox {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: lightcyan;
  margin: 60px auto;
  border: 1px solid lightgreen;

  .box1 {
    .posit();
    background-color: lightsalmon;
    top: 10%;
    transition:all 1s;

    &:hover {
      border-radius:50%; 
    }
  } 

  .box2 {
    .posit();
    background-color: #7aceff;
    bottom: 10%;
    transition:all 0.6s;

    &:hover {
      border-top-left-radius:50%;
      border-bottom-right-radius:50%
    }
  }
}

编译后

.posit {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  margin-left: -50px;
}
.outBox {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: lightcyan;
  margin: 60px auto;
  border: 1px solid lightgreen;
}
.outBox .box1 {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  margin-left: -50px;
  background-color: lightsalmon;
  top: 10%;
  transition: all 1s;
}
.outBox .box1:hover {
  border-radius: 50%;
}
.outBox .box2 {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  margin-left: -50px;
  background-color: #7aceff;
  bottom: 10%;
  transition: all 0.6s;
}
.outBox .box2:hover {
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

混合

混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。

---

less代码

.postio {
  position: absolute;
  width:100px;
  height:100px;
  left:50%;
  margin-left:-50px;
}
.outBox {
  position:relative;
  width:300px;
  height:300px;
  background-color:rgb(240, 192, 177);
  margin:60px auto;
  .box1 {
    .postio();
    background-color:rgb(24, 151, 151);
    top:10%;
  }
  .box2 {
    .postio();
    background-color:rgb(17, 113, 168);
    bottom:10%;
  }
}

编译后

.postio {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  margin-left: -50px;
}
.outBox {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: #f0c0b1;
  margin: 60px auto;
}
.outBox .box1 {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  margin-left: -50px;
  background-color: #189797;
  top: 10%;
}
.outBox .box2 {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  margin-left: -50px;
  background-color: #1171a8;
  bottom: 10%;
}

继承

less代码

#main {
  width:100px;
  height:100px;
  &:extend(.lineColor);
}
.lineColor {
  background-color:lightcoral;
}

编译后

#main {
  width: 100px;
  height: 100px;
}
.lineColor,
#main {
  background-color: lightcoral;
}

运算

---

less代码

.posit {
  position: absolute;
  width: 50+50px;
  height: 100px;
  left: 50%;
  margin-left: -50px;
}

编译后

.posit {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  margin-left: -50px;
}

映射

---

从 Less 3.5 版本开始，你还可以将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用。

less代码

.setm(){
  prak:rgb(88, 192, 192);
  thal:#f00;
}
.outBox {
  width: 300px;
  height: 300px;
  background-color: .setm[prak];
  margin: 60px auto;
  border:2px solid .setm[thal];
}

编译后

.outBox {
  width: 300px;
  height: 300px;
  background-color: #58c0c0;
  margin: 60px auto;
  border: 2px solid #f00;
}

作用域

• Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承。
• 与 CSS 自定义属性一样，混合（mixin）和变量的定义不必在引用之前事先定义
• 所以对于局部变量来讲，要等到变量加载完毕后做决定

转义

转义（Escaping）允许你使用任意字符串作为属性或变量值。任何 ~"anything" 或 ~'anything' 形式的内容都将按原样输出

less代码

@media (min-width:768px) {
  width:750px;
  height:~"min-height"
}

编译后

@media (min-width: 768px) {
  width: 750px;
  height: min-height;
}