从 susy 中改变宽度的 div 中获取网格列的宽度

Question

susy 新手，找不到这个简单问题的答案：

这是 html 结构：

<div class="wrap">
    <div class="sidebar">
        <h2>element</h2>
    </div>
    <div class="main"></div>
</div>

这是我的基本 susy 设置和布局：

$susy : (
    columns : 16, 
    gutters : 0, 
    global-box-sizing : border-box
);
@include global-box-sizing;
.wrap { 
    @include container; 
}
.sidebar {
    position: fixed;
    top:0;
    left:0;
    width: span(1);
    height: 100vh;
    transition: width 0.3s ease;
}
.sidebar:hover {
    width: span(4);
}
.main {
    margin-left: span(1);
    @include span (15 of 16);
    transition: margin-left 0.3s ease;
}
.pushed {
    margin-left: span(4);
}

基本上，侧边栏在悬停时从 1 列扩展到 4 列，并且主 div 会相应地被推动。

我需要向 .sidebar 中的元素添加 1 列的边距或填充，以便在边栏展开之前它是不可见的。但是，如果我使用 .sidebar h2 { @include prefix(1 of 1)} ，则填充会与侧边栏一起扩展并且永远不会显示。如果我改用 margin-left:span(1)，我会得到一个非常小的值（边栏宽度的 1/16？）。

如何从 .sidebar 中获取网格的宽度值（即 span(1)）？

Answer 1

我猜你需要这样的东西 .sidebar:hover h2 { @include prefix(1 of 4); }。

由于您的 Susy 数学是流动的，因此值是基于百分比的并且取决于它们所在的上下文。因此，通过将宽度从 span(1) 更改为 span(4)，您正在更改所有内部元素的上下文。

根据您的标记和代码的外观，我会假设您正在尝试构建非 canvas 导航的东西？在那种情况下，我建议做一些事情 like this

.sidebar h2 { 
    transform: translateX(100%); 
    transition: transform .3s ease;
}

.sidebar:hover h2 {  
    transform: translateX(25%); // 1/4 of the sidebar width
}

从 susy 中改变宽度的 div 中获取网格列的宽度

Get the width of grid columns from within a div of changing width in susy

sass

susy