首页 > 代码库 > LESS笔记

LESS笔记

2024-08-08 13:36:32   221人阅读

  使用LESS可以简化CSS的书写。

  LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。一个简单的例子：

@color: #4D926F;  #header {   color: @color;  }  h2 {   color: @color;  }

对应的CSS：

#header {   color: #4D926F;  }  h2 {   color: #4D926F;  }

变量

LESS

@border-color : #b5bcc7;  .mythemes tableBorder{    border : 1px solid @border-color;  }

对应的CSS

.mythemes tableBorder {   border: 1px solid #b5bcc7;  }

变量是值级别的复用，可以将相同的值定义起来统一管理。
LESS中也有变量范围：

 @width : 20px;  #homeDiv {    @width : 30px;    #centerDiv{        width : @width;              }  }  #leftDiv {      width : @width;  }

对应CSS

 #homeDiv #centerDiv {   width: 30px;  }  #leftDiv {   width: 20px;  }

Mixins(混入)
混入指在一个class中引入另一个已经定义的class,如：

.roundedCorners(@radius:5px) {  -moz-border-radius: @radius;  -webkit-border-radius: @radius;  border-radius: @radius;  }   #header {  .roundedCorners;  }  #footer {  .roundedCorners(10px);  }

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

LESS支持 Parametric Mixins（混入参数），如

 .borderRadius(@radius){  -moz-border-radius: @radius;  -webkit-border-radius: @radius;  border-radius: @radius;  }  #header {  .borderRadius(10px);  }  .btn {  .borderRadius(3px); }

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

还可以给Mixins定义默认值：

.borderRadius(@radius:5px){  -moz-border-radius: @radius;  -webkit-border-radius: @radius;  border-radius: @radius;  }  .btn {  .borderRadius;  }

对应CSS：

 .btn {  -moz-border-radius: 5px;  -webkit-border-radius: 5px;  border-radius: 5px;  }

LESS的命名空间：

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

嵌套规则
HTML：

 <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 的嵌套规则的写法是 HTML 中的 DOM 结构相对应的，这样使样式表书写更加简洁和更好的可读性。

 

LESS笔记


联系
我们