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

最新推荐文章于 2024-06-07 01:28:45 发布

开心大表哥

最新推荐文章于 2024-06-07 01:28:45 发布

阅读量1.2k

点赞数 2

分类专栏： sass

本文链接：https://blog.csdn.net/a419419/article/details/79289381

版权

sass 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这里写图片描述
当页面布局用的比较多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);
    }
}