简述

使用less好久了可一直还停留在变量和混合（Mixins）的使用，本着让less的优点最大化原则，在项目 实践了以下使用方法：

一、算法和变量引用

@title-color: #333;
@color: #ccc;

.title {
    @subhead-color: (@title-color + #111);

    font-size: @size;
    color: @title-color;

    .subhead {
        color: @color;
    }
}

p {
    color: @color;
}

@size: 14px;

  1. 如果页面中某些颜色是有规律的递增或者递减的话就可以设置加减算法了；（任何数字、颜色或者变量都可以参与运算）

  2. 代码中同一个变量被定义两次的话，在当前作用域中最后一次定义的将被使用； （我就直接把它理解为全局和局部变量的使用）

  3. 变量是“按需加载”的，因此不必强制在使用之前声明，这里建议都写在头部或者一个专门的变量文件中，以便随时查找和修改。

二、@arguments变量和Guards匹配表达式(expressions)

/* @arguments */
.box-shadow (@x, @y, @blur: 1px, @color: #00f) {
    -webkit-box-shadow: @arguments;
    -moz-box-shadow: @arguments;
    box-shadow: @arguments;
}

h3 {
    color: @color;
	.box-shadow(2px, 3px);   //传入的第三个值会改变@blur的默认值
}

/* Guards */
#data-add(@counter) when (@counter <= 20 ) {  //父级函数，以及变量传入
	#data@{counter} {                         //当前id + @counter变量
		width: 30%;
		margin-right: 4px;                    //样式设置
	}
	#data-add(( @counter + 1 ));              //递归调用自身
}
#data-add(1);

  1. 如果不想传入每一个参数的话,就是用@arguments包含了所有传递进来。

  2. 为了尽可能地符合CSS的语言结构，LESS选择使用guard混合（guarded mixins）， 类似于@media的工作方式执行条件判断，而不是加入if/else声明。（Guards支持的运算符包括：> >= = =< <）

三种CSS 预处理器（框架）：

  1. SASS2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架， 目前受LESS影响，已经进化到了全面兼容CSS的SCSS。

  2. LESS2009年出现，受SASS的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手， 在ruby社区之外支持者远超过SASS，其缺点是比起SASS来，可编程功能不够，不过优点是简单和兼容CSS， 反过来也影响了SASS演变到了SCSS的时代，著名的Twitter Bootstrap就是采用LESS做底层语言的。

  3. Stylus，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，在此社区之内有一 定支持者，在广泛的意义上人气还完全不如SASS和LESS。

以上是less使用时新的尝试，想着等这个项目结束了之后尝试安装sass，看到很多人对less、sass和Stylus有不同的看法， 不能直接说哪个更好，只能是亲自都尝试下才能知道哪个更适合自己吧！

© 2016, Content By BEGINNER