67 lines
1.5 KiB
Markdown
67 lines
1.5 KiB
Markdown
---
|
|
title: Sass
|
|
layout: default
|
|
---
|
|
|
|
### Compass: Sprites
|
|
|
|
@import compass/utilities/sprites
|
|
|
|
$sprites: sprite-map('sprites/*.png')
|
|
$sprites: sprite-map('sprites/*.png', $spacing: 20px)
|
|
|
|
@mixin sprite($name)
|
|
background-image: sprite-url($sprite)
|
|
|
|
+sprite-dimensions($sprite, $name)
|
|
width: image-width(sprite-file($sprite, $name)
|
|
height: image-height(sprite-file($sprite, $name)
|
|
|
|
+sprite-background-position($sprite, $name[, $offset-x, $offset-y])
|
|
background-position: sprite-position($sprite, $name)
|
|
nth(sprite-position($sprite, $name), 1) # X position
|
|
nth(sprite-position($sprite, $name), 2) # Y position
|
|
|
|
|
|
### Compass: Sprites (the @import way)
|
|
|
|
// Sprite sets (applies to icon/*.png)
|
|
$icon-spacing: 0
|
|
$icon-dimensions: true
|
|
$icon-repeat: no-repeat
|
|
$icon-position: 0
|
|
|
|
// Individual (applies to icon/mail.png)
|
|
$icon-mail-spacing: 0
|
|
|
|
@import 'icon/*.png'
|
|
@include all-icon-sprites
|
|
|
|
// Usage
|
|
.image1
|
|
@extend .icon-mail
|
|
|
|
.image2
|
|
@extend .icon-refresh;
|
|
|
|
// ### Advanced control
|
|
// The sprite map is available as $icon-sprites. You can then use
|
|
// `sprite()` on it.
|
|
|
|
.image3
|
|
background: sprite($icon-sprites, refresh)
|
|
//background: url(...) 0 -16px;
|
|
|
|
.image3-with-offset
|
|
background: sprite($icon-sprites, refresh, -2px, -9px)
|
|
//background: url(...) -2px -19px;
|
|
|
|
|
|
### Loopo
|
|
|
|
$i: 6;
|
|
@while $i > 0 {
|
|
.item-#{$i} { width: 2em * $i; }
|
|
$i: $i - 2;
|
|
}
|