Skip to content

Instantly share code, notes, and snippets.

@lukasborawski
Last active April 12, 2016 22:00
Show Gist options
  • Save lukasborawski/8051863 to your computer and use it in GitHub Desktop.
Save lukasborawski/8051863 to your computer and use it in GitHub Desktop.
CSS3 multicolumn SASS @mixin - http://sassmeister.com/gist/8051863.
<div class="test-div"></div>
// Prefixer
@mixin prefixr ($attr, $value, $prefixes) {
@each $prefix in $prefixes {
@if $prefix == webkit {
-webkit-#{$attr}: $value;
}
@else if $prefix == moz {
-moz-#{$attr}: $value;
}
@else if $prefix == cstm {
#{$attr}: $value;
}
}
}
// Multicolumn @mixin
@mixin col-cstm($col-width: 250px, $col-count: 0, $col-gap: 20px, $col-rule: false) {
$base-unit-type: 1px;
$base-unit-size: 1;
$base-unit: $base-unit-type * $base-unit-size !default;
@include prefixr(column-width, $col-width, webkit moz cstm);
@if type-of($col-count) == number and unitless($col-count) {
@include prefixr(column-count, $col-count, webkit moz cstm);
}
@else if type-of($col-count) == number and not unit($base-unit) != px {
@include prefixr(column-count, 2, webkit moz cstm);
$col-count: $col-gap;
}
@else if type-of($col-count) == number and not unitless($col-count) or length($col-count) > 1 {
@include prefixr(column-count, 2, webkit moz cstm);
$col-rule-coords: $col-count;
$width: nth($col-rule-coords, 1);
$style: nth($col-rule-coords, 2);
$color: nth($col-rule-coords, 3);
@include prefixr(column-rule, $width $style $color, webkit moz cstm);
}
@if length($col-gap) > 1 {
@include prefixr(column-gap, 20px, webkit moz cstm);
$col-rule-coords: $col-gap;
$width: nth($col-rule-coords, 1);
$style: nth($col-rule-coords, 2);
$color: nth($col-rule-coords, 3);
@include prefixr(column-rule, $width $style $color, webkit moz cstm);
}
@else if length($col-gap) == 1 {
@include prefixr(column-gap, $col-gap, webkit moz cstm);
}
@if $col-rule != false {
$col-rule-coords: $col-rule;
$width: nth($col-rule-coords, 1);
$style: nth($col-rule-coords, 2);
$color: nth($col-rule-coords, 3);
@include prefixr(column-rule, $width $style $color, webkit moz cstm);
}
}
div {
width: 800px;
@include col-cstm(150px, 4, 20px, 1px outset #000)
}
div {
width: 800px;
-webkit-column-width: 150px;
-moz-column-width: 150px;
column-width: 150px;
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;
-webkit-column-rule: 1px outset black;
-moz-column-rule: 1px outset black;
column-rule: 1px outset black;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment