Re: Sprites and using outputted CSS (position & size) values in mixins

[axyl]

Could you show what does the @mixin icon-downsize do? If you use Compass sprite @mixins, you don't need to know what the final background positions and dimensions are, as they can be automatically generated for you. I found this tutorial helpful on explaining Compass spriting: http://compass-style.org/help/tutorials/spriting/ Check out the Selector Control and Sass Functions section. 

On Tuesday, April 23, 2013 4:57:04 PM UTC-7, David Lim wrote:

My previous post seemed to have been deleted so this might be a repeat..

For Compass sprites, I'm looking for suggestions on how you would be able to bring the outputted CSS position & height/width values of the individual images back into Sass as arguments for mixins.

I've been doing this the ugly way by manually copying the outputted values back into Sass (see example below) and plugging those values into mixins but wanted to see if there was an easier and more automated way to do this...

Thanks!

.icons-sprite {

background: url('/img/sprite-icons.png') no-repeat;

  @include sprite-downsize(65px, 790px);

}

.icons-arrow-up {

@extend .icons-sprite;

@include icon-downsize(-628px, 29px, 54px);

margin-top:pixels-to-ems(10px);

}

.icons-caps-arrow-filled {

@extend .icons-sprite;

@include icon-downsize(-756px, 34px, 30px);

margin: .2em auto 0;

}

[David Lim]

The mixin takes the background position and dimension values for various media query breakpoints (see below). Basically looking for a way to hijack these values and put them into this mixin before they get outputted to CSS...

@mixin icon-downsize ($bg-position-vertical, $height, $width) {

background-position: 0 down-rez-large($bg-position-vertical);

height: down-rez-large($height);

width: down-rez-large($width);

@media (max-width: $break-width-small) {

background-position: 0 down-rez-to-small($bg-position-vertical);

height: down-rez-small($height);

width: down-rez-small($width);

}

@media (min-width: $break-width-med) {

background-position: 0 down-rez-to-med($bg-position-vertical);

height: down-rez-to-med($height);

width: down-rez-to-med($width);

}

@media (min-width: $break-width-xlarge) {

background-position: 0 $bg-position-vertical;

height: $height;

width: $width;

}

}  

[axyl]

From the documentation, I didn't see any functions that'd do what you need, so looks like you have to stick to your current solution, and propose adding these functionality as a feature request. 

[David Lim]

Actually, after some tinkering I was able to use the Compass sprite helpers:

http://compass-style.org/reference/compass/helpers/sprites/

Just took a while to figure our the correct semantics of the params:

background-position: sprite-position($sprite-name, $image-name); /* Get background image position values */

height: icons-sprite-height($image-name); /* Get image height value */

width: icons-sprite-width($image-name); /* Get image width value */

[Chris Eppstein]

Nailed it.