Created
September 13, 2012 18:36
-
-
Save mirisuzanne/3716546 to your computer and use it in GitHub Desktop.
THE MOST POWERFUL SASS MIXIN EVAR.
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
// Apply any css property/value pair. | |
@mixin css( | |
$azimuth: null, | |
$background: null, | |
$background-attachment: null, | |
$background-color: null, | |
$background-image: null, | |
$background-position: null, | |
$background-repeat: null, | |
$border: null, | |
$border-collapse: null, | |
$border-color: null, | |
$border-spacing: null, | |
$border-style: null, | |
$border-top: null, | |
$border-right: null, | |
$border-bottom: null, | |
$border-left: null, | |
$border-top-color: null, | |
$border-right-color: null, | |
$border-bottom-color: null, | |
$border-left-color: null, | |
$border-top-style: null, | |
$border-right-style: null, | |
$border-bottom-style: null, | |
$border-left-style: null, | |
$border-top-width: null, | |
$border-right-width: null, | |
$border-bottom-width: null, | |
$border-left-width: null, | |
$border-width: null, | |
$bottom: null, | |
$caption-side: null, | |
$clear: null, | |
$clip: null, | |
$color: null, | |
$content: null, | |
$counter-increment: null, | |
$counter-reset: null, | |
$cue: null, | |
$cue-after: null, | |
$cue-before: null, | |
$cursor: null, | |
$direction: null, | |
$display: null, | |
$elevation: null, | |
$empty-cells: null, | |
$float: null, | |
$font: null, | |
$font-family: null, | |
$font-size: null, | |
$font-size-adjust: null, | |
$font-stretch: null, | |
$font-style: null, | |
$font-variant: null, | |
$font-weight: null, | |
$height: null, | |
$left: null, | |
$letter-spacing: null, | |
$line-height: null, | |
$list-style: null, | |
$list-style-image: null, | |
$list-style-position: null, | |
$list-style-type: null, | |
$margin: null, | |
$margin-top: null, | |
$margin-right: null, | |
$margin-bottom: null, | |
$margin-left: null, | |
$marker-offset: null, | |
$marks: null, | |
$max-height: null, | |
$max-width: null, | |
$min-height: null, | |
$min-width: null, | |
$orphans: null, | |
$outline: null, | |
$outline-color: null, | |
$outline-style: null, | |
$outline-width: null, | |
$overflow: null, | |
$padding: null, | |
$padding-top: null, | |
$padding-right: null, | |
$padding-bottom: null, | |
$padding-left: null, | |
$page: null, | |
$page-break-after: null, | |
$page-break-before: null, | |
$page-break-inside: null, | |
$pause: null, | |
$pause-after: null, | |
$pause-before: null, | |
$pitch: null, | |
$pitch-range: null, | |
$play-during: null, | |
$position: null, | |
$quotes: null, | |
$richness: null, | |
$right: null, | |
$size: null, | |
$speak: null, | |
$speak-header: null, | |
$speak-numeral: null, | |
$speak-punctuation: null, | |
$speech-rate: null, | |
$stress: null, | |
$table-layout: null, | |
$text-align: null, | |
$text-decoration: null, | |
$text-indent: null, | |
$text-shadow: null, | |
$text-transform: null, | |
$top: null, | |
$unicode-bidi: null, | |
$vertical-align: null, | |
$visibility: null, | |
$voice-family: null, | |
$volume: null, | |
$white-space: null, | |
$widows: null, | |
$width: null, | |
$word-spacing: null, | |
$z-index: null | |
) { | |
azimuth: $azimuth; | |
background: $background; | |
background-attachment: $background-attachment; | |
background-color: $background-color; | |
background-image: $background-image; | |
background-position: $background-position; | |
background-repeat: $background-repeat; | |
border: $border; | |
border-collapse: $border-collapse; | |
border-color: $border-color; | |
border-spacing: $border-spacing; | |
border-style: $border-style; | |
border-top: $border-top; | |
border-right: $border-right; | |
border-bottom: $border-bottom; | |
border-left: $border-left; | |
border-top-color: $border-top-color; | |
border-right-color: $border-right-color; | |
border-bottom-color: $border-bottom-color; | |
border-left-color: $border-left-color; | |
border-top-style: $border-top-style; | |
border-right-style: $border-right-style; | |
border-bottom-style: $border-bottom-style; | |
border-left-style: $border-left-style; | |
border-top-width: $border-top-width; | |
border-right-width: $border-right-width; | |
border-bottom-width: $border-bottom-width; | |
border-left-width: $border-left-width; | |
border-width: $border-width; | |
bottom: $bottom; | |
caption-side: $caption-side; | |
clear: $clear; | |
clip: $clip; | |
color: $color; | |
content: $content; | |
counter-increment: $counter-increment; | |
counter-reset: $counter-reset; | |
cue: $cue; | |
cue-after: $cue-after; | |
cue-before: $cue-before; | |
cursor: $cursor; | |
direction: $direction; | |
display: $display; | |
elevation: $elevation; | |
empty-cells: $empty-cells; | |
float: $float; | |
font: $font; | |
font-family: $font-family; | |
font-size: $font-size; | |
font-size-adjust: $font-size-adjust; | |
font-stretch: $font-stretch; | |
font-style: $font-style; | |
font-variant: $font-variant; | |
font-weight: $font-weight; | |
height: $height; | |
left: $left; | |
letter-spacing: $letter-spacing; | |
line-height: $line-height; | |
list-style: $list-style; | |
list-style-image: $list-style-image; | |
list-style-position: $list-style-position; | |
list-style-type: $list-style-type; | |
margin: $margin; | |
margin-top: $margin-top; | |
margin-right: $margin-right; | |
margin-bottom: $margin-bottom; | |
margin-left: $margin-left; | |
marker-offset: $marker-offset; | |
marks: $marks; | |
max-height: $max-height; | |
max-width: $max-width; | |
min-height: $min-height; | |
min-width: $min-width; | |
orphans: $orphans; | |
outline: $outline; | |
outline-color: $outline-color; | |
outline-style: $outline-style; | |
outline-width: $outline-width; | |
overflow: $overflow; | |
padding: $padding; | |
padding-top: $padding-top; | |
padding-right: $padding-right; | |
padding-bottom: $padding-bottom; | |
padding-left: $padding-left; | |
page: $page; | |
page-break-after: $page-break-after; | |
page-break-before: $page-break-before; | |
page-break-inside: $page-break-inside; | |
pause: $pause; | |
pause-after: $pause-after; | |
pause-before: $pause-before; | |
pitch: $pitch; | |
pitch-range: $pitch-range; | |
play-during: $play-during; | |
position: $position; | |
quotes: $quotes; | |
richness: $richness; | |
right: $right; | |
size: $size; | |
speak: $speak; | |
speak-header: $speak-header; | |
speak-numeral: $speak-numeral; | |
speak-punctuation: $speak-punctuation; | |
speech-rate: $speech-rate; | |
stress: $stress; | |
table-layout: $table-layout; | |
text-align: $text-align; | |
text-decoration: $text-decoration; | |
text-indent: $text-indent; | |
text-shadow: $text-shadow; | |
text-transform: $text-transform; | |
top: $top; | |
unicode-bidi: $unicode-bidi; | |
vertical-align: $vertical-align; | |
visibility: $visibility; | |
voice-family: $voice-family; | |
volume: $volume; | |
white-space: $white-space; | |
widows: $widows; | |
width: $width; | |
word-spacing: $word-spacing; | |
z-index: $z-index; | |
} |
I'll happily accept pull requests. Maybe I should turn it into a plugin...
Next: Write a mixin that can be used to design any website completely, using one single include. I'm thinking a combination of lists and listargs should make it possible. each listarg is a selector string followed by any number of property/value pairs. We could even check those pairs against compass to add cross-browser support. Because, if you're going to misuse Sass, you should make sure to misuse it the same in every browser.
Should the defaults be initial just for giggles? 😂🥰
@castastrophe lol
, that customization is left as an exersize for the reader 😅
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
lacks cross-browser support, how about zoom ?