在前端开发中，CSS 是不可或缺的一部分。然而，有些效果无论如何也无法通过 CSS 实现。这时候，我们可以考虑使用 SASS 来解决这个问题。
无法实现的效果
父元素高度自适应子元素高度
在 CSS 中，父元素无法自适应子元素的高度。例如，当子元素使用了浮动或绝对定位时，父元素的高度无法根据子元素自适应。
垂直居中
在 CSS 中，垂直居中是一个困难的问题。虽然有一些解决方案，如使用 flexbox 或绝对定位，但是它们仍然存在一些限制。
循环
在 CSS 中，无法进行循环操作。这意味着我们无法通过简单的方式来生成多个样式规则。
SASS 的解决方案
父元素高度自适应子元素高度
使用 SASS，我们可以使用嵌套规则来解决这个问题。具体来说，我们可以使用 @extend 来继承子元素的样式，并将其应用于父元素。这样，父元素的高度就可以自适应子元素的高度了。
.child {
height: 100px;
}
.parent {
@extend .child;
}垂直居中
使用 SASS，我们可以使用 @mixin 来定义一个居中的样式规则，并将其应用于需要居中的元素。具体来说，我们可以使用 transform 和 translate 属性来实现垂直居中。
-- -------------------- ---- ------- ------ ------ - --------- --------- ---- ---- ----- ---- ---------- --------------- ------ - -------- - -------- ------- -
循环
使用 SASS，我们可以使用 @for 循环来生成多个样式规则。具体来说，我们可以使用 #{} 插值语法来动态生成样式规则的名称。
@for $i from 1 through 3 {
.item-#{$i} {
width: 100px * $i;
}
}结论
虽然 CSS 无法实现某些效果，但是使用 SASS 可以解决这些问题。通过嵌套规则、@extend、@mixin 和 @for 循环等功能，我们可以更加灵活地编写样式规则，使得我们的代码更加简洁、易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6753e9a21b963fe9cc4a827b