less简化版

1. less是什么
2. 为什么用less
3. 怎么使用less

less是什么

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性

less有什么优势

使 CSS 更易维护和扩展。

Less 可以运行在 Node 或浏览器端。

less怎么使用

关于less使用，在前期一定要规划好，哪里用什么颜色，也就是相当于一套规范，比如导航用是什么字体，什么颜色，标题用什么颜色，内容用什么颜色，这都要很好空子

利用npm安装

$ npm install less -g

利用lessc可以经行编译

$ lessc style.less > css.css

在浏览器中使用

直接在加载less

<script src="http://cdn.bootcss.com/less.js/1.7.0/less.min.js"></script>

less有那些知识点

1. 变量
2. 混合
3. 匹配模式
4. 运算
5. 嵌套规则
6. @arguments变量

变量

利用@声明的变量，例如，声明一个颜色为red

@nav: red;

.nav {
    color: @nav;
}

混合

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

.box {
        font-size: 12px;
        background: @color;
    }
@color: #343434;

.nav {
    color: @color;
    .box;
}

带参数混合

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

.border-radius (@radius) {
    border-radius: @radius;
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
}


#header {
    .border-radius(4px);
}
.button {
    .border-radius(6px);
}

还可以设置默认值

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

@arguments 变量

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

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

输出

box-shadow: 2px 5px 1px #000;
-moz-box-shadow: 2px 5px 1px #000;
 -webkit-box-shadow: 2px 5px 1px #000;

作用域

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

@var: red;

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

#footer {
    color: @var; // red
}

注释

利用/* ..... */注释

在less文件支持双斜线注释，但是在编译之后会被忽视掉

// Hi, I'm a silent comment, I won't show up in your CSS
.class { color: white }

避免编译

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

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

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

输出

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

在避免编译的值中间也可以像字符串一样插入变量：

.class {
    @what: "Stuff";
    filter: ~"ms:[email protected]{what}()";
}

导入

在LESS中，你既可以导入CSS文件，也可以导入LESS文件。但只有导入的LESS文件才会被处理（编译），导入的CSS文件会保持原样。如果你希望导入一个CSS文件，保留.css后缀即可：

导入的文件会自动放到前面

@import "style.css"

导入less文件会进行编译，

字符串插值

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

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

选择器插值

less

@name: blocked;

[email protected]{name} {
    color: red;
}

输出

.blocked {
    color: red;
}