Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
<div class="container">
<div class="test">hello</div>
<div class="test2">hello</div>
<div class="test">hello</div>
</div>
// ----
// libsass (v3.2.5)
// ----
@import 'susy';
$susy: (
columns: 12,
column-width: 5em,
);
$gutter: gutters(static);
@mixin calc-span($span) {
$span: append($span, 'wide');
float: left;
width: calc(#{span($span)} - #{$gutter});
margin-right: $gutter;
}
.container {
@include container(show);
}
.test {
@include calc-span(3);
background: rgba(gray, .5);
}
.test2 {
@include calc-span(4);
background: rgba(gray, .5);
}
.container {
max-width: 73.75em;
margin-left: auto;
margin-right: auto;
background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 80%, transparent 80%);
background-size: 8.47458%;
background-origin: content-box;
background-clip: content-box;
background-position: left top;
}
.container:after {
content: " ";
display: block;
clear: both;
}
.test {
float: left;
width: calc(25.42373% - 1.25em);
margin-right: 1.25em;
background: rgba(128, 128, 128, 0.5);
}
.test2 {
float: left;
width: calc(33.89831% - 1.25em);
margin-right: 1.25em;
background: rgba(128, 128, 128, 0.5);
}
<div class="container">
<div class="test">hello</div>
<div class="test2">hello</div>
<div class="test">hello</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.