Question

简短版本/澄清

我的问题的要点是，假设每个值对于其上下文都是唯一的，是否可以在 sass 中使用未定义的变量，类似于代数函数。

[formula for height of “.page-wrapper” div]
a * 0.75 = b

[formula for height of nested/child “sticky-vert” div]
b * 4 = c

a=the base value
b=the calculated value of the parent element
c=the calculated value of the child element

……等等

我在 sass 中看到的大多数 @mixins 和 @extend 函数都必须覆盖或替换诸如 color 或 margin 之类的显示值，但实际上并非如此使用计算从“未定义”变量中获取新值。

长版

我有一个 SCSS 文档，我正在尝试从一个类中获取数值以用作另一个类的基础。基本上，我试图将从父类（“.page-wrapper”）计算的高度用作其子类（“.sticky-vert”）的基本变量。这是否可以做到，仅使用 sass 而无需 javascript 修饰符？

值得将网站本身设置为水平滚动（除了 1 部分，如下所述），并且所有“.page-wrapper”元素都设置为 display:flex 和它的子项。我希望子元素的高度是其父元素的四倍，以容纳该部分中的 4 个差异内容项。

1.以下是在我的 scss 文档顶部设置的值：

/*Base Variables*/
    $height: 100vh; // *the default value for height*
    $width: 100vw; // *the default value for width*

2.这些是父容器的计算，使用 $height 值：

.header {height: $height * 0.14} // *header is 14vh, remains static / never scrolls*
.page-wrapper {height: $height * 0.75} // *page-wrapper is 75vh. This is a div container between the header and footer for the main content, this is the only area of the page that moves*
.footer {height: $height * 0.11} // *footer is 11vh, remains static / never scrolls*

把它想象成一个汉堡风格的网页，只有中间移动。

3.这是我要计算的新值，不使用 JS 修饰符或实际数字以提高灵活性：

.sticky-vert {height: height of ".page-wrapper" * 4} // Technically, the formula would be 75vh * 4 = 300vh but...

我不想插入实际数字，以防我稍后更改值并不得不再次插入新数字。此外，虽然 sticky-vert {height: $height * 0.75 * 4} 可以工作，但它仍然需要插入当时假定的父母身高 (75vh) 值。

HTML 示例：

<header class="colors-1">header text, etc etc</header>
        <div class="page-wrapper dark">
            <section class="sec-1">THE PAGE SCROLLS HORIZONTALLY</section>
            <section class="sec-2">UP UNTIL YOU REACH THE NEXT SECTION</section>
            <section class="sec-3 sticky-vert">
                <div id="vert-1">WHICH THEN SCROLLS VERTICALLY, STARTING W/ THIS DIV</div>
                <div id="vert-2">THEN IT SCROLLS DOWN TO THIS ONE.</div>
            </section>
            <section class="sec-4">NOW ITS BACK HORIZONTAL</section>
            <section class="sec-5">AND FINISHES HERE.</section>
        </div>
<footer class="colors-1">footer text, etc, etc</footer>

Answer 1

如果我的操作正确，您可能不需要进行所有这些计算。相反，是否可以为页眉和页脚区域添加高度值，并将它们设置为 position: fixed;，这会将这些元素锁定在您可以使用 top: 0; 设置的位置，等.然后页面包装器（用于移动内容）可以设置边距或填充（取决于主要内容如何移动）以从页眉和页脚区域偏移。这种方法可以避免大量的计算，可以自由地专注于其他领域。

SCSS/Sass：使用来自一个 scss 类的计算变量作为另一个类的基础

1 个答案: