Bootstrap笔记《二》less

less

说到Bootstrap，就不得不提less。

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

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

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

sass

说到这里，再一句，还有一种东西，叫做sass，是rails中带的css扩展语言。sass的目的也是提高css的扩展性、重用性，也提供变量，函数，mixins，还有一种叫做嵌套原则。

less的使用

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

1. @base: #f938ab; 
2.  
3. body{ 
4.      
5.     color: @base; 
6. } 

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

下载less.js之后，在页面文件中添加这两个文件的引用。

1. <link type="text/css" rel="stylesheet/less" href="style.less" /> 
2. <script type="text/javascript" src="less.min.js" ></script> 

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

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

1. $ npm install -g less 
2. $ lessc styles.less 

1.  
2. $ lessc styles.less > styles.css 
3.  
4. #-x，压缩文件 
5. $ lessc -x styles.less > styles.css 

变量variables

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

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

组合Mixins

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

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

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

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

1. .border{ 
2.     border-top: dotted 1px black; 
3.     border-bottom: solid 2px black; 
4. } 
5.  
6. table{
   .border;
   }
   
   
7.  
8. .container{ 
9.      
10.     .border; 
11. } 

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

1. .border { 
2.     border-bottom: 2px solid black; 
3.     border-top: 1px dotted black; 
4. } 
5. table { 
6.     border-bottom: 2px solid black; 
7.     border-top: 1px dotted black; 
8. } 
9. .container { 
10.     border-bottom: 2px solid black; 
11.     border-top: 1px dotted black; 
12. } 

很不错吧。

嵌套Nested Rules

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

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

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

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

1. //less 
2.  
3. #header { 
4.   h1 { 
5.     font-size: 26px; 
6.     font-weight: bold; 
7.   } 
8.   p { font-size: 12px; 
9.     a { text-decoration: none; 
10.       &:hover { border-width: 1px } 
11.     } 
12.   } 
13. } 

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

1. #header h1 { 
2.   font-size: 26px; 
3.   font-weight: bold; 
4. } 
5. #header p { 
6.   font-size: 12px; 
7. } 
8. #header p a { 
9.   text-decoration: none; 
10. } 
11. #header p a:hover { 
12.   border-width: 1px; 
13. } 

函数Functions & Operations

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

1. //less 
2.  
3. @the-border: 1px; 
4. @base-color: #111; 
5. @red:        #842210; 
6.  
7. #header { 
8.   color: (@base-color * 3); 
9.   border-left: @the-border; 
10.   border-right: (@the-border * 2); 
11. } 
12. #footer { 
13.   color: (@base-color + #003300); 
14.   border-color: desaturate(@red, 10%); 
15. } 

下面是生成的css内容。

1. #header { 
2.   color: #333; 
3.   border-left: 1px; 
4.   border-right: 2px; 
5. } 
6. #footer { 
7.   color: #114411; 
8.   border-color: #7d2717; 
9. } 

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

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