学习Less预处理语言

学习Less预处理语言

一，什么是less？
Less 是一种动态样式语言，可以说是css的升级，因为他属于css预处理语言的一种。他使用类似css的语法，为css赋予了动态语言的特性。大部分体现在变量、继承、运算、函数等方面。方便了css的编写和维护。
二，什么是预处理css？
预处理css就是语言的超集，比css更丰满。 CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。
预处理css大概分类有：Sass(SCSS),less,stylus,turbine,swithch CSS,CSS Cacheer,DT CSS等等。其中最好的是Sass，less和stylus。
三，less语法：
// 注释模板，less里的注释会转换成css后被删除。
/* 这样的注释不会被删除，在css中仍然会保留*/。

---

四、定义变量：
@变量名：变量值；

   @bgColor: #f5f5f5 ;       
   body{                                              
       width:@变量名；                           
       background-color：@bgcolor；  
   }         

==>转换成css

body{             
width: 变量值 ;          
background-color: #f5f5f5; 
}

五，嵌套：
如果你在css中经常使用自带选择器的话，那么less的嵌套语法使用起来会感觉非常爽的！

.container { 
    width: @containerWidth; 
        > .row { 
            height: 100%; 
            a{ 
                color: #f40; 
                &:hover{ 
                    color: #f50; 
                } 
            } 
        } 
        div { 
            width: 100px; 
            .hello { 
                background-color: #00f; 
            } 
        } 
    }

==>转换成css是这样子的

.container {

  width: 1024px;

}

.container > .row {

  height: 100%;

}

.container > .row a {

  color: #f40;

}

.container > .row a:hover {

  color: #f50;

}

.container div {

  width: 100px;

}

.container div .hello {

  background-color: #00f;

}

六、​Mixin

/* 定义一个类 */ 
.roundedCorners(@radius: 5px) { 
-moz-border-radius: @radius; 
-webkit-border-radius: @radius; 
border-radius: @radius; 
} 
/* 定义的类应用到另个一个类中 */ 
＃header { 
.roundedCorners; 
} 
#footer { 
.roundedCorners(10px);
}

七，Import
一般情况下可以在开发阶段将样式放到多个文件中，最后通过@import的方式进行合并。

// main.less 
@btnColor: red; 
@import url('_buttom.less'); 
body{ 
    width: 1024px; 
} 
// _buttom.less 
.btn{ 
    color: @btnColor; 
}
//==>转成css 
.btn{ 
    color: red; 
} 
body{ 
    width: 1024px; 
}

八，函数
内置函数：
lighten：将一个颜色变亮

    lighten(#000, 10%); // #1a1a1a

darken：将一个颜色变暗

    darken(#000, 10%); // #e6e6e6