| $base-font-size: 16px; | |
| $base-line-height: 1.5; | |
| // this value may vary for each font | |
| // unitless value relative to 1em | |
| $cap-height: 0.68; | |
| @mixin baseline($font-size, $scale: 2) { |
| // --- | |
| // Sass (v3.2.9) | |
| // --- | |
| @mixin respond-to($queries...) { | |
| $length: length($queries); | |
| @for $i from 1 through $length{ | |
| @if $i % 2 == 1 { | |
| @media screen and (min-width: nth($queries, $i)) { |
| @mixin retina($ratio: 1.5) { | |
| $dpi: $ratio * 96; | |
| $opera-ratio: $ratio * 100; | |
| @media only screen and (-webkit-min-device-pixel-ratio: #{$ratio}), | |
| only screen and ( -o-min-device-pixel-ratio: '#{$opera-ratio}/100'), | |
| only screen and ( min-resolution: #{$dpi}dpi), | |
| only screen and ( min-resolution: #{$ratio}dppx) { | |
| @content; | |
| } |
| <table> | |
| <thead> | |
| <tr> | |
| <th scope="col">Name</th> | |
| <th scope="col">Email</th> | |
| <th scope="col">Dept, Title</th> | |
| <th scope="col">Phone</th> | |
| </tr> | |
| </thead> | |
| <tbody> |
I asked the following on Twitter the other day:
Thoughts, anyone? "Seems like there are a million ways to do retina sprites with Compass. What's the best way? #sass #compass" tweet
Specifically, what I wanted to do was to reference an icon once, like so:
.selector {
@include the-sprite('once');
| @media only screen and (min-width: 320px) { | |
| /* Small screen, non-retina */ | |
| } | |
| @media | |
| only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px), | |
| only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px), | |
| only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px), |
I'm trying to make a horizontal rainbow stripe background gradient mixin, but I feel like this is way too verbose. How can it be better?
Goals:
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Trigram for heaven icon</title> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <style type="text/css"> | |
| li { | |
| list-style-type: none; | |
| } |
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.
| ////////////////////////////// | |
| // 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; |
