LESS使用介绍

使用:

在客户端使用

引入你的 .less 样式文件的时候要设置 rel 属性值为 “stylesheet/less”:

<link rel="stylesheet/less" type="text/css" href="styles.less">

然后点击页面顶部download按钮下载 less.js, 在 中引入:

<script src="less.js" type="text/javascript"></script>

注意你的less样式文件一定要在引入less.js前先引入。

备注：请在服务器环境下使用！本地直接打开可能会报错！

基于node使用

$ npm install -g less@latest，

//编译less
$ lessc all.less > all.css

在sublime上面使用

• 在sublime上面使用--参考文章

---

LESS 语法:

LESS 做为 CSS 的一种形式的扩展，它并没有阉割 CSS 的功能，而是在现有的 CSS 语法上，添加了很多额外的功能，所以学习 LESS 是一件轻而易举的事情，果断学习之！

变量

请注意 LESS 中的变量为完全的 ‘常量’ ，所以只能定义一次.

// Less
@nice-blue: #5B83AD;
#header { color: @nice-blue; }

// 输出
#header {
  color: #5083ad;
}

** 甚至可以用变量名定义为变量: **

// Less
@fnord: "I am fnord.";
@var: 'fnord';
#header:after{content: @@var;}

//输出
#header:after {
  content: "I am fnord.";
}

混合

在 LESS 中我们可以定义一些通用的属性集为一个class，然后在另一个class中去调用这些属性.

那如果我们现在需要在其他class中引入那些通用的属性集，那么我们只需要在任何class中像下面这样调用就可以了:

// Less
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered;
}

// 输出
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

带参数混合

在 LESS 中，你还可以像函数一样定义一个带参数的属性集合:

.border-radius (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}
#header{
  .border-radius(6px)
}

// 输出
#header {
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
}

** 我们还可以像这样给参数设置默认值:**

.border-radius (@radius:5px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}
#header{
  .border-radius;
}

// 输出
#header {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

** 你也可以定义不带参数属性集合,如果你想隐藏这个属性集合，不让它暴露到CSS中去，但是你还想在其他的属性集合中引用，你会发现这个方法非常的好用:**

// Less
.wrap () {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}

pre { .wrap }

// 输出
pre {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}

** @arguments 变量**

@arguments包含了所有传递进来的参数. 如果你不想单独处理每一个参数的话就可以像这样写:

// Less
.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}
#head{
  .box-shadow(2px, 5px);
}

// 输出
#head {
  box-shadow: 2px 5px 1px #000000;
  -moz-box-shadow: 2px 5px 1px #000000;
  -webkit-box-shadow: 2px 5px 1px #000000;
}

嵌套规则

LESS 可以让我们以嵌套的方式编写层叠样式. 让我们先看下下面这段 CSS:

** 注意 & 符号的使用—如果你想写串联选择器，** 而不是写后代选择器，就可以用到&了. 这点对伪类尤其有用如 :hover 和 :focus.

// Less
#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
    &:hover { text-decoration: none }
  }
}

//输出
#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}
#header .logo:hover {
  text-decoration: none;
}

运算

任何数字、颜色或者变量都可以参与运算.

// Less
@base: 5%;
@filler: @base * 2;

#head{
  color: #888 / 4;
  height: 100% / 2 + @filler;
}

// 输出
#head {
  color: #222222;
  height: 60%;
}

Math 函数

LESS提供了一组方便的数学函数，你可以使用它们处理一些数字类型的值:

// Less
round(1.67); // returns `2`
ceil(2.4);   // returns `3`
floor(2.6);  // returns `2`
percentage(0.5); // returns `50%`

命名空间

有时候，你可能为了更好组织CSS或者单纯是为了更好的封装，将一些变量或者混合模块打包起来, 你可以像下面这样在#bundle中定义一些属性集之后可以重复使用:

// Less 【你只需要在 #header a中像这样引入 .button:】
#bundle {
  .button () {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover { background-color: white }
  }
  .tab () { //不调用，不输出
    color: #fff;
  }
}
#header a {
  color: orange;
  #bundle > .button;
}

// 输出
#header a {
  color: orange;
  display: block;
  border: 1px solid black;
  background-color: grey;
}
#header a:hover {
  background-color: #ffffff;
}

作用域

LESS 中的作用域跟其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止.

// Less
@var: red;
#page {
  @var: white;
  #header {
    color: @var; // white
  }
}
#footer {
  color: @var; // red
}

// 输出
#page #header {
  color: #ffffff;
}
#footer {
  color: #ff0000;
}#page #header {
  color: #ffffff;
}
#footer {
  color: #ff0000;
}

注释

CSS 形式的注释在 LESS 中是依然保留的:

/*
  多行注释
  Hello, I'm a CSS-style comment
  Hello, I'm a CSS-style comment
*/

// 单行注释

Importing

你可以在main文件中通过下面的形势引入 .less 文件, .less 后缀可带可不带:

@import "lib.less";
@import "lib";
// 如果你想导入一个CSS文件而且不想LESS对它进行处理，只需要使用.css后缀就可以:
@import "lib.css";

字符串插值

变量可以用类似ruby和php的方式嵌入到字符串中，像@{name}这样的结构:

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

避免编译

有时候我们需要输出一些不正确的CSS语法或者使用一些 LESS不认识的专有语法.

要输出这样的值我们可以在字符串前加上一个 ~, 例如:

// Less
.class {
  filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}

//输出
.class {
  filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}

JavaScript 表达式

JavaScript 表达式也可以在.less 文件中使用. 可以通过反引号的方式使用:

@var: `"hello".toUpperCase() + '!'`;

// 输出
@var: "HELLO!";

---

参考文档

• Less 文档
• Less 中文网