Skip to content

Instantly share code, notes, and snippets.

@since1976
Created January 6, 2012 01:31
Show Gist options
  • Save since1976/1568419 to your computer and use it in GitHub Desktop.
Save since1976/1568419 to your computer and use it in GitHub Desktop.
SCSS each
// 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%;}
@since1976
Copy link
Author

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.

@anthonyshort
Copy link

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%;}

@since1976
Copy link
Author

Sweet thanks Anthony.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment