[Tunny]CSS LESS框架基础

[黄映焜/Tunny,20140711]

Less 是一个Css 预编译器,意思指的是它可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions) 和许多其他的技术，可让Css更具维护性，主题性，扩展性。

本文为Less入门与语法梳理，包括一些入门级例子，适合对Less有入门级了解的开发者查阅。

LESS 源文件的引入方式与标准 CSS 文件引入方式一样：

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

在我们需要引入 LESS 源文件的 HTML 中加入如下代码：

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

导入文件：

@import “variables.less”;@import “variables.css”;/*也可以将标准的 CSS 文件直接改成 .less 格式*/

变量与作用域

 /*用变量管理值*/@width : 20px; //全局变量#homeDiv {    #centerDiv{       width : @width; // 此处应该取最近定义的变量 width 的值 30px    }    @width : 30px; //局部变量，变量和混合是延迟加载的，不一定要在使用前声明 } #leftDiv {     width : @width; // 此处应该取最上面定义的变量 width 的值 20px }/*用变量管理选择器名称、URLs、属性*/@mySelector: banner; // 定义一个变量用于选择器名称@images: "../img"; // 变量可以是字符串@PRoperty: color; // 定义一个变量用于属性名称.@{mySelector} {  //选择器名称使用变量的用法    background: url("@{images}/white-sand.png");  //URLs使用变量的用法    @{property}: #0ee;    ……  //其它常规属性等}/*编译生成的CSS文件*/.banner {    background: url("../img/white-sand.png");    color: #0ee;    ……}

变量可以嵌套定义与使用

@fnord:  "I am fnord.";@var:    "fnord";content: @@var;//嵌套使用content: "I am fnord."; //编译后结果/*当一个变量定义两次时，只会使用最后定义的变量，Less会从当前作用域中向上搜索。*/

数值，颜色和变量可运算

@init: #111111;@transition: @init*2;@var: 1px + 5 // Less能够判断颜色和单位之间的区别.switchColor {     color: @transition; }/*编译生成的CSS文件*/ .switchColor {      color: #222222; }

混合（Mixins）与函数

 .roundedCorners(@radius:5px) { //定义参数并且给予默认值     -moz-border-radius: @radius;     -webkit-border-radius: @radius;     border-radius: @radius; } // 在另外的样式选择器中使用 #header {     .roundedCorners; //使用类并且参数为默认值 } #footer {     .roundedCorners(10px); //自定义参数值 }.bordered {    border-top: dotted 1px black;    border-bottom: solid 2px black;}#menu a {    color: #111;    .bordered;     /*在另一个规则集内部使用上面类的属性，则直接访问属性所在类名（或Id名）即可*/}

@arguments变量：当 Mixins 引用这个参数时，该参数表示所有的变量（多参数）。

 .boxShadow(@x:0,@y:0,@blur:1px,@color:#000){   -moz-box-shadow: @arguments;   -webkit-box-shadow: @arguments;   box-shadow: @arguments; } #header {   .boxShadow(2px,2px,3px,#f36); }

命名空间

#mynamespace {   .home {...}   .user {...} }//如果我们要复用 user 这个选择器的时候，我们只需要在需要混入这个选择器的地方这样使用就可以了。#mynamespace > .user

嵌套规则

<!-- HTML片段--> <div id="home">   <div id="top">top</div>  </div>

/*使用嵌套规则的LESS 文件*/#home{   color : blue;   width : 600px;   height : 500px;   border:outset;   #top{        border:outset;        width : 90%;   }}/*编译生成的CSS文件*/#home {  color: blue;  width: 600px;  height: 500px;  border: outset; } #home #top {  border: outset;  width: 90%; }a {   color: red;   text-decoration: none;   &:hover {     /*有 & 时解析的是同一个元素或此元素的伪类，没有 & 解析是后代元素，&表示当前选择器的父选择器*/      color: black;      text-decoration: underline;   } }/*编译生成的CSS文件*/a {   color: red;   text-decoration: none; }   a:hover {   color: black;   text-decoration: underline; }

Extend

extend是一个Less伪类，为扩展选择器；扩展选择器必须在所有伪类的最后

nav ul:extend(.inline)    background: blue;}.inline {    color: red;}/*编译生成的CSS文件*/nav ul {   // 声明块保持原样    background: blue;}.inline,nav ul {    color: red;}pre:hover , .some-class {    &:extend(div pre);}/*以上与给每个选择器添加一个extend完全相同*/pre:hover:extend(div pre),.some-class:extend(div pre) {}

从本质上讲extend会查找编译后的CSS，而不是原始的less

.bucket {  tr & { // 目标选择器中的嵌套，&代表最近父元素    color: blue;  }}.some-class:extend(tr .bucket) {} // 识别嵌套规则/*编译生成的CSS文件*/tr .bucket , .some-class {  color: blue;}

extend必须是精确匹配（包括通配符*、伪类顺序、nth表达式，唯一例外的是属性选择器中的引号，less会知道它们是相同的，然后匹配它）

.a.class,.class.a,.class > .a {  color: blue;}.test:extend(.class) {} // 不会匹配上面的任何选择器的值*.class {  color: blue;}.noStar:extend(.class) {} //不会匹配*.class选择器link:hover:visited {  color: blue;}.selector:extend(link:visited:hover) {} //不会匹配，伪类顺序不同:nth-child(1n+3) {  color: blue;}.child:extend(n+3) {}  //不会匹配，尽管逻辑上1n+3与n+3是相同的

[版本v2.0]

黄映焜/Tunny Wong：

2014-07-11发表v1.0

2014-07-13第一次更新v2.0