学习 | less学习之入门

Posted 2020-12-04 dirkhe

最近在写css的时候，发现自己写的css特别长，觉得自己写的特别low，所以为了加快自己的开发效率，又重新温习了less，下面就是我学习less的过程。

less是不能被浏览器识别的，要转换成css，有两种方式：

1、硬转换less.js：https://raw.githubusercontent.com/less/less.js/v2.5.3/dist/less.min.js

2、less编译器    npm install less -g  -》lessc style.less style.css

如果想要压缩的版本 还需要安装 less-plugin-clean-css    npm install less-plugin-clean-css -》lessc  style.less  style.css  -clean-css

less 是什么

1、是一种预编译语言
2、有面向对象的思想

less解决什么问题

1、css前缀长
2、css代码复用

less的语法

1、function
杂项函数
字符串函数
列表函数
数学函数
类型函数
颜色定义函数
颜色通道函数
颜色操作函数
颜色混合函数
2、语言特性
变量
混合
嵌套规则& 表示当前选择器的父选择器
四则运算
自定义的函数
命名空间
作用域
3、嵌套思维
4、&思维

less语法

.transition(@duration:1s){
    -webkit-transition:@arguments;
    -moz-transition:@arguments;
    -o-transition:@arguments;
    -ms-transition:@arguments;
    transition:@arguments;
}
.transform(@rotate:360deg){
    -webkit-transform: rotate(@rotate);
    -moz-transform: rotate(@rotate);
    -o-transform: rotate(@rotate);
    -ms-transform: rotate(@rotate);
    transform: rotate(@rotate);
}
.outer{
    margin: 50px;
    width: 200px;
    height: 200px;
    border: solid 1px green;
    @shadowColor:#000;
    .inner{
        margin: 20px;
        height: 100px;
        width: 100px;
        background: lightblue;
        box-shadow:  0 0 5px 0 @shadowColor;
        .transition(@duration:0.5s);
    }
    &:hover {
        .inner{
            box-shadow:  0 0 5px 0 lighten(@shadowColor, 30%);
            .transform();
        }
    }

}
.mixin(@x){z-index:@x;}
.span1{
    color:color("#aaa");
    box-shadow:image-size("./1.png");
    width: image-width("./1.png");
    height: image-height("./1.png");
    transition: convert(1s, "ms");
    .mixin(3);
    display: block;
    margin-top:unit(5,px);
    z-index: get-unit(5px);
}
@list :bold,"b","c","d";
.span2{
    display: block;
    color:escape("red");
    font-family: replace("Times New Roman", "Times New Roman", "arial");
    z-index: length(@list);
    font-weight: extract(@list, 1);
}
.span3{
    display: block;
    z-index: ceil(3.3);
    z-index: floor(3.7);
    width: percentage(.5);
    z-index: round(2.33);
    z-index: round(1.53,1);
    z-index: sqrt(36);
    z-index: abs(-5);
    z-index: max(1, 2);
    z-index: min(1,2);
}
.span4{
    display: block;
    color:rgb(90, 129, 32);
    color:rgba(123, 12, 34,0.5);
}
@red:red;
.span5{
    display: block;
    opacity: alpha(#eee);
    color:lighten(@red, 30%);
    border: solid 1px darken(@red, 50%);
}
[email protected]{red}{
    color:red;
}
@url:"./";

.span6{
    display: block;
    .red;
    width: 100px;
    height: 100px;
    background: url("@{url}1.png");
}
.inline{
    display: inline-block;
    color:green;
}
.span7{
    a{
        color:yellow;
    }
    &:extend(.inline);
}
.a,#b{
    color:blue;
}
.span8{
    .a();
}
.loop(@counter) when (@counter>0){
    .loop(@counter - 1);
    width: (10px * @counter);
}
.span9{
    .loop(3);
    &  {
        color:#9a9a9a;
    }
}

less写购物商城的例子

@import "reset.min.css";
@fff:#ffffff;
.float(@direction:left){
    float: @direction;
}
html body{
    width: 100%;
    height: 100%;
    background: #f4f4f4;
}
.container{
    margin:20px auto;
    width: 1200px;
    overflow: hidden;
}
.header{
    background: @fff;
    span{
        .float();
        width: 90px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 14px;
    }
    a{
        &:extend(.header span);
        width: auto;
        padding: 0 15px;
        color:#999;
        &:hover{
            color:#e01d20;
        }
    }
    
}
.productBox{
    margin-top: 20px;
    width: 1210px;
    li{
        .float();
        margin: 0  10px 10px 0;
        a{
            display: block;
            width: unit(1210/5-10-6-32, px);
            border: 3px solid transparent;
            padding: 0 16px;
            background: @fff;
            img{
                display: block;
                width: 100%;
            }
            p{
                line-height: 20px;
                height: 40px;
                overflow: hidden;
                font-size: 14px;
                color:#999;
            }
            span{
                line-height: 30px;
                color:#555;
                font-size: 16px;
            }
            &:hover{
                border-color: #101d20;
                border-radius: 5px;
                box-shadow: 0 0 5px 0 #333;
            }
        }

    }    
}