less css基础教程

less 被认为是更加简洁的css。它给我们提供了很多编程语言里才有的特色。如变量，函数和继承（但不像我们在其它编程语言里看见的传统的继承功能）

在less里我们能够创建更加干净和高效的css,用less来维护css也更加简单。

要使用Less我们首先需要一个less编译器。我使用的一个Less编译器是proper.使用proper是一件很直接的事。仅仅需要在proper里打开less文件，它就会自动的编译好这些less文件。每次点击保存按钮和指定了存放位置以后相应的css文件就被生成了。

现在用你最喜欢的文本编辑器创建一个新文件，随意命一个你喜欢的名字，我将会创建一个叫做tut.less的文件。在这里我将会展示一些less的基础功能。

variable (变量): 

在我们要将同一个值应用到多个地方，并且以后很有可能要改变这个值时，变量就显得尤其有用。

在less里你可以这样创建一个变量 @variableName : value;  这个变量可以存储一个边框的样式，或是一段内容的样式，或是像素值。下面是一个使用变量的示例。生成的相对应的css内容被放到了文件tut.css里。

tut.less 文件：

@textColor: white;
@bgColor: #333;
@border: 2px solid red;
@content: "This is the sample content from less";

// variable example

#content p {
    color: @textColor;
    background-color: @bgColor;
    border: @border;
}

tut.css 文件：

#content p {
  color: #ffffff;
  background-color: #333333;
  border: 2px solid #ff0000;
}
#content p:after {
  content: "This is the sample content from less";
}

上面的例子里变量被定义在了less文件里。这些变量被应用到了 #content p 样式里。正如你看到的，在生成的文件里，变量被它所声明的值所取代。

mixins （混合）:

Mixins是一种复用代码的方式。它被叫做 "Mixin in"  mixin使我们能将一个css样式混合到另外一个css样式中去。创建一个mixin十分简单，仅需要将要混合的样式包含到当前样式里。如：

tut.less:

// mixin example

.myStyle {
  color: #333;
  border: 1px solid gray;
}

#myDiv {
  .myStyle
}

tut.css

.myStyle {
  color: #333;
  border: 1px solid gray;
}

#myDiv {
  color: #333;
  border: 1px solid gray;
}

在上面的例子里 .myStyle中的样式就被应用到了 #myDiv里。

NESTING（嵌套）:

我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

tut.less:

// nested style example

#myDiv {
  background-color: black;
  a {
    color: red;
  }
  
  p {
    color: white;
  }
}

tut.css 

#myDiv {
  background-color: black;
}

#myDiv a {
  color: red;
}

#myDiv p {
  color: white;
}

在上个例子里，所有出现在#myDiv里的a标签将使用红色字体，而所有在#myDiv的p标签将使用白色字体。