SCSS/Sass:使用一个scss类的计算变量作为另一个scss类的基

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函数都必须重写或替换显示值，如、或裕度，但实际上并不使用计算从“未定义”变量中获得新值。

长版本

我有一个SCSS文档，我试图将一个类的数字值用作另一个类的基础。基本上，我试图将从父类(“..page wrapper”)计算出来的高度作为它的子类(“.粘滞-弗特”)的基变量。这是否有可能做到，仅仅是w/ sass和没有javascript修饰符？

对于它的价值，网站本身被设置为水平滚动(除了下面解释的1节)，所有的“..page包装”元素都被设置为显示:沿着w/它的子元素显示:flex。我希望子元素的高度是它的父元素的4倍，以便在该部分中容纳4个不同的内容项。

以下是在我的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}可以工作，但它仍然需要插入父级高度的假定值(75‘s)。

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;，et.al进行设置。然后，页面包装器(对于移动的内容)可以设置页边距或填充集(取决于主要内容的移动方式)以抵消页眉和页脚区域的影响。这种方法可以避免一些计算，允许将注意力集中在其他领域。