less的简单使用

变量的定义

• 建议所有的变量写在最上面
• 可以把基本变量定义在同一文件

变量的使用

• 多次使用同一属性值

// 使用场景1
@color: #000;
@width: {
  left: 320px;
  right: 768px;
  center: 1024px;
}
div {
    width:@width[left];
    color:@color;
    background:fadeout(@color,75%);
}
// css
div {
    width:320px;
  	color: #000;
  	background: rgba(0, 0, 0, 0.25);
}

• 对于纯色色值
  • fadeout函数，表示使用多少的透明度，如果是75%，则代表色值为rgba(0,0,0,0.25)
  • fadein函数设置多少都还是原色值
• 针对本来就是rgba的色值，如果原本是rgba(0,0,0,0.2)
  • 使用fadeout，使用fadeout(@color,10%)，则代表色值为rgba(0,0,0,0.1)；使用fadeout(@color,20%)，则代表色值为rgba(0,0,0,0)，大于20都是rgba(0,0,0,0)
  • fadein函数，使用fadein(@color,10%)，则代表色值为rgba(0,0,0,0.3)

还有很多函数，对数值比较有用

• 多次使用同一属性集

// 使用方法1（可以传入参数）
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.fd-span {
  .bordered;
  color: #000;
}
// 使用方法2（不可以传入参数）
@bordered: {
   border-top: dotted 1px black;
   border-bottom: solid 2px black;
 }
.fd-span {
  @bordered();
  color: #000;
}
// css
.fd-span {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
    color: #000;
}
// 带参数使用（不传入参数默认使用黑色）
.bordered (@color:black) {
  border-top: dotted 1px @color;
  border-bottom: solid 2px @color;
}
.fd-span {
  .bordered(red);
  color: #000;
}
// css
.fd-span {
    border-top: dotted 1px red;
  	border-bottom: solid 2px red;
    color: #000;
}
// 可以传多个参数使用逗号隔开，@arguments表示使用所有变量，也可以单独使用变量
//这里使用不太恰当，因为box-shadow和color没有什么必要关联，最好定义的变量耦合性尽可能低
.boxShadowColor(@x:0,@y:0,@blur:1px,@color:#000){
    -moz-box-shadow: @arguments;
    -webkit-box-shadow: @arguments;
    box-shadow: @arguments;
  	color: @color;
}
.fd-span {
  .boxShadowColor(2px,2px,3px,#f36);
}
// css
.fd-span {
    -moz-box-shadow: 2px 2px 3px #f36;
	-webkit-box-shadow: 2px 2px 3px #f36;
    box-shadow: 2px 2px 3px #f36;
    color: #f36;
}

模式匹配

// 根据不同的switch匹配不同的值，@_表示匹配所有的值
.mixin (dark, @color) {
  	color: darken(@color, 10%);
}
.mixin (light, @color) {
  	color: lighten(@color, 10%);
}
.mixin (@_, @color) {
  	display: block;
}
@switch: light;
.fd-span {
  	.mixin(@switch, #888);
}
// css
.fd-span {
  	display: block;
    color:#a2a2a2;
}

嵌套

• 没有必要所有的类都嵌套，可读性不好，可维护性不高
• 像active、伪类可以使用嵌套（&表示同级，.表示子级）

计算

• color可以计算，但是可读性不高，前端对色值理解可能没有那么透彻
• 算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算

//算术运算符在加、减或比较之前会进行单位换算,计算的结果以最左侧操作数的单位类型为准
//无效的单位换算例如：px 到 cm 或 rad 到 % 的转换,则会忽略单位
@conversion: 5cm + 10mm;// 6cm
@conversion: 2 - 3cm - 5mm;// -1.5cm
@conversion: 2 + 5px - 3cm;// 4px

//乘法和除法不作转换（长度乘以长度就得到一个区域，CSS不支持指定区域，所以没有意义）
@base: 2cm * 3mm; // 6cm

//颜色的算术运算不如色彩函数，最开始介绍的那些

作用域

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

字符串插值

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

JavaScript表达式

@mainColor:#e92323;
@string: `'hello'.concat(' world')`;
div:before{
  background: @mainColor;
  content: @string;
}
// css
div:before {
    background: #e92323;
    content: "hello world";
}

• 编译的好像不能用JavaScript，只能引入less.js的时候可以使用

可能还有很多没有说到，但是个人觉得写less也不要丢了易读性、维护性和扩展性，现在很多嵌套的易读性都很差更不用说维护性和扩展性了