0

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 会相应地被推送。

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

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

4

1 回答 1

1

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

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

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

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

.sidebar:hover h2 {  
    transform: translateX(25%); // 1/4 of the sidebar width
}
于 2015-04-08T21:10:02.907 回答