LESS快速上手

2017-09-13 14:21 出处:简书 人气: 评论(0

Less可以让我们更高效的进行CSS开发,less文件最终会编译为css文件,用于我们的项目中。

在Less中,我们可以用变量保存某些属性值,达到复用的效果;可以用混合功能复用一些代码,用匹配模式实现一些逻辑,用嵌套功能明确层次;还可以在Less使用运算内置函数来得到最终的CSS代码。

Less中的注释

可以用/**/注释,也可以用//注释。

不过//的注释会在编译时过滤掉。

变量

Less中用@加上变量名来声明变量,比如:

@c1:blue;

混合

如下,有普通的混合,#div2使用#div1的样式;有可传参的混合,#div2使用.border的样式。

#div1{
    width:@w;
    height:@h;
    background-color:@c1;
}

#div2{
    #div1;
    .border(pink);
    background-color:@c2;
}

.border(@c){
    border:2px solid @c;
}

其中,.border传入的参数也可以默认带值:

.border(@c:black){
    border:2px solid @c;
}

混合可以用以多浏览器兼容,使写法更方便。比如解决border-radius的兼容:

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

匹配模式

根据传入条件匹配相应的样式。

.size(high,@w){
    height: 80px;
    width: @w;
}

.size(low,@w){
    height: 40px;
    width: @w;
}

#div3{
    .size(high,200px);
}

传入参数为high时,则使用条件为high的样式。

运算

可以对变量和值做加减乘除运算。

比如:

div{
    height:@h+10;
}

嵌套

传统CSS写法:

.list{}
.list li{}

嵌套写法:

.list{
    li{}
}

注意嵌套层数不能太多,影响性能。

另外,需要写伪类的时候,可以用&符号(&代表它的上一层选择器):

a{
    &:hover{}
}

其他

避免编译
div{
    ~'';
}

~符号加上引号,引号内的代码不会被编译。

!important

和CSS中的!important用法类似,可以用于Less的混合模式:

#div2{
    #div1 !important;
}

最后

这是一篇看完慕课网less即学即用教程做的笔记,非常感谢Busy老师。

不论是慕课网的这个视频教程,还是我写的这篇文章,都是讲快速入门的东西。Less变量的使用,还有Less中内置函数的使用,都还有更多的知识可以学习。

内置函数的使用可以参考官方文档函数手册

关于编译

Busy老师推荐的编译Less的工具是考拉,关于考拉工具我就不多说了,使用起来还是蛮方便的。

我个人使用Gulp作为前端构建工具,gulp-less插件可以编译less,还可以用gulp实现CSS代码压缩和自动刷新浏览器页面等功能,想了解的话可以查看用Gulp实现CSS压缩和页面自动刷新

本文标签: 可以编译CSSradiusLessborder

相关文章

网站内容来源于互联网,仅供用于技术学习,请遵循相关法律 规,如有侵权,请联系管理员删除

Copyright © 2002-2017 JISHUX. 技术栈 版权所有

京ICP备15061484号-3