Created
December 27, 2015 18:19
-
-
Save jdlich/8aa61bb5be974952754b to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// libsass (v3.3.2) | |
// ---- | |
@mixin width-helpers($breakpoint:"") { | |
$columns: (1,one) (2,two) (3,three) (4,four) (5,five) (6,six) (7,seven) (8,eight) (9,nine) (10,ten) (11,eleven) (12,twelve) (13,thirteen) (14,fourteen) (15,fifteen) (16,sixteen); | |
@each $column in $columns { | |
$column-count: nth($column, 1); | |
$column-class: nth($column, 2); | |
@each $num in $columns { | |
$num-value: nth($num, 1); | |
$num-class: nth($num, 2); | |
@if $column-count >= $num-value { | |
.#{$breakpoint}#{$num-class}-#{$column-class} { | |
width: 100/$column-count * $num-value * 1%; | |
} | |
} | |
} | |
} | |
} | |
@include width-helpers(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.one-one { | |
width: 100%; | |
} | |
.one-two { | |
width: 50%; | |
} | |
.two-two { | |
width: 100%; | |
} | |
.one-three { | |
width: 33.33333%; | |
} | |
.two-three { | |
width: 66.66667%; | |
} | |
.three-three { | |
width: 100%; | |
} | |
.one-four { | |
width: 25%; | |
} | |
.two-four { | |
width: 50%; | |
} | |
.three-four { | |
width: 75%; | |
} | |
.four-four { | |
width: 100%; | |
} | |
.one-five { | |
width: 20%; | |
} | |
.two-five { | |
width: 40%; | |
} | |
.three-five { | |
width: 60%; | |
} | |
.four-five { | |
width: 80%; | |
} | |
.five-five { | |
width: 100%; | |
} | |
.one-six { | |
width: 16.66667%; | |
} | |
.two-six { | |
width: 33.33333%; | |
} | |
.three-six { | |
width: 50%; | |
} | |
.four-six { | |
width: 66.66667%; | |
} | |
.five-six { | |
width: 83.33333%; | |
} | |
.six-six { | |
width: 100%; | |
} | |
.one-seven { | |
width: 14.28571%; | |
} | |
.two-seven { | |
width: 28.57143%; | |
} | |
.three-seven { | |
width: 42.85714%; | |
} | |
.four-seven { | |
width: 57.14286%; | |
} | |
.five-seven { | |
width: 71.42857%; | |
} | |
.six-seven { | |
width: 85.71429%; | |
} | |
.seven-seven { | |
width: 100%; | |
} | |
.one-eight { | |
width: 12.5%; | |
} | |
.two-eight { | |
width: 25%; | |
} | |
.three-eight { | |
width: 37.5%; | |
} | |
.four-eight { | |
width: 50%; | |
} | |
.five-eight { | |
width: 62.5%; | |
} | |
.six-eight { | |
width: 75%; | |
} | |
.seven-eight { | |
width: 87.5%; | |
} | |
.eight-eight { | |
width: 100%; | |
} | |
.one-nine { | |
width: 11.11111%; | |
} | |
.two-nine { | |
width: 22.22222%; | |
} | |
.three-nine { | |
width: 33.33333%; | |
} | |
.four-nine { | |
width: 44.44444%; | |
} | |
.five-nine { | |
width: 55.55556%; | |
} | |
.six-nine { | |
width: 66.66667%; | |
} | |
.seven-nine { | |
width: 77.77778%; | |
} | |
.eight-nine { | |
width: 88.88889%; | |
} | |
.nine-nine { | |
width: 100%; | |
} | |
.one-ten { | |
width: 10%; | |
} | |
.two-ten { | |
width: 20%; | |
} | |
.three-ten { | |
width: 30%; | |
} | |
.four-ten { | |
width: 40%; | |
} | |
.five-ten { | |
width: 50%; | |
} | |
.six-ten { | |
width: 60%; | |
} | |
.seven-ten { | |
width: 70%; | |
} | |
.eight-ten { | |
width: 80%; | |
} | |
.nine-ten { | |
width: 90%; | |
} | |
.ten-ten { | |
width: 100%; | |
} | |
.one-eleven { | |
width: 9.09091%; | |
} | |
.two-eleven { | |
width: 18.18182%; | |
} | |
.three-eleven { | |
width: 27.27273%; | |
} | |
.four-eleven { | |
width: 36.36364%; | |
} | |
.five-eleven { | |
width: 45.45455%; | |
} | |
.six-eleven { | |
width: 54.54545%; | |
} | |
.seven-eleven { | |
width: 63.63636%; | |
} | |
.eight-eleven { | |
width: 72.72727%; | |
} | |
.nine-eleven { | |
width: 81.81818%; | |
} | |
.ten-eleven { | |
width: 90.90909%; | |
} | |
.eleven-eleven { | |
width: 100%; | |
} | |
.one-twelve { | |
width: 8.33333%; | |
} | |
.two-twelve { | |
width: 16.66667%; | |
} | |
.three-twelve { | |
width: 25%; | |
} | |
.four-twelve { | |
width: 33.33333%; | |
} | |
.five-twelve { | |
width: 41.66667%; | |
} | |
.six-twelve { | |
width: 50%; | |
} | |
.seven-twelve { | |
width: 58.33333%; | |
} | |
.eight-twelve { | |
width: 66.66667%; | |
} | |
.nine-twelve { | |
width: 75%; | |
} | |
.ten-twelve { | |
width: 83.33333%; | |
} | |
.eleven-twelve { | |
width: 91.66667%; | |
} | |
.twelve-twelve { | |
width: 100%; | |
} | |
.one-thirteen { | |
width: 7.69231%; | |
} | |
.two-thirteen { | |
width: 15.38462%; | |
} | |
.three-thirteen { | |
width: 23.07692%; | |
} | |
.four-thirteen { | |
width: 30.76923%; | |
} | |
.five-thirteen { | |
width: 38.46154%; | |
} | |
.six-thirteen { | |
width: 46.15385%; | |
} | |
.seven-thirteen { | |
width: 53.84615%; | |
} | |
.eight-thirteen { | |
width: 61.53846%; | |
} | |
.nine-thirteen { | |
width: 69.23077%; | |
} | |
.ten-thirteen { | |
width: 76.92308%; | |
} | |
.eleven-thirteen { | |
width: 84.61538%; | |
} | |
.twelve-thirteen { | |
width: 92.30769%; | |
} | |
.thirteen-thirteen { | |
width: 100%; | |
} | |
.one-fourteen { | |
width: 7.14286%; | |
} | |
.two-fourteen { | |
width: 14.28571%; | |
} | |
.three-fourteen { | |
width: 21.42857%; | |
} | |
.four-fourteen { | |
width: 28.57143%; | |
} | |
.five-fourteen { | |
width: 35.71429%; | |
} | |
.six-fourteen { | |
width: 42.85714%; | |
} | |
.seven-fourteen { | |
width: 50%; | |
} | |
.eight-fourteen { | |
width: 57.14286%; | |
} | |
.nine-fourteen { | |
width: 64.28571%; | |
} | |
.ten-fourteen { | |
width: 71.42857%; | |
} | |
.eleven-fourteen { | |
width: 78.57143%; | |
} | |
.twelve-fourteen { | |
width: 85.71429%; | |
} | |
.thirteen-fourteen { | |
width: 92.85714%; | |
} | |
.fourteen-fourteen { | |
width: 100%; | |
} | |
.one-fifteen { | |
width: 6.66667%; | |
} | |
.two-fifteen { | |
width: 13.33333%; | |
} | |
.three-fifteen { | |
width: 20%; | |
} | |
.four-fifteen { | |
width: 26.66667%; | |
} | |
.five-fifteen { | |
width: 33.33333%; | |
} | |
.six-fifteen { | |
width: 40%; | |
} | |
.seven-fifteen { | |
width: 46.66667%; | |
} | |
.eight-fifteen { | |
width: 53.33333%; | |
} | |
.nine-fifteen { | |
width: 60%; | |
} | |
.ten-fifteen { | |
width: 66.66667%; | |
} | |
.eleven-fifteen { | |
width: 73.33333%; | |
} | |
.twelve-fifteen { | |
width: 80%; | |
} | |
.thirteen-fifteen { | |
width: 86.66667%; | |
} | |
.fourteen-fifteen { | |
width: 93.33333%; | |
} | |
.fifteen-fifteen { | |
width: 100%; | |
} | |
.one-sixteen { | |
width: 6.25%; | |
} | |
.two-sixteen { | |
width: 12.5%; | |
} | |
.three-sixteen { | |
width: 18.75%; | |
} | |
.four-sixteen { | |
width: 25%; | |
} | |
.five-sixteen { | |
width: 31.25%; | |
} | |
.six-sixteen { | |
width: 37.5%; | |
} | |
.seven-sixteen { | |
width: 43.75%; | |
} | |
.eight-sixteen { | |
width: 50%; | |
} | |
.nine-sixteen { | |
width: 56.25%; | |
} | |
.ten-sixteen { | |
width: 62.5%; | |
} | |
.eleven-sixteen { | |
width: 68.75%; | |
} | |
.twelve-sixteen { | |
width: 75%; | |
} | |
.thirteen-sixteen { | |
width: 81.25%; | |
} | |
.fourteen-sixteen { | |
width: 87.5%; | |
} | |
.fifteen-sixteen { | |
width: 93.75%; | |
} | |
.sixteen-sixteen { | |
width: 100%; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment