CODEWITHSUNDEEP
sasssusy
fekioh
fekioh

Reputation: 996

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

New to susy and can't find an answer to this simple question:

Here's the html structure:

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

and here my basic susy settings and layout:

$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);
}

Basically, the sidebar expands from 1 to 4 columns on hover and the main div gets pushed accordingly.

I need to add a margin or padding of 1 column to an element within .sidebar so that it is invisible until the sidebar expands. However, if I use .sidebar h2 { @include prefix(1 of 1)} the padding expands together with the sidebar and never gets shown. And if I use margin-left:span(1) instead, I get a very small value (1/16th of the sidebar width?).

How can I get the value of the width of the grid (i.e. span(1)) from within .sidebar?

Upvotes: 0

Views: 182

Answers (1)

Teo Dragovic
Teo Dragovic

Reputation: 3518

I guess you need something like this .sidebar:hover h2 { @include prefix(1 of 4); }.

Since your Susy math is fluid, values are percentage based and depend of the context they are in. So by changing width from span(1) to span(4) you are changing context for all inner elements.

By the looks of your markup and code I will assume you are trying to build off-canvas navigation thingy? In that case I would suggest doing something like this

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

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

Upvotes: 1

Related Questions