SCSS

by joshmoto

HTML

<div id="sz_0">

</div>
<div id="sz_1">

</div>
<div id="sz_2">

</div>

SCSS

$sizes_0: (
    sm: 768,
    md: 1024,
    lg: 1200,
    xl: 1600,
    gutter: 48
);

$sizes_1: (
    sm: 768px,
    md: 1024px,
    lg: 1200px,
    xl: 1600px,
    gutter: 48px
);

@function sz_0($size, $divide: 1) {
    @return map-get($sizes_0, $size) / $divide + px;
}

@function sz_1($size) {
    @return map-get($sizes_1, $size);
}

@function sz_2($size) {
    @return map-get($sizes_0, $size);
}

$gutterhalf_0: sz_0(gutter, 2);

$gutterhalf_1: sz_1(gutter) / 2;

$gutterhalf_2: ( sz_2(gutter) / 2 ) + px;

#sz_0::before {
    content: '#{$gutterhalf_0}';
}

#sz_1::before {
    content: '#{$gutterhalf_1}';
}

#sz_2::before {
    content: '#{$gutterhalf_2}';
}