less基础入门一

less的基础介绍

LESS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性更方便CSS的编写和维护。
LESS的基本语法和CSS的语法是基本相同的，但是，与CSS相比，更加的灵活、简便。而且能够快速的编译成CSS代码，便于使用。

注释

在LESS当中，允许有两种注释书写的方法，标准的CSS注释/* 注释内容 */，以及类似于JS的单行注释// 注释内容。
两种注释的区别在于，使用标准的CSS注释，不仅能够使用，也能够最终正确输出。

变量

在LESS中声明变量是通过@去声明变量。变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。
源代码如下:
在LESS文件test.less中的代码:
@color : #3E4F6A;
.box{
  width: 100px;
  height: 100px;
  margin: 100px auto;
  border:1px solid #333333;
  background-color: @color;
}
以上代码自定义了一个color的变量，在需要用到的时候直接调用即可。

编译后的test.css代码为:
.box {
  width: 100px;
  height: 100px;
  margin: 100px auto;
  border: 1px solid #333333;
  background-color: #3E4F6A;
}

嵌套

可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。
.box{
  width: 100px;
  height: 100px;
  margin: 100px auto;
  border:1px solid #333333;
  background-color: @color;
  p{
    font-size: 20px;
    color: #fff;
    text-align: center;
  }
}
编译后的CSS代码如下:
.box {
  width: 100px;
  height: 100px;
  margin: 100px auto;
  border: 1px solid #333333;
  background-color: #3E4F6A;
}
.box p {
  font-size: 20px;
  color: #fff;
  text-align: center;
}