Sass
%half { width: 50%; }
%full { width: 100%; }
#foo {
@extend %full;
@media screen (min-width: 600px) {
@extend %half;
Avalon:sass Avalon$ compass install sassy-buttons | |
No such framework: "sassy-buttons" |
Avalon:sass Avalon$ compass install -r sass-buttons sassy-buttons --trace | |
LoadError on line 31 of /System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/lib/ruby/1.8/rubygems/custom_require.rb: no such file to load -- sass-buttons | |
Run with --trace to see the full backtrace | |
Avalon:sass Avalon$ |
/** | |
* SVG Filter Shadows on CSS Images | |
* See http://dabblet.com/gist/1562718 for my inspiration. | |
* Original by Lea Verou. Just wanted to see the triangles blown out | |
* Top triangle uses the SVG Shadow (notice how it's actually a triangle) | |
* Bottom is current CSS box shadow (notice how it sucks?) | |
* | |
* Need Webkit Nightly or Canary Chrome to see. | |
*/ |
@for $i from 1 through $shadows-count { | |
$shadow: nth($shadows, $i); | |
$color: nth($shadow, 1); | |
$count: nth($shadow, 2); | |
@for $i from $currentwidth to ($currentwidth + $count) { | |
$x: $x + $x-delta; | |
$y: $y + $y-delta; |
body { | |
background-image: @include linear-gradient(color-stops(white, black), top); | |
} |
// Surprisingly easy, just need to wrap the property in the Interpolation braces. | |
@mixin border-std($position: 'border', $color: #000) { | |
#{$position}: 1px solid $color; | |
} |
Sass
%half { width: 50%; }
%full { width: 100%; }
#foo {
@extend %full;
@media screen (min-width: 600px) {
@extend %half;
////////////////////////////// | |
// Generalized Media Query Mixin | |
// | |
// Requires Sass 3.2+ | |
// Until released: | |
// (sudo) gem install sass --pre | |
////////////////////////////// | |
@mixin media-query($value, $operator: 'min-width', $query: 'screen') { | |
@media #{$query} and (#{$operator}: #{$value}) { | |
@content; |
What if controlling your media queries was as easy as adding on to a Sass list? What if I told you it now is?
This snippet comes from a modified version of mixins in the Aura Responsive Framework and came from me hijacking the respond-to mixin namespace but still wanting to use it for custom media queries. It's a little ugly and requires Sass 3.2+ (for now, (sudo) gem install sass --pre)
, but it works a charm.
There are two fairly mundane caveats to this method. First, every media query needs to be named. Second, every media query needs a size and assumes min-width and screen. If you want to change min-width, simply add your operator as another option, but if you want to change screen, you need to also include your operator even if you want it to be min-width.
Also, I haven't built in warnings yet for when you do bad things, so bear that in mind.
Without further adue, tada.
//////////////////////// | |
// SCSS | |
//////////////////////// | |
// Define color variables | |
$red: #e10000; | |
$orange: #e18700; | |
$yellow: #e1e100; | |
$green: #00b400; | |
$blue: #1e00b4; | |
$purple: #7800b4; |