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

【问题标题】：Get the width of grid columns from within a div of changing width in susy从susy中改变宽度的div中获取网格列的宽度
【发布时间】：2015-04-08 20:42:38
【问题描述】：

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

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

【问题讨论】：

标签： sass susy

【解决方案1】：

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

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

从您的标记和代码的外观来看，我会假设您正在尝试构建画布外导航？在那种情况下，我会建议做一些事情like this

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

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

【讨论】：