--外功篇-Less的学习日志-01-辅助理解Less--

夏去秋来，星移斗转。

小虾米在修炼一途中也听闻css之上还有更高深的虚招（样式处理），名为Less。

然而只听闻其为“预处理样式”。片面之言，只是徒增疑惑罢了。

今日得幸借得藏经阁古籍一观。初有感悟，聊胜于无，寥寥数笔，记录于下... ...

 

在学习Less之前，我们都知道CSS，是一个很棒的样式处理技术。

我们可以通过以下的代码轻松的对一个div进行样式定义：

div{
  width: 20px;
  height: 20px;
  background-color: orange;          
}

但是，在我们的开发中经常会遇到这样的情况...

HTML:

<div></div>
<div>
<div class="black"></div>
</div>

CSS:

div{
  width: 120px;
  height: 120px;
  background-color: orange;          
}
.black {
    width: 120px;
    height: 120px;
    background-color: blue;
}

频繁的使用相同的属性值设置。一个两个样式还可以轻松处理。

可是一旦定义的样式多样化，定义元素增多，且样式值重复冗杂，在编写CSS样式时就会有很多无意的重复的工作，大大降低了开发效率。

我们的前辈们很早就考虑到了这个问题，他们就想着，如果CSS能够定义“变量”、“函数”、“封装”、“运算”这些概念的话，会省很多事。

因此，就有了“预处理”的概念。

Less是向后兼容CSS的扩展语言，你可以在Less文件里面编写纯CSS代码也完全没有问题。

Less向CSS的转换是通过JavaScript进行实现的。

以上的CSS代码，你可以完全照搬进Less，你也可以像如下这样进行编写：

@width: 120px;
@height: @width;

div{
  width: @width;
  height: @height;
  background-color: orange;          
}
.black {
    width: @width;
    height: @height;
    background-color: blue;
}

这样处理是不是方便很多！

 

Less的后续学习将陆续展开...