动态样式语言—LESS基础知识

CSS是一门非程序式语言，缺少逻辑性，不便于维护

LESS在CSS现有语法的基础上，为CSS加入程序式语言的特性

引入了变量、混入、运算、函数等功能，大大简化CSS的编写，降低了CSS的维护成本

LESS包含一套语法和一个解析器，用户用它的语法生成样式规则，这些规则通过解析器后生成CSS文件

1.变量

以{}划分作用域，变量从里往外进行查找

 @width : 20px;
 #homeDiv {
   @width : 30px;
   #centerDiv{
       width : @width;// 此处应该取最近定义的变量 width 的值 30px
              }
 }
 #leftDiv {
     width : @width; // 此处应该取最上面定义的变量 width 的值 20px 

 }

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

2.混入（实现多重继承）

将一个类嵌套到另一个类中使用

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

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

混入参数

// 定义一个样式选择器
 .borderRadius(@radius){
 -moz-border-radius: @radius;
 -webkit-border-radius: @radius;
 border-radius: @radius;
 }
 // 使用已定义的样式选择器
 #header {
 .borderRadius(10px); // 把 10px 作为参数传递给样式选择器
 }
 .btn {
 .borderRadius(3px);// // 把 3px 作为参数传递给样式选择器
 }

arguments参数：表示所有变量：

.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 {...}
 }

嵌套规则：

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

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

&：

a {
 color: red;
 text-decoration: none;
 &:hover {// 有 & 时解析的是同一个元素或此元素的伪类，没有 & 解析是后代元素
  color: black;
  text-decoration: underline;
 }
 }

3.运算及函数

对数值型value（如颜色、数字）进行四则运算

专门针对color的一组函数

 lighten(@color, 10%); // 返回比原色亮10%的颜色
 darken(@color, 10%); //返回比原色暗10%的颜色
 saturate(@color, 10%); //返回比原色饱和10%的颜色
 desaturate(@color, 10%);// 返回比原色不饱和10%的颜色
 fadein(@color, 10%); // 返回比原色不透明10%的颜色
 fadeout(@color, 10%); // 返回比原色透明10%的颜色
 spin(@color, 10); // 比原色大10度色调比
 spin(@color, -10); // 比原色小10度色调比
//使用

init: #f04615;
 #body {
  background-color: fadein(@init, 10%);
 }

4、注释

与JS一样

注意：单行注释不会出现在编译后的CSS文件中，若需要保留注释，使用多行注释

5.使用方式：

客户端：

//注意文件的先后顺序
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script type="text/javascript" src="less.js"></script>

实际项目开发中常用：

编写LESS文件后，直接将它编译成CSS文件，然后引入页面