Last active
January 3, 2016 01:48
-
-
Save JulienMelissas/8391097 to your computer and use it in GitHub Desktop.
Some super cool LESS Mixins
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
/* | |
This will compile code for an element you want to center exactly inside a div, just give it the width and height. | |
You must know the width and height, and the parent element must be relatively positioned | |
See this article here on CSS tricks: http://css-tricks.com/centering-in-the-unknown/ | |
Use like this for example: | |
#center-me { | |
.center(300px, 400px); | |
} | |
*/ | |
.center (@width, @height) { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
width: @width; | |
height: @height; | |
margin-top: -(@height * 0.5); | |
margin-left: -(@width * 0.5); | |
} |
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
/* | |
This Spits out a full background image when you need it with any extra custom bg stuff added in. | |
Good for huge full-screen background pages or parallax sites. | |
Use like this for example: | |
#body { | |
.full-bg('/path-to-image-relative-to-less/css-file.png', fixed, center, center); | |
} | |
*/ | |
.full-bg (@img, @attachment, @pos_horz, @pos_vert) { | |
background-image: url(@img); | |
background-repeat: no-repeat; | |
background-position: @pos_horz @pos_vert; | |
background-attachment: @attachment; | |
-webkit-background-size: cover; | |
-moz-background-size: cover; | |
-o-background-size: cover; | |
background-size: cover; | |
} |
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
/* | |
This is one I use all the time for text hiding, it's a better version than text-indent: -9999px; | |
See this article here: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ | |
Use like this for example: | |
#an-icon-with-hidden-text { | |
height: 50px; | |
width: 50px; | |
background: url('icon.png'); | |
.hide-text(); | |
} | |
*/ | |
.hide-text { | |
text-indent: 100%; | |
white-space: nowrap; | |
overflow: hidden; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment