Created
January 6, 2012 01:31
-
-
Save since1976/1568419 to your computer and use it in GitHub Desktop.
SCSS each
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
// Position all items absolute | |
@each $pos in tl, tr, bl, br { | |
.pos-#{$pos} { | |
position:absolute; | |
} | |
} | |
// Now position them | |
.pos-tl{left:3%; top:3%;} | |
.pos-tr{right:3%; top:3%;} | |
.pos-bl{left:3%; bottom:3%;} | |
.pos-br{right:3%; bottom:3%;} |
For this case I'd probably suggest plain CSS could be easy to maintain rather than complex conditionals.
.pos-tl,pos-bl,pos-tr,pos-br {position:absolute; }
.pos-tl{left:3%; top:3%;}
.pos-tr{right:3%; top:3%;}
.pos-bl{left:3%; bottom:3%;}
.pos-br{right:3%; bottom:3%;}
Sweet thanks Anthony.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Know there must be a better way to do this in SCSS?
Is it possible to do something like this:
if there is a l in the name add the left declaration
if there is a t add the top
if else add right and bottom.