3 ms·
This article actually misses one of the best features of Sass: It can access and read files. Why is that important? So you can easily reference and use images.
by timdorr 13y ago
This article actually misses one of the best features of Sass: It can access and read files. Why is that important? So you can easily reference and use images. Here's a mixin I use constantly:
@mixin background-img($image, $width: image-width($image)/2, $height: image-height($image)/2 ) {
display: block;
background-image: image-url($image);
background-size: $width $height;
width: $width;
height: $height;
}
I can then do something like @include background-img("logo.appheader.png"); in my scss files with a retina-quality image. I don't have to think about image sizes, it just works.
As far as I know, something like this isn't possible in LESS.
- silviogutierrez 13y agoWhoa, I had no idea. That's really useful for retina images. I recently switched to SASS because of foundation. But I often found myself looking up image widths for my retina mixins. Thanks for the tip.
- timdorr 13y agoSass + Compass + Foundation is a winning combo. Unfortunately my product is built on bootstrap (using bootstrap-sass at least), so migrating to Foundation would take quite a bit of work.
- ceejayoz 13y agoThat's not a Sass feature, it's from Compass. http://compass-style.org/reference/compass/helpers/image-dimensions/ http://compass-style.org/reference/compass/helpers/image-dim...
- timdorr 13y agoYes, the image functions are from Compass, but the underlying mechanics of mapping Sass functions to Ruby code is purely Sass's domain. So, perhaps I misspoke: Sass's power is in its ability to tie it's functions to arbitrary Ruby code, which can then access and manipulate files.