the sprite mixin now has new functions which enable style grouping and require fewer arguments for non-default cases
This commit is contained in:
parent
48c7d45c30
commit
851f001756
@ -1,12 +1,52 @@
|
||||
!sprite_image_default_width ||= 32px
|
||||
!sprite_image_default_height ||= 32px
|
||||
!sprite_image_default_margin ||= 0px
|
||||
//**
|
||||
Example 1:
|
||||
a.twitter
|
||||
+sprite-img("icons-32.png", 1)
|
||||
a.facebook
|
||||
+sprite-img("icons-32png", 2)
|
||||
...
|
||||
Example 2:
|
||||
a
|
||||
+sprite-background("icons-32.png")
|
||||
a.twitter
|
||||
+sprite-column(1)
|
||||
a.facebook
|
||||
+sprite-row(2)
|
||||
...
|
||||
|
||||
// Simplest use: +sprite-img("icons-32.png", 1)
|
||||
=sprite-img(!img, !col, !row = 1, !width = !sprite_image_default_width, !height = !sprite_image_default_height, !margin = !sprite_image_default_margin)
|
||||
!x = ((!col - 1) * -!width) - ((!col - 1) * !margin)
|
||||
!y = ((!row - 1) * -!height) - ((!row - 1) * !margin)
|
||||
:background= image_url(!img) "no-repeat" !x !y
|
||||
!sprite_default_size ||= 32px
|
||||
!sprite_default_margin ||= 0px
|
||||
!sprite_image_default_width ||= !sprite_default_size
|
||||
!sprite_image_default_height ||= !sprite_default_size
|
||||
|
||||
|
||||
// Sets all the rules for a sprite from a given sprite image to show just one of the sprites.
|
||||
// To reduce duplication use a sprite-bg mixin for common properties and a sprite-select mixin for positioning.
|
||||
=sprite-img(!img, !col, !row = 1, !width = !sprite_image_default_width, !height = !sprite_image_default_height, !margin = !sprite_default_margin)
|
||||
+sprite-background(!img, !width, !height)
|
||||
+sprite-position(!col, !row, !width, !height, !margin)
|
||||
|
||||
// Sets rules common for all sprites, assumes you want a square, but allows a rectangular region.
|
||||
=sprite-background(!img, !width = !sprite_default_size, !height = !width)
|
||||
+sprite-background-rectangle(!img, !width, !height)
|
||||
|
||||
// Sets rules common for all sprites, assumes a rectangular region.
|
||||
=sprite-background-rectangle(!img, !width = !sprite_image_default_width, !height = !sprite_image_default_height)
|
||||
:background= image_url(!img) "no-repeat"
|
||||
:width= !width
|
||||
:height= !height
|
||||
:overflow hidden
|
||||
|
||||
// Allows horizontal sprite positioning optimized for a single row of sprites.
|
||||
=sprite-column(!col, !width = !sprite_image_default_width, !margin = !sprite_default_margin)
|
||||
+sprite-position(!col, 1, !width, 0px, !margin)
|
||||
|
||||
// Allows vertical sprite positioning optimized for a single column of sprites.
|
||||
=sprite-row(!row, !height = !sprite_image_default_height, !margin = !sprite_default_margin)
|
||||
+sprite-position(1, !row, 0px, !height, !margin)
|
||||
|
||||
// Allows vertical and horizontal sprite positioning from a grid of equal dimensioned sprites.
|
||||
=sprite-position(!col, !row = 1, !width = !sprite_image_default_width, !height = !sprite_image_default_height, !margin = !sprite_default_margin)
|
||||
!x = ((!col - 1) * -!width) - ((!col - 1) * !margin)
|
||||
!y = ((!row - 1) * -!height) - ((!row - 1) * !margin)
|
||||
:background-position= !x !y
|
Loading…
Reference in New Issue
Block a user