LESS 原理，一款css的预处理程序Less的使用

站长手记作者： 2024-08-28 15:55:01

LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。

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

//客户端引用
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

//node服务端使用
npm install less

var less = require('less');//或者import less from 'less'
less.render('.class { width: 1 + 1 }', function (e, css) {
    console.log(css);
});
//输出
.class {
  width: 2;
}

变量

//less
@ly_width:100px;
.box {
   width:@ly_width;
}
/*编译css*/
.box {
    width:100px;
}

混合

// LESS
.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}
#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}
/*生成的 CSS */
#header {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
#footer {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

嵌套规则

// LESS
#header {
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}
* 生成的 CSS */
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

函数 & 运算

//less
@ly_width:100px;
.one {
   width:@ly_widht + 100;
}
/*生成css*/
.one {
    idth:200px;
}

match函数：

round(1.67); //returns `2`
eil(2.4); //returns `3`
floor(2.6); //returns `2`）

Color函数：

lighten(@color, 10%);     // return a color which is 10% *lighter* than @color
darken(@color, 10%);      // return a color which is 10% *darker* than @color
saturate(@color, 10%);    // return a color 10% *more* saturated than @color
desaturate(@color, 10%);  // return a color 10% *less* saturated than @color
fadein(@color, 10%);      // return a color 10% *less* transparent than @color
fadeout(@color, 10%);     // return a color 10% *more* transparent than @color
fade(@color, 50%);        // return @color with 50% transparency
spin(@color, 10);         // return a color with a 10 degree larger in hue than @color
spin(@color, -10);        // return a color with a 10 degree smaller hue than @color
mix(@color1, @color2);    // return a mix of @color1 and @color2

命名空间

#bundle {
  .button () {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover { background-color: white }
  }
  .tab { ... }
  .citation { ... }
}
//你只需要在 #header a中像这样引入 .button:
#header a {
  color: orange;
  #bundle > .button;
}