CSS(五):CSS框架LESS
作者 Viliam | 发布于 2015-11-11
CSS

什么是LESS?LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。

它的作用是为了更快速地写CSS,举个简单的例子,假设我需要手写这样的一个样式:

    .test{
        font-size:12px;

    }
    .test a{
        color:#ff0000;
        text-decoration: none;
    }
    .test a:hover{
        color:#ff0000;
        text-decoration: underline;
    }

上面的这几行样式,写起来需要重复写类名.test,如果用LESS写,不仅减少这些繁琐的工作,还能让代码看起来更简洁,LESS写法如下:

    .test{
        font-size:12px;

        a{
            color:#ff0000;
            text-decoration: none;

               &:hover{
                color:#ff0000;
                text-decoration: underline;
               }
        }
    }

这是其中的一种嵌套写法,经过编译后,就会和手写的CSS一模一样

变量定义写法,LESS源码:

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

编译后的CSS:

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

混合写LESS源码:

.my-radius (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
}

#header {
    .my-radius;
}
#footer {
    .my-radius(10px);
}

编译后的CSS:

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

还有一种是函数与运算,LESS源码:

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
    color: (@base-color * 3);
    border-left: @the-border;
    border-right: (@the-border * 2);
}
#footer {
    color: (@base-color + #003300);
    border-color: desaturate(@red, 10%);
}

编译后:

#header {
    color: #333;
    border-left: 1px;
    border-right: 2px;
}
#footer {
    color: #114411;
    border-color: #7d2717;
}

如何编译写好的LESS文件?请查看gulp使用教程文章。

本站说明

前端开发、体验、交互、设计、技术、分享 i--do.com,包含javascript、html、css、nodeJS、demo展示等。转载文章请标注文章来源。

联系我

E-Mail: 709694072@qq.com