-
-
Save JosephWM/61221899e98cffe8906f to your computer and use it in GitHub Desktop.
Less output
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
LESS variables are information about icon's compiled state, stored under its original file name | |
.icon-home { | |
width: @icon-home-width; | |
} | |
The large array-like variables contain all information about a single icon | |
@icon-home: x y offset_x offset_y width height total_width total_height image_path name; | |
At the bottom of this section, we provide information about the spritesheet itself | |
@spritesheet: width height image @spritesheet-sprites; | |
*/ | |
@blocktitle-name: blocktitle; | |
@blocktitle-x: 28px; | |
@blocktitle-y: 0px; | |
@blocktitle-offset-x: -28px; | |
@blocktitle-offset-y: 0px; | |
@blocktitle-width: 20px; | |
@blocktitle-height: 20px; | |
@blocktitle-total-width: 48px; | |
@blocktitle-total-height: 44px; | |
@blocktitle-image: '../images/sprite.png'; | |
@blocktitle: 28px 0px -28px 0px 20px 20px 48px 44px '../images/sprite.png' blocktitle; | |
@loginformclose-name: loginformclose; | |
@loginformclose-x: 0px; | |
@loginformclose-y: 0px; | |
@loginformclose-offset-x: 0px; | |
@loginformclose-offset-y: 0px; | |
@loginformclose-width: 28px; | |
@loginformclose-height: 28px; | |
@loginformclose-total-width: 48px; | |
@loginformclose-total-height: 44px; | |
@loginformclose-image: '../images/sprite.png'; | |
@loginformclose: 0px 0px 0px 0px 28px 28px 48px 44px '../images/sprite.png' loginformclose; | |
@thumbsrating-name: thumbsrating; | |
@thumbsrating-x: 0px; | |
@thumbsrating-y: 28px; | |
@thumbsrating-offset-x: 0px; | |
@thumbsrating-offset-y: -28px; | |
@thumbsrating-width: 14px; | |
@thumbsrating-height: 16px; | |
@thumbsrating-total-width: 48px; | |
@thumbsrating-total-height: 44px; | |
@thumbsrating-image: '../images/sprite.png'; | |
@thumbsrating: 0px 28px 0px -28px 14px 16px 48px 44px '../images/sprite.png' thumbsrating; | |
@spritesheet-width: 48px; | |
@spritesheet-height: 44px; | |
@spritesheet-image: '../images/sprite.png'; | |
@spritesheet-sprites: @blocktitle @loginformclose @thumbsrating; | |
@spritesheet: 48px 44px '../images/sprite.png' @spritesheet-sprites; | |
/* | |
The provided classes are intended to be used with the array-like variables | |
.icon-home { | |
.sprite-width(@icon-home); | |
} | |
.icon-email { | |
.sprite(@icon-email); | |
} | |
*/ | |
.sprite-width(@sprite) { | |
width: extract(@sprite, 5); | |
} | |
.sprite-height(@sprite) { | |
height: extract(@sprite, 6); | |
} | |
.sprite-position(@sprite) { | |
@sprite-offset-x: extract(@sprite, 3); | |
@sprite-offset-y: extract(@sprite, 4); | |
background-position: @sprite-offset-x @sprite-offset-y; | |
} | |
.sprite-image(@sprite) { | |
@sprite-image: extract(@sprite, 9); | |
@sprite-image-bare: ~`"@{sprite-image}".slice(1, -1)`; | |
background-image: url(@sprite-image-bare); | |
} | |
.sprite(@sprite) { | |
.sprite-image(@sprite); | |
.sprite-position(@sprite); | |
.sprite-width(@sprite); | |
.sprite-height(@sprite); | |
} | |
/* | |
The `.sprites` mixin generates identical output to the CSS template | |
but can be overridden inside of LESS | |
.sprites(@spritesheet-sprites); | |
*/ | |
.sprites(@sprites, @i: 1) when (@i <= length(@sprites)) { | |
@sprite: extract(@sprites, @i); | |
@sprite-name: extract(@sprite, 10); | |
.@{sprite-name} { | |
.sprite(@sprite); | |
} | |
.sprites(@sprites, @i + 1); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment