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中仍然会保留*/。

四、定义变量:

@变量名:变量值;

 eg:   @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

你可能感兴趣的:(less入手)