本质上,LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性,更不是用来取代 CSS 的,而是在现有 CSS 语法的基础上,为 CSS 加入程序式语言的特性。下面是一个简单的例子:
1. 颜色命名—-LESS 文件
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
1. 颜色命名—-CSS 文件
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
2. 命名边框颜色—-LESS 文件
@border-color : #b5bcc7;
.mythemes tableBorder{
border : 1px solid @border-color;
}
2. 命名边框颜色—-CSS 文件
.mythemes tableBorder {
border: 1px solid #b5bcc7;
}
3. 命名宽度取最近值—-LESS 文件
@width : 20px;
#homeDiv {
@width : 30px;
#centerDiv{
width : @width;// 此处应该取最近定义的变量 width 的值 30px
}
}
#leftDiv {
width : @width; // 此处应该取最上面定义的变量 width 的值 20px
}
3. 命名宽度取最近值—-CSS 文件
#homeDiv #centerDiv {
width: 30px;
}
#leftDiv {
width: 20px;
}
清单 4. LESS 文件
// 定义一个样式选择器
.roundedCorners(@radius:5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
// 在另外的样式选择器中使用
#header {
.roundedCorners;
}
#footer {
.roundedCorners(10px);
}
清单 4. 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;
}
5. 边框倒角传参—-LESS 文件
// 定义一个样式选择器
.borderRadius(@radius){
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
// 使用已定义的样式选择器
#header {
.borderRadius(10px); // 把 10px 作为参数传递给样式选择器
}
.btn {
.borderRadius(3px);// // 把 3px 作为参数传递给样式选择器
}
5. 边框倒角传参—-CSS 文件
#header {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.btn {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
6. 边框倒角传参加值—-LESS 文件
.borderRadius(@radius:5px){
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
.btn {
.borderRadius;
}
6. 边框倒角传参加值—-CSS 文件
.btn {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
7. 阴影—-LESS 文件
.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);
}
7. 阴影—-CSS 文件
#header {
-moz-box-shadow: 2px 2px 3px #FF36;
-webkit-box-shadow: 2px 2px 3px #FF36;
box-shadow: 2px 2px 3px #FF36;
}
在我们书写标准 CSS 的时候,遇到多层的元素嵌套这种情况时,我们要么采用从外到内的选择器嵌套定义,要么采用给特定元素加 CLASS 或 ID 的方式。在 LESS 中我们可以这样写:
8. HTML 片段
<div id="home">
<div id="top">topdiv>
<div id="center">
<div id="left">leftdiv>
<div id="right">rightdiv>
div>
div>
8. 堆叠简便写法—-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%;
}
}
}
8. 堆叠简便写法—-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%;
}
9. 元素后代写法—-LESS 文件
a {
color: red;
text-decoration: none;
&:hover {// 有 & 时解析的是同一个元素或此元素的伪类,没有 & 解析是后代元素
color: black;
text-decoration: underline;
}
}
9. 元素后代写法—-CSS 文件
a {
color: red;
text-decoration: none;
}
a:hover {
color: black;
text-decoration: underline;
}
10 . 颜色变亮变暗—-LESS 文件
div{
background:lighten(#000,10%);
color:darken(#fff,10%);
}
10 .颜色变亮变暗—-CSS 文件
div{
background:#1a1a1a;
color:#e6e6e6;
}
在我们的 CSS 中充斥着大量的数值型的 value,比如 color、padding、margin 等,这些数值之间在某些情况下是有着一定关系的,那么我们怎样利用 LESS 来组织我们这些数值之间的关系呢?我们来看这段代码:
清单 11 . LESS 文件
@init: #111111;
@transition: @init*2;
.switchColor {
color: @transition;
}
清单 11. CSS 文件
.switchColor {
color: #222222;
}