less

Posted homehtml

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了less相关的知识,希望对你有一定的参考价值。

一、使用方法

1.1直接引入less.js

好处:能获取客户端的数据,从而进一步计算。
坏处:在客户端解析less造成性能浪费,不利于维护。

1.2koala编译器

每次都要打开软件

1.3在服务器环境编译node npm

对于初学者可能比较生疏
vue项目在用less时,在style里边写:

技术图片

1.4在编译器中实时编译

配置稍微麻烦

二、less是什么?

官方:一种动态样式语言:
变量、继承、运算、函数
我的理解:一个写css的工具,更加的灵活的统筹全局更加方便的计算。

三、嵌套

嵌套:我们可以在一个选择器中嵌套一个选择器来实现继承,这样很大程度减少了代码量,并且代码看起来更加的清晰。

<div class="out">
    <div class="inner"></div>
</div>
.out{
    width:500px;
    height:500px;
    background:#ccc;
    .inner{
        width:500px;
        height:500px;
        background:#ff0000;
    }
}

四、变量

变量:变量允许我们单独定义一系列通用的样式,然后在需要的时候去调用所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。
变量作用域:一个或括号就是一个作用域。

@width:200;
@height:200;
@background:#ff0000;
<div class="out">
    <div class="inner"></div>
</div>
.out{
    width:500px;
    height:500px;
    background:#ccc;
    .inner{
        width:@width*1px;
        height:@height*1px;
        background:@background;
    }
}

五、混合

5.1混合:

将一个定义好的class A引入到另一个class B中,从而简单实现class B继承class A中的所有属性。

.clearFix{
    *zoom:1;
    &:after{
        content:‘‘;
        display:block;
        clear:both;
    }
}
.classa{
    border:1px solid #ff0000;
}
.classb{
    .classa;
    .clearFix;
}

5.2带参数的混合


.classa(@color){
    border:1px solid @color;
}
.classb{
    .classa(#ff0000);
}

5.3带默认参数的混合

.classa(@width:1px,@style:solid){
    border:@width @style #ff0000;
}
.classb{
    .classa(1px,dotted);
}

六、arguments变量

arguments变量,代表了所有的参数(在不在乎参数顺序的时候使用)

.classa(@width:1px,@style:solid){
    border:@arguments #ff0000;
}
.classb{
    .classa(1px,dotted);
}

七、 模式匹配

.border(left,@width:1px){
    border-left:@width solid #333;
}
border(right,@width:1px){
    border-right:@width solid #333;
}
.border(@_,@width:1px){
    width:100px;
}
.box1{
    .border(left,5px)
}
.box2{
    .border(right,5px)
}

八、Math函数

round(5.5)    四舍五入 6
ceil(2.4)    向上取整 3
floor(2.6)    向下取整 2

九、命名空间

.red{
    .button{
        background:red;
    }
}
.blue{
    .button{
        background:red;
    }
}
.box{
    .red > .button;
}

十、注释

// 这种注释方法不会被编译到css文件里面去(通常用于生产环境)
/*
这种注释会被解析到css文件里面去
*/

十一、关联

@import “global.less”

十二、避免编译

.box{
    width:@rem;
    font:(12/@rem)~‘/‘(20/@rem) ‘宋体‘)
}

参考链接

http://www.bootcss.com/p/less...






以上是关于less的主要内容,如果未能解决你的问题,请参考以下文章

使用bootstrap的原因是啥

less快速入门

less快速入门

十分钟入门less(翻译自:Learn lESS in 10 Minutes(or less))

免费下载全套最新014Less视频教程+教学资料+学习课件+源代码+软件开发工具

less与sass书写--敲代码的伙伴koala(考拉)