如何在 SASS 中将 div 居中放置在另一个 div 的边缘？

在本文中，我们将看到如何使用 将一个 div 居中在另一个 div 的边缘 萨斯。 SASS是 CSS 的扩展，代表Syntactically Awesome Style Sheets 。它帮助我们创建变量、嵌套规则等。这样我们就可以重用代码。

将一个 div 居中放在另一个 div 的边缘并不是一项艰巨的任务。我们可以通过使用 position 属性和 bottom、top left 和 right 属性来实现它。我们需要看到的是 Sass 如何减少我们在这里的工作。

例子：
HTML 代码：在 HTML 中，我们将创建两个 div 元素。一个在外面的称为外层 div ，另一个称为内层 div。

HTML

SASS 代码： Sass 用于提供一般样式并使内部 div 居中位于外部 div 的边缘。我们创建了一个名为 prop 的 mixin，其中包含属性参数(高度、宽度、背景颜色和位置)，这样我们就不需要为两个 div 元素编写相同的内容。我们可以简单地包含这个 mixin 并提供属性的值。我们使用 position 属性并将 left 属性值设置为 50%，这将使内部 div 水平居中。 bottom 属性的值为零，因此内部 div 将位于外部 div 的边缘。

SASS

// For properties of both div
@mixin prop ($height, $width, $bg, $pos) {
    height: $height;
    width: $width;
    background-color: $bg;
    position: $pos;
}
  
#outer-div {
    @include prop(190px, 50%, #0057D9, relative);
}
  
// Inner div properties
#inner-div {
    @include prop(70px, 70px, #8ebf42, absolute);
    left: 50%;
    transform: translate(-50%);
    bottom: 0;
    padding: 3px;
}

输出：

将一个 Div 放在另一个 div 的边缘(GFG)

示例 2：在本示例中，将一个 div 居中放置在另一个 div 的侧边。 HTML 中的所有内容都是相同的。在 Sass 中，我们使用值为 50% 的 top 属性，这将使内部 div 垂直居中，并将 left 属性的值设置为零，这样内部 div 将位于侧边。除了这段代码其余的将是相同的。

SASS

#inner-div {
    @include prop(70px, 70px, #8ebf42, absolute);
    left: 0;
    transform: translate(0, -50%);
    top: 50%;
    padding: 3px;
}

输出：

另一个 div(GFG) 左边缘的中心 div

示例 3：

HTML 代码：在此示例中，我们在外部 div 内创建了四个 div 元素。我们将看到如何将所有内部 div 元素置于外部 div 的边缘。

Sass 代码：在 Sass 中，我们创建了一个名为 prop 的 mixin，我们将其包含在所有 div 元素中。类似地，为我们外部 div 内的所有 div 元素创建了 mixin small div。我们创建另外两个mixin，一个是verticalcentre(mixin)，用于垂直居中div。为了垂直居中 div，我们提供了 50% 的最高值。在 verticalcentre(mixin) 中，有一个 if 和 else 条件，如果 right 的值为 true，则 right 属性的值将为零，否则 left 属性的值将为零，这将决定它的侧边将在。水平中心(混合)也有相同的逻辑，但它会水平居中。

SASS

// Mixin for Common  properties of all div
@mixin prop($height, $width, $bg, $pos) {
    height: $height;
    width: $width;
    background-color: $bg;
    position: $pos;
}
  
// Div inside which we will centre another divs
#outer-div {
    @include prop(190px, 400px, #0057D9, relative);
}
  
// Common properties of all small divs
@mixin smalldiv {
    @include prop(50px, 50px, #8ebf42, absolute);
    padding: 3px;
}
  
// Mixin for div that vertically centred
// on the edge
@mixin verticalcentre($right:false) {
    top: 50%;
    transform: translate(0, -50%);
    @if ($right) {
        right: 0;
    }
    @else {
        left: 0;
    }
}
  
// Mixin for div that are horizontally
// centred on the edge
@mixin horizontalcentre($top:false) {
    left: 50%;
    transform: translate(-50%);
    @if($top) {
        top: 0;
    }
    @else {
        bottom: 0;
    }
}
  
// Including mixin in each div
#top-div {
    @include smalldiv;
    @include horizontalcentre($top: true);
}
  
#bottom-div {
    @include smalldiv;
    @include horizontalcentre($top: false);
}
  
#right-div {
    @include smalldiv;
    @include verticalcentre($right: true);
}
  
#left-div {
    @include smalldiv;
    @include verticalcentre($right: false);
}

输出：

另一个 div (GFG) 边缘的中心 div