less即学即用------知识储备

前言

前两天去找工作了,年前招聘的不多了,还碰上外包的,还有个卖药的。好吧,我就不吐槽了。我还是乖乖修炼内功,年后找个合适的工作吧。
直入主题less-css预处理语言,有变量、混合、匹配、运算、嵌套、等方法,第一次接触less是因为bootstrap,当时跟着老师看了看官方文档。现在决定自己动手用一用。

知识储备

1. 变量

@color:#ccc;
好吧,这就是变量,让css像js一样,不用记住复杂的内容,记住变量名就可以了,方便了书写,同时提高了复用性。
同时变量还可以进行加减乘除的运算,其运算法则跟数学的一样。

2. 混合

less书写比css随意方便了许多、例如:

.item{
font-size:14px;
line-height:30px;
}
.item2{
font-size:14px;
line-height:30px;
color:#ccc;
}

使用less:

.item{
font-size:14px;
line-height:30px;
}
.item2{
.item;//将直接加入.item的内容
color:#ccc;
}

混合还可以加入参数:

.item(@h:30px){
font-size:14px;
line-height:@h;
}
.item2{
.item();//将直接加入.item的内容
color:#ccc;
}

3. 匹配模式

有点类似与js的if, 一个函数适用于不同情况。@_适用于所有情况,其他情况下请对号入座。还是举个栗子吧,

以三角形为例,匹配模式可以匹配三角上下左右四种模式,从而形成方向为上下左右的不同三角形,同时无论选择哪种模式,或者选择一种四者都不是的模式,@_下的css都会执行。

.sanjiao(top,@c:#ccc,@h:10px){
        border:@h;
        border-color:@c transparent transparent transparent;
        border-style:solid dashed dashed dashed;
}
.sanjiao(bottom,@c:#ccc,@h:10px){
        border:@h;
        border-color: transparent transparent @c transparent;
        border-style:dashed dashed solid dashed;
}
.sanjiao(left,@c:#ccc,@h:10px){
        border:@h;
        border-color:transparent @c transparent transparent;
        border-style:dashed solid dashed dashed;
}
.sanjiao(right,@c:#ccc,@h:10px){
        border:@h;
        border-color:transparent transparent transparent @c ;
        border-style:dashed dashed dashed solid;
}
.sanjiao(@_,@c:#ccc,@h:10px)){
        width:0px;
        height:0px;
        overflow:hidden;
}

//使用
.top{
.sanjiao(top);
}

4.嵌套模式

像html一样可以嵌套。

ul{}
ul li{}

less可以写成

ul{
     color:#ccc;
     li{
           float:left;
    }    
}

注意:嵌套层数并非越多越好。保证准确的情况下尽量减少嵌套层数。

eg:clearfix的写法
.clearfix(){
        &:after{
        content:'';
        display:block;
        clear:both;
}
zoom:1;
}

5. @arguments可以代替所有传递进来的参数,也可以被覆盖

Paste_Image.png

6. 避免编译、@important、

6.1 有些时候代码不需要编译,可以使用~"代码"来避免编译。
.test{
width:~'calc(300px-30%)';//~''避免编译''
}
6.2!important 最高优先级 用来测试
.test_important{ .border_03() !important } 最高优先级

7. 文件的相互引用

可以把封装的东西放到一个单独的 less里面,只需要在main.less主文件里面 @import 加文件名 xx 可以省略后缀名.加载css需要 @import(less)'xxx.css' 换汤不换药 还是css那一套加载方式,放到哪里就在哪里加载,样式表!

Paste_Image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容