sass定义函数控制元素position的所有位置-超级方便

这里写图片描述
当页面布局用的比较多postition:absolute的时候,我们可以利用sass定义简单的函数,实现多次操作。
html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/test1.css"/>
    </head>
    <body>
        <div class="div1">div1</div>
        <div class="div2">div2</div>
        <div class="div3">div3</div>
        <div class="div4">div4</div>
        <div class="div5">div5</div>
        <div class="div6">div6</div>
        <div class="div7">div7</div>
        <div class="div8">div8</div>
        <div class="div9">div9</div>
    </body>
</html>

scss:


@mixin qfun($w,$h,$vertical,$ver,$horizontal,$hor){
    width: $w+px;
    height: $h+px;
    position: absolute;
    @if ($vertical == t){
        top: $ver+px;
    }@else if($vertical == b){
        bottom: $ver+px;
    }@else if($vertical == m){
        top: 50%;
        margin-top: -$w/2+px;
    }
    @if ($horizontal == l) {
        left: $hor+px;
    }@else if($horizontal == r){
        right:$hor+px;
    }@else if($horizontal == m){
        left: 50%;
        margin-left: -$h/2+px;
    }
}
body{
    position: relative;
    width: 800px;
    height: 800px;
    border: 1px solid #000000;
    .div1{
        background: palegreen;
        @include qfun(200,200,'t',12,'l',20);
    }
    .div2{
        background: #0000FF;
        @include qfun(200,200,'t',12,'m',0);
    }
    .div3{
        background: wheat;
        @include qfun(200,200,'t',12,'r',20);
    }
    .div4{
        background: #F06633;
        @include qfun(200,200,'m',0,'l',20);
    }
    .div5{
        background: #FFC0CB;
        @include qfun(200,200,'m',0,'m',0);
    }
    .div6{
        background: #535F6D;
        @include qfun(200,200,'m',0,'r',20);
    }
    .div7{
        background: palegreen;
        @include qfun(200,200,'b',12,'l',20);
    }
    .div8{
        background: brown;
        @include qfun(200,200,'b',12,'m',0);
    }
    .div9{
        background: gold;
        @include qfun(200,200,'b',12,'r',20);
    }
}

如果没有安装scss文件转换成css文件的同学需要安装,然后进行转换。

阅读更多

扫码向博主提问

PPT程序猿

天道酬勤
去开通我的Chat快问
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页