【LESS系列】基本语法

这里将直接以实例的方式展示 LESS 的基本语法。

less code 是编译前的代码，css code 是编译后的代码。

本文的内容，同样是引自【http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/】

1.变量

//less code

//定义一个变量

@border-color : #b5bcc7; 

.mythemes tableBorder{

  border : 1px solid @border-color;

}

//css code

.mythemes tableBorder {

  border: 1px solid #b5bcc7;

}

变量最常用的情境是定义主题，像字体颜色，背景颜色，边框样式等进行统一定义，统一定义图片资源路径也是一个不错的做法。

LESS 中的变量和其他编程语言一样，可以实现值的复用，同样它也有生命周期，也就是 Scope（变量范围，开发人员惯称之为作用域），简单的讲就是局部变量还是全局变量的概念。

查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局。下面我们通过一个简单的例子来解释 Scope。

//less code

@width : 20px; 

#homeDiv {

  @width : 30px;

  #centerDiv{

    width : @width; //此处应该取最近定义的变量 width 的值 30px

  }

}

#leftDiv {

  width : @width; //此处应该取最上面定义的变量 width 的值 20px

}

//css code

#homeDiv #centerDiv {

  width: 30px;

}

#leftDiv {

  width: 20px;

}

2.混合Mixins

//less code

//定义一个模块

.roundedCorners(@radius:5px) {

  -moz-border-radius: @radius;

  -webkit-border-radius: @radius;

  border-radius: @radius;

} 

#header {

  .roundedCorners;

}

#footer {

  .roundedCorners(10px);

}

//css code

#header {

  -moz-border-radius:5px;

  -webkit-border-radius:5px;

  border-radius:5px;

}

#footer {

  -moz-border-radius:10px;

  -webkit-border-radius:10px;

  border-radius:10px;

}

从上面的例子我们可以看出，LESS 的 Mixins 特性支持传参，默认值定义，我个人觉得如果你不是概念强迫症患者的话，完全可以把它当成是样式函数来理解。

除此之外，Mixins 也能像 Javascript 那样使用 arguments 变量，只是有一点点小区别。

在 LESS 里，@arguments 变量表示所有的变量，很多时候通过使用它，我们可以少写很多代码，请看下面例子：

//less code

//定义一个模块

.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);

}

//css code

#header {

  -moz-box-shadow: 2px 2px 3px #f36;

  -webkit-box-shadow: 2px 2px 3px #f36;

  box-shadow: 2px 2px 3px #f36;

}

我们甚至能利用参数生产类名~

.create-color-btn (@color-name, @background-color, @border-color, @font-color) {

    .btn-@{color-name} {

        background: @background-color;

        border: 1px solid @border-color;

        color: @font-color;

    }

    .btn-@{color-name}:hover {

        background: @background-color * 1.05;

        border-color: @border-color * 1.05;

    }

    .btn-@{color-name}:active {

        background: @background-color * 0.9;

        border-color: @border-color * 0.9;

    }

}

.create-color-btn(blue, #4bb1cf, #4bb1cf, #ffffff);

/* 生成的CSS这里就不发出来了 */

3.值运算

//less code

@init: #111111; 

@transition: @init*2; 

.switchColor {

  color: @transition;

}

//css code

.switchColor {

  color: #222222;

}

对于一些数值型的值，LESS 是支持进行加减乘除四则运算的。

此外，LESS 还提供了一组函数，专门针对颜色运算操作。

lighten(@color, 10%); //颜色淡化

darken(@color, 10%); //颜色加深

saturate(@color, 10%); //饱和度增加

desaturate(@color, 10%); //饱和度降低

fadein(@color, 10%); //透明度增加

fadeout(@color, 10%); //透明度降低

spin(@color, 10); //色调调整（+10）

spin(@color, -10); //色调调整（-10）

这组函数直接返回具体的色值，看下面实例：

//less code

@init: #f04615;

#body {

  background-color: fadein(@init, 10%);

}

//css code

#body {

  background-color: #f04615;

}

4.嵌套规则

<div id="home">

  <div id="top">top</div>

  <div id="center">

    <div id="left">left</div>

    <div id="right">right</div>

  </div>

</div>

//less code

#home{

  color: blue;

  width: 600px;

  height: 500px;

  border: outset;

  #top{

    border: outset;

    width: 90%;

  }

  #center{

    border: outset;

    height: 300px;

    width: 90%;

      #left{

        border:outset;

        float: left;

        width: 40%;

      }

      #right{

        border: outset;

        float: left;

        width: 40%;

      }

   }

}

//css code

#home {

  color: blue;

  width: 600px;

  height: 500px;

  border: outset;

}

#home #top {

  border: outset;

  width: 90%;

}

#home #center {

  border: outset;

  height: 300px;

  width: 90%;

}

#home #center #left {

  border: outset;

  float: left;

  width: 40%;

}

#home #center #right {

  border: outset;

  float: left;

  width: 40%;

}

我们平时在编写 css 的时候，经常会遇到多层选择器嵌套的情况。

从上面的例子可以看出，LESS 可以用很简洁的代码来实现，有着更好的可读性。

同时，我们还可以使用 “&” 来进行同一层级的操作，比如组合类和伪类。

//less code

.link{

  text-decoration: none;

  &.red{

    color: #f00;

  }

  &:hover{

    text-decoration: underline;

  }

}

//css code

.link{

  text-decoration: none;

}

.link.red{

  color: #f00;

}

.link:hover{

  text-decoration: underline;

}

5.导入指令(Import)

less样式文件可通过 @import '文件路径'; 引入外部的less文件。

注意：

不带扩展名或带非 .less 的扩展名均被视为 less 文件;

@import 可出现在任何位置，而不像 css 的 @import 那样只能放在文件第一行。

另外 @import 还提供了6个可选配置项(分别为 reference，inline，less，css，once，multiple)，用来改变引入文件的特性。

1. @import (reference) "文件路径";

将引入的文件作为样式库使用，因此文件中样式不会被直接编译为 css 样式规则。当前样式文件通过extend和mixins的方式引用样式库的内容。

2. @import (inline) "文件路径";

用于引入与 less 不兼容的 css 文件，通过 inline 配置告知编译器不对引入的文件进行编译处理，直接输出到最终输出。注意：引入的文件和当前文件会被编译为一个样式文件

3.@import (less) "文件路径";

默认使用该配置项，表示引入的文件为 less 文件。

4.@import (css) "文件路径";

表示当前操作为 css 中的 @import 操作。当前文件会输出一个样式文件，而被引入的文件自身为一个独立的样式文件

5.@import (once) "文件路径";

默认使用该配置项，表示对同一个资源仅引入一次。

6.@import (multiple) "文件路径";

表示对同一资源可引入多次。

巴特西

【LESS系列】基本语法

最新文章

热门文章