less版本 less less

less基础知识

• 一、概览
• 二、变量
• 三、运算
• 四、混合
• 五、嵌套

• @规则嵌套和冒泡

• 六、转义
• 七、函数

• 命名空间和访问符

• 八、映射
• 九、导入

一、概览

• Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。
• 因为 Less 和 CSS 非常像，因此很容易学习。而且 Less 仅对 CSS 语言增加了少许方便的扩展。
• less在浏览器端使用的时候，借助less.js文件进行编译，编译之后其实就是css文件。
• 引入less文件
• <link rel="stylesheet/less" type="text/css" href="./css/index.less"/>
• 引入less的编译文件
• <script src="js/less.min.js"></script>

二、变量

• less声明变量使用的是@
• 变量存在全局变量和局部变量：变量写在样式类外部叫全局变量；变量写在样式里面叫局部变量。

@width:100px;
@height:100px;
#btn{
 @color:red;
 width: @width;
 height: @height;
 color: @color;
}

@width:100px;
@height:100px;
#btn{
 @color:red;
 width: @width;
 height: @height;
 color: @color;
}
#btn1{
 width: @width - 20;
 height: @height + 20;
 background-color: @color;//NameError: variable @color is undefined
}

三、运算

• 算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。

@width:100px;
@height:100px;
#btn{
 @color:red;
 width: @width;
 height: @height;
 color: @color;
}
#btn1{
 width: @width - 20;
 height: @height + 20;
}

@width:100px;
@height:100px;
@w:5cm+10mm;
#btn1{
 width: @w - 20;
 height: @height + 20;
}

• 乘法和除法不作转换。因为这两种运算在大多数情况下都没有意义，一个长度乘以一个长度就得到一个区域，而 CSS 是不支持指定区域的。Less 将按数字的原样进行操作，并将为计算结果指定明确的单位类型。
• 可以对颜色进行算术运算。

#btn1{
 width: @w;
 height: @height + 20;
 background-color: #223344+#111;
}

四、混合

• 混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。
• 类似提取方法，可以进行默认值，可以进行传递参数。

@width:100px;
@height:100px;
@w:5cm+10mm;
#btn{
 @color:red;
 width: @width;
 height: @height;
 color: @color;
 .borderradius;
}
#btn1{
 width: @w;
 height: @height + 20;
 .borderradius;
}
.borderradius{
 border-radius: 50px;
}

@width:100px;
@height:100px;
@w:5cm+10mm;
#btn{
 @color:red;
 width: @width;
 height: @height;
 color: @color;
 .borderradius;
}
#btn1{
 width: @w;
 height: @height + 20;
 .borderradius(20px);
}
.borderradius(@rad:50px){
 border-radius: @rad;
}

五、嵌套

ul{
 margin: 0;
 padding: 0;
 li{
   line-height: 30px;
   padding-left: 10px;
   list-style: none;
   a{
     color: #000;
     text-decoration: none;
   }
 }
}

• &—指代当前元素 (& 表示当前选择器的父级）

ul{
 margin: 0;
 padding: 0;
 li{
   line-height: 30px;
   padding-left: 10px;
   list-style: none;
   a{
     color: #000;
     text-decoration: none;
   }
   &:hover{
     border-bottom: 1px solid red;
   }
 }
}

@规则嵌套和冒泡

• @ 规则（例如 @media 或 @supports）可以与选择器以相同的方式进行嵌套。@ 规则会被放在前面，同一规则集中的其它元素的相对顺序保持不变。这叫做冒泡（bubbling）。

body{
 background-color: #fff;
 @media (min-width: 1280px) {
   background-color: red;
   @media (max-width: 768px) {
     background-color: blue;
   }
 }
 @media (max-width: 768px) {
   background-color: orange;
 }
}

六、转义

• 转义（Escaping）允许你使用任意字符串作为属性或变量值。任何 ~“anything” 或 ~‘anything’ 形式的内容都将按原样输出，除非 interpolation。

//转义
@bgimg:~'url(./image/1.png)';
body{
 background-image: @bgimg;
}

七、函数

• Less 内置了多种函数用于转换颜色、处理字符串、算术运算等

命名空间和访问符

• (不要和 CSS @namespace 或 namespace selectors 混淆了)。
• 有时，出于组织结构或仅仅是为了提供一些封装的目的，你希望对混合（mixins）进行分组。你可以用 Less 更直观地实现这一需求。假设你希望将一些混合（mixins）和变量置于 #bundle 之下，为了以后方便重用或分发。
• 命名空间：类似代码封装，将混合封装到一个模块，使用的时候点出来就行。

#boundle(){
 .boxshow(@sh:~'0 0 1px #000'){
   box-shadow:@sh;
 }
 .boxrad(@rad:10px){
   border-radius:@rad;
 }
}
button{
 width:100px;
 height:30px;
 #boundle.boxshow(~'3px 5px 10px #000');
}

八、映射

• 还可以将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用。
• 类似键值对取值。

#boun(){
 primary:'green';
 danger:red;
}
#btn{
 background-color: #boun[danger];
}

九、导入

• “导入”的工作方式和你预期的一样。你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉。

@import "library"; // library.less
@import "typo.css";