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

原创 2018年02月08日 14:34:30

这里写图片描述
当页面布局用的比较多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文件的同学需要安装,然后进行转换。

版权声明:本文为博主原创文章,未经博主允许可以随便转载。 https://blog.csdn.net/a419419/article/details/79289381

sass学习--sass的函数功能(进阶篇)

罗列了sass繁杂的函数功能:字符串、数字函数、列表函数、Introspection函数(判断值)、Miscelloneous(三元条件函数)、Maps函数、颜色函数等七个大块!可谓是左宜右有啊!...
  • macanfa
  • macanfa
  • 2016-06-23 22:04:49
  • 10543

10天精通Sass 之 Sass颜色函数

Sass中颜色函数主要分为RGB、HSL和Opacity三大函数。RGB颜色函数 [ ] rgb(red,red, green, $blue)将RGB颜色转换成十六进制颜色 [ ] rgba(colo...
  • liuyan19891230
  • liuyan19891230
  • 2016-08-24 11:37:40
  • 1953

用于控制Tab键的函数

 关于CWnd::GetNextDlgTabItemCWnd* CWnd::GetNextDlgTabItem(        CWnd* pWndCtl,         BOOL bPreviou...
  • magicsutra
  • magicsutra
  • 2007-12-08 20:34:00
  • 686

SASS实现圆形动画菜单

好的,SASS实现的圆形动画菜单,主要用到了sass中的@for、@if,compass中sin、cos的使用,hsl颜色的使用。...
  • whqet
  • whqet
  • 2014-03-21 20:47:06
  • 4024

Sass基础——颜色函数

色彩是设计的一个美妙元素和一个至关重要的工具,同时他能帮助你更好的抓住您的客户。更为重要的是,色彩能帮你表达某些特定的情感,把用户视线带到特点的地方或者帮助你传达信息。在Web设计中,主要依靠颜色来表...
  • mychirs
  • mychirs
  • 2014-11-14 15:24:22
  • 442

sass 语法简介

基本语法: 变量 sass通过$声明变量,例如: $headline-ff:Arial; $main-sec-ff:Tahoma; h1{ font-family: $headline-ff;...
  • hdchangchang
  • hdchangchang
  • 2015-05-20 17:50:20
  • 1585

PowerShell介绍 第十三回 定义参数

经常看到一些脚本可以接受某种形式的输入所, 输入的可能是一个计算机名称、 文件路径等等。曾经我会觉得很神奇,但是现在我已经知道怎么去定义一个参数了。下面我们就来一起学习学习吧。 其实,也挺简单的,用到...
  • melodytu
  • melodytu
  • 2015-11-07 20:53:19
  • 933

Sass/Scss基础——rem与px的自动转换

Sass/Scss中rem的使用 在CSS中,实现px和rem转换非常简单,但每次使用都需进行计算。虽然在html中设置font-size:62.5%即16px*62.5%=10px;会给大家带来...
  • ITYang_
  • ITYang_
  • 2017-03-18 21:06:05
  • 5712

POSITION用法解释

POSITION是MFC模板类库中经常使用的一个数据类型,我们从它的定义可以看出,其实,它就是一个指针。 // abstract iteration position struct __POSIT...
  • L_Andy
  • L_Andy
  • 2013-12-23 18:55:38
  • 7392

sass 公用10个mixins代码块

sass 公用10个mixins代码块
  • hongc93
  • hongc93
  • 2017-05-05 16:54:43
  • 450
收藏助手
不良信息举报
您举报文章:sass定义函数控制元素position的所有位置-超级方便
举报原因:
原因补充:

(最多只允许输入30个字)