less 相关的总结

一、 less 语言特性

是一门CSS预处理，扩充了CSS，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充，Less 也可以运行在 Node 或浏览器端。

1、总览

• 变量实际上是“常量”，因为它们只能定义一次。
• 混合是一种将一组属性从一个规则集中包含（“混入”）到另一个规则集中的方式
• 嵌套规则
• 可以使用任何数字，颜色或变量
• 在使用变量和mixin之前不必声明它们
• 定义同一变量名称两次或多次后，less只会选择最后定义的！

2、变量

（1）变量控制

变量可以从一个位置控制CSS规则中一些相同的值，从而使代码易于维护，同样可以在其他地方使用，如选择器名称，属性名称，URL和@import语句。

语法：@属性名:类名;

//定义
@demo:newClass;

.@{demo}-new{ // "-new"在类名基础上，新的类名 newClass-new
   @bg:rgb(0,0,0);
   background:@bg;
}
//div使用此类名
<div class="newClass-new">
	<p>demo</p>
</div>

语法：@变量名:属性名;     常用于处理属性名太长的麻烦

//定义变量（属性名）
@bg-img:background-image;

div{
  @{bg-img}:路径;
}

语法：@变量:路径;

//链接可以为任何链接*注意放置的位置
@bg-img:"路径";

header{
  background:url(@bg-img);
}

引入（importing）：你可以引入一个或者多个less文件，这些文件中的所有变量都可以在当前的less项目中使用

引入方式：@import “main.less”; 必须有 ; 结尾&#x