Question

Susy的新手，无法找到这个简单问题的答案：

这是html结构：

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

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

$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），您将更改所有内部元素的上下文。

根据您的标记和代码的外观，我会假设您正在尝试构建非画布导航的东西？在这种情况下，我建议做一些事情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中获取网格列的宽度

1 个答案: