sass - 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?)。

内部からグリッドの幅の値 (つまり、span(1)) を取得するにはどうすればよい.sidebarですか?