less小技巧

后端转前端,或者UI转前端,往往会写不好css,有没有一种可以像写函数式编程那样对方法来编写css,答案是有的,比如less、sass、stylus等。

什么是less?

这里不多说,请看中文网介绍less中文网

我个人对less、sass、stylus对理解,简单对概括为:让css更接近编程语言。

less是最容易上手对,如果你使用less一段时间,发现会爱不释手。因为它更接近编程思维,优点多多。

less技巧

  1. 就拿移动端来举例子,我们常用像素单位rem,可以很好的适配各种机型的屏幕。首先通过设置js让html元素的字体大小随着屏幕大小的改变而改变。

    1
    2
    3
    var font = window.screen.width / 10 + 'px';
    console.log(font);
    document.getElementsByTagName('html')[0].style.fontSize = font;
    1. 通过less的unit函数转化属性值的单位,定义函数.fs.w

    @px是一个变量也是一个参数,我们可以在调用它的时候给它传递实际参数。下面是移动开发时候经常使用的函数,仅供参考。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    /*把像素转成rem
    375/10 = 37.5
    375 它是ipone6的屏幕宽度
    */
    //默认是20px
    .fs(@px:20px){
    font-size: unit(@px/37.5,rem);
    }
    .w(@px){
    width: unit(@px/37.5,rem);
    }
    .h(@px){
    height: unit(@px/37.5,rem);
    }
    .lh(@px){
    line-height: unit(@px/37.5,rem);
    }
    .pl(@px){
    padding-left: unit(@px/37.5,rem);
    }
    .pr(@px){
    padding-right: unit(@px/37.5,rem);
    }
    .pt(@px){
    padding-top: unit(@px/37.5,rem);
    }
    .pb(@px){
    padding-bottom: unit(@px/37.5,rem);
    }
    .mt(@px){
    margin-top:unit(@px/37.5,rem);;
    }
    .mb(@px){
    margin-bottom:unit(@px/37.5,rem);
    }
    .ml(@px){
    margin-left:unit(@px/37.5,rem);
    }
    .mr(@px){
    margin-right:unit(@px/37.5,rem);
    }
    .top(@px){
    top:unit(@px/37.5,rem);
    }
    .bottom(@px){
    bottom:unit(@px/37.5,rem);
    }
    .left(@px){
    left:unit(@px/37.5,rem);
    }
    .right(@px){
    right:unit(@px/37.5,rem);
    }
    .padding(@tb,@lr){
    padding: unit(@tb/37.5,rem) unit(@lr/37.5,rem);;
    }
    .fl{
    float: left;
    }
    .fr{
    float: right;
    }
    .clearfix{
    clear: both;
    }

可复用属性

提取重复属性,定义一个函数。可在内部和外部调用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
div{
//不会被编译
btn () {
background: #000;
color: #888;
}
header {
//内部调用
btn;
...
}
}
footer{
// 外部调用
div > btn;
}

关于less的技巧还有很多很多,这里只是简单提了一下。孰能生巧,多用就会了。sass、stylus其实跟less都一样,语法也很相似。当你学会less,你就基本掌握了sass、stylus,何乐而不为呢?

Recommended Posts