Last active
August 29, 2015 14:10
-
-
Save yodasw16/fbe1acacd1ae0703a2cf 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
// ---- | |
// Sass (v3.4.7) | |
// Compass (v1.0.1) | |
// ---- | |
// ========================================================================== | |
// Size overrides | |
// ========================================================================== | |
// | |
// A mixin and set of classes for changing the width of an element. | |
// Use the classes for changing an element width in html, or the | |
// mixin to change in css at different breakpoints. | |
/// | |
// | |
// Available variables | |
/// | |
$size-mixin-step-value: 1; | |
$size-class-step-value: 5; | |
$size-class-range-start: 5; | |
$size-class-range-end: 100; | |
// | |
// Size mixin | |
/// | |
@mixin size($size, $modulo: $size-mixin-step-value) { | |
@if $size % $modulo == 0 { | |
width: unquote('#{$size}%') !important; | |
} | |
} | |
// | |
// Size classes | |
// | |
// This will generate a list of classes in the format `.size-[percent]`. | |
// By default it will generate a class for every 5% step from 5 to 100. | |
/// | |
@for $size from $size-class-range-start through $size-class-range-end { | |
.size-#{$size} { @include size($size, $size-class-step-value) } | |
} | |
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
.size-5 { | |
width: 5% !important; | |
} | |
.size-10 { | |
width: 10% !important; | |
} | |
.size-15 { | |
width: 15% !important; | |
} | |
.size-20 { | |
width: 20% !important; | |
} | |
.size-25 { | |
width: 25% !important; | |
} | |
.size-30 { | |
width: 30% !important; | |
} | |
.size-35 { | |
width: 35% !important; | |
} | |
.size-40 { | |
width: 40% !important; | |
} | |
.size-45 { | |
width: 45% !important; | |
} | |
.size-50 { | |
width: 50% !important; | |
} | |
.size-55 { | |
width: 55% !important; | |
} | |
.size-60 { | |
width: 60% !important; | |
} | |
.size-65 { | |
width: 65% !important; | |
} | |
.size-70 { | |
width: 70% !important; | |
} | |
.size-75 { | |
width: 75% !important; | |
} | |
.size-80 { | |
width: 80% !important; | |
} | |
.size-85 { | |
width: 85% !important; | |
} | |
.size-90 { | |
width: 90% !important; | |
} | |
.size-95 { | |
width: 95% !important; | |
} | |
.size-100 { | |
width: 100% !important; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment