Bootstrap笔记《二》less

less

less是一种动态的样式表语言，less扩展了css，使得我们可以像写程序一样，写css，提高css的扩展性、重用性，可以运行在客户端，也可以运行在服务端nodejs。

less提供了变量定义，mixins，函数等等常见的程序元素。

mixins是一种组合的方式，提高重用，极大提高css编写效率。

sass

less的使用

首先我们写一段less，保存为style.less文件。

@base: #f938ab; 

body{ 

    color: @base; 

} 

代码很简单，就是定义一个变量@base，然后在body的color中使用这个变量。

<link type="text/css" rel="stylesheet/less" href="style.less" /> 

<script type="text/javascript" src="less.min.js" ></script> 

在浏览器中查看这个页面，就会发现，效果出来了，和我们写css是一个效果。

也就是在客户端用js将less文件动态解释为css。如果对性能有较高要求，就用node或者是一些第三方工具先将less编译为css，然后引用编译好的css就可以了，这样就不用下载less.js文件，也不用在客户端动态解释了。

$ npm install -g less 

$ lessc styles.less 

$ lessc styles.less > styles.css 

#-x，压缩文件 

$ lessc -x styles.less > styles.css 

变量variables

从前面这个简单的变量就可以看出来less的好处了，一个颜色的值被重用。在原来，我们要使用一个颜色，会在多个地方写这个颜色的值，需要改，就批量的替换，需要替换一部分，噩梦就来了。

现在好多了，定义一个变量，然后在需要的地方引用这个变量，部分替换，就定义两个变量。这不就重用了吗！

组合Mixins

mixins就是一种组合的方式，有点像写个工具类，静态方法，对于字符串进行某种处理，比如格式化函数，格式化日期之类的。

我们经常在css中对边框进行设置solid 1px这类设置，然后把这些信息写到很多地方，div，table，总之不少。

利用mixins的方式，我们只定义一个class，然后在其他class中引用它。

其实也有点像组件编程，把大组件差分成小组件，然后在需要的地方组合起来，给后期的维护也带来好处。

.border{ 

    border-top: dotted 1px black; 

    border-bottom: solid 2px black; 

table{

.border;

}

.container{ 

    .border; 

上面的less产生的css是下面的样子。

.border { 

    border-bottom: 2px solid black; 

    border-top: 1px dotted black; 

table { 

.container { 

很不错吧。

嵌套Nested Rules

我们的html可能是div里面有div，然后有ul，ul里面有a，a里面有span，如果我们对这几个分别设置样式，就会在css中写div一个，div ul一个，div ul a一个，div ul span一个。

在css中，空格代表下一级别。

这样写又繁琐，又不直观。

less的写法很奇特，样子很直观，一眼看上去就知道怎么回事了，很有层次感。

//less 

#header { 

  h1 { 

    font-size: 26px; 

    font-weight: bold; 

  } 

  p { font-size: 12px; 

    a { text-decoration: none; 

      &:hover { border-width: 1px } 

    } 

生成的css，也就是我们普通的写法就是下面的样子。

#header h1 { 

  font-size: 26px; 

  font-weight: bold; 

#header p { 

  font-size: 12px; 

#header p a { 

  text-decoration: none; 

#header p a:hover { 

  border-width: 1px; 

函数Functions & Operations

我们先看一段less代码，然后在说说这个用法的场景。

@the-border: 1px; 

@base-color: #111; 

@red:        #842210; 

  color: (@base-color * 3); 

  border-left: @the-border; 

  border-right: (@the-border * 2); 

#footer { 

  color: (@base-color + #003300); 

  border-color: desaturate(@red, 10%); 

下面是生成的css内容。

  color: #333; 

  border-left: 1px; 

  border-right: 2px; 

  color: #114411; 

  border-color: #7d2717; 

我觉得上面的这种用法的场景就是，我们先定义一些基线，然后其他的是相对于基线进行调整。可以有一种渐进的感觉，相对的概念。

本文转自 virusswb 51CTO博客，原文链接：http://blog.51cto.com/virusswb/1037632，如需转载请自行联系原作者