CSS预处理语言--Less

作为刚入门的菜鸟，整理了一些简单的资料，希望大神多多指教。

一、什么是Less

1、使用类似CSS的语法，为CSS赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护，属于css预处理语言的一种。更方便的处理CSS的逻辑功能，更好的管理CSS代码。

二、使用安装

1、基于node.js

首先安装node环境,在官网可以根据情况下载：

http://nodejs.cn/download/

根据npm进行全局安装

$ npm install -g less

less的编译命令：

首先进入到当前地址

$ lessc 编译文件      生成文件
$ lessc styles.less styles.css

输出压缩过的 CSS,在最后添加 -x，如果希望获得更好的压缩效果，还可以通过 –clean-css 选项启用 Clean CSS 进行压缩。

$ lessc styles.less styles.css -x

2、浏览器端直接使用

下载less的js 文件  ，此时2.5.3版本 http://lesscss.cn/#download-options

引入less文件，注意 rel的不同

<link rel="stylesheet/less" href="example.less" />

然后引入js文件

<script src="lesscss-1.4.0.min.js"></script>

三、简单使用

1.变量

以@开头，变量可以写在页首，也可以写在其他地方，其符合“按需加载”，不必在使用前声明。

/*变量*/
@styles-w:100px;
.div{width:@styles-w;}

/*按需加载*/
.p{font-size:@styles-f;}
@styles-f:16px;

/*取此作用域中最后的定义*/
@var: 0;
.class1 {
@var: 1;
.class {
@var: 2;
three: @var;
@var: 3;
}
one: @var;
}

编译：

/*变量*/
.div{width:100px;}

/*按需加载*/
.p{font-size:16px;}

/*取此作用域中最后的定义*/
.class1 .class {
three: 3;
}
.class1 {
one: 1;
}

2.混合(Mixins)

定义一个通用的.class，当然如果不想在CSS中展示，可以隐藏。

.border{
border-radiu:5px
}
#header{
.border;
}

/*隐藏，在()中不添加参数*/
.border(){
border-radiu:5px;
}

/*带参数，可以选择默认值*/
.border(@ten:10px){
border-radiu:@ten;
}
#footer{
.border(20px);
}

编译：

.border{
border-radiu:5px
}
#header{
border-radiu:5px;
}
/*隐藏，在()中不添加参数*/
/*带参数，可以选择默认值*/
#footer{
border-radiu:20px;
}

3.嵌套

以嵌套的方式编写CSS，更方便的处理CSS样式

#nav{
font-size:16px;
.a{color:red}
.b{
border-radiu:10px;
.c{
font-size:20px;
&:hover{
background:white;
}
}
}
}

编译：

#nav {
font-size: 16px;
}
#nav .a {
color: red;
}
#nav .b {
border-radiu: 10px;
}
#nav .b .c {
font-size: 20px;
}
#nav .b .c:hover {
background: white;
}

4.运算

任何的数字、变量、颜色都可以进行运算

@font-s:10px+1;
@color:#2DC456;
.a{font-size:@font-s * 2}
.b{color:@color + #111}

编译：

.a {font-size: 22px}
.b {color: #3ed567;}