冲浪网站优化 / Products Center

网站优化

LESS语法知识

发布时间: 2014-11-29 15:46:40

1、less支持变量

格式@变量名：变量值。比如@border-color : #b5bcc7;

2、Mixins（混入）

Mixins（混入）功能对用开发者来说并不陌生，它是多重继承的一种实现，在 LESS 中，混入是指在一个 CLASS 中引入另外一个已经定义的 CLASS，就像在当前 CLASS 中增加一个属性一样。

Mixins 在 LESS 中的使用：

// 定义一个样式选择器
.roundedCorners(@radius:5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
// 在另外的样式选择器中使用
#header {
.roundedCorners;
}
#footer {
.roundedCorners(10px);
}

备注：@radius:5px，表示默认参数。

经过编译生成的 CSS 文件如下：

#header {
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
#footer {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}

像 JavaScript 中 arguments一样，Mixins 也有这样一个变量：@arguments。@arguments该参数表示所有的变量，很多情况下，这个参数可以省去你很多代码。

命名空间 Namespaces

为了解决选择器之间重名问题，LESS 也采用了命名空间的方法来避免重名问题。

比如定义命名空间

#mynamespace {
.home {...}
.user {...}
}

引用方法：#mynamespace > .user。

嵌套的规则

采用从外到内的选择器嵌套定义或者采用给特定元素加 CLASS 或 ID 的方式。

比如采用Id的方式

<div id="home">
<div id="top">top</div>
<div id="center">
<div id="left">left</div>
<div id="right">right</div>
</div>
</div>

. LESS 文件

#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文件

#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%;
}

LESS 文件& 用法

有 & 时解析的是同一个元素或此元素的伪类，没有 & 解析是后代元素。

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;
}

上一条：LESS的三种使用方法

下一条：LESS运算及函数