Geek Answers Handbook

Compass Sprite - Avoid Using Extensions When Enabling Sprite

I use Compass to create my sprites and it works beautifully, but I came across one small annoyance. I cannot enable a separate sprite using the @include operator when inside another @include, for example, mixing mixing, which I usually use. My SCSS sprite looks like this:

.sp { background-repeat: no-repeat; overflow: hidden; line-height: 0; font-size: 0; text-indent: 100%; border: 0; } $sp-sprite-dimensions: true; $sp-sprite-base-class: '.sp'; $sprite-layout: smart; @import "sp/*.png"; @include all-sp-sprites;

Elsewhere, I'm trying to do this:

 .logo { a { @include break($break1) { @include sp-sprite(logo-small); } } }

Nested @include statements are good with SCSS, but this does not allow @extend statements in @include statements, and apparently sprite @include generates an @extend statement behind the scenes, which I don't want. Does anyone know about this?

EDIT:

I was riveted to @lolmaus that the real problem is that I am placing an @extend inside a media query. I suppose this is forbidden, in any way around him?

+4
source share
3 answers

Using Compass sprites inside media queries is not possible, at least as described in the documentation.

There are several ways:

+6
source

It uses SASS (SCSS) mixing to create a sprite declaration block that will work with the media

SCSS:

 // http://compass-style.org/reference/compass/helpers/sprites/ @mixin get-sprite($map, $sprite, $repeat: no-repeat, $height: true, $width: true) { //http://compass-style.org/reference/compass/helpers/sprites/#sprite-file $sprite-image: sprite-file($map, $sprite); // http://compass-style.org/reference/compass/helpers/sprites/#sprite-url $sprite-map: sprite-url($map); // http://compass-style.org/reference/compass/helpers/sprites/#sprite-position $sprite-position: sprite-position($map, $sprite); // Returns background background: $sprite-map $sprite-position $repeat; // http://compass-style.org/reference/compass/helpers/image-dimensions/ // Checks to see if the user wants height returned @if $height == true { // Gets the height of the sprite-image $sprite-height: image-height($sprite-image); // Returns the height height: $sprite-height; } // http://compass-style.org/reference/compass/helpers/image-dimensions/ // Checks to see if the user wants height returned @if $width == true { // Gets the width of the sprite-image $sprite-width: image-width($sprite-image); // Returns the width width: $sprite-width; } }

Application:

 $icons: sprite-map("sprites/icons/*.png"); // define a sprite map // ... later @media only screen and (max-width: 500px) { .video .overlay { @include get-sprite($icons, play-btn-large); } }

Source: GitHubGist - brubrant / get-sprite.scss

0
source

The following code describes how to do this.

Gist: @ expand compass sprites in @ media queries

 /* * A simple way to extend Compass sprite classes within media queries. * Based on the knowledge gained here: http://www.sitepoint.com/cross-media-query-extend-sass/ * I admit it nowhere near as clever, but it does work :) */ /* * Set-up sprites for each media size */ // default @import "icons-sm/*.png" @include all-icons-sm-sprites // corresponding sprites for larger devices // notice that @import is within the @media query // that critical! @media (min-width: $large) @import "icons-lg/*.png" @include all-icons-lg-sprites /* * Now you can do something like this */ // an example mixin @mixin social-links($size) $socials: facebook, twitter, youtube @each $social in $socials &.#{$social} @extend .icons-#{$size}-#{$social} /* * Put to use */ // assuming you've got mark-up like this <p class="social"> <a href="#" class="facebook">facebook</a> <a href="#" class="twitter">twitter</a> <a href="#" class="youtube">youtube</a> </p> // you can do this .social a @include social-links(sm) width: 25px height: 25px @media (min-width: $large) @include social-links(lg) width: 50px height: 50px
0
source

More articles:


All Articles