Basic Mixins for LESS

Fundamental 289 views
0 Flares 0 Flares ×

LESS elements makes it easy for you use some of the most basic mixins with your projects.

First download LESS elements.

Next place it in the same folder with your other LESS files.

Lastly reference it at the top of your LESS stylesheets with:

@import "elements.less";

Now you will be able to use the following mixins:

/* Gradient background. First color is the background color to use for browsers that don't support gradients. The second two colors are the start and stop colors, going from bottom to top. */
.gradient(#F5F5F5, #EEE, #FFF); 

/* Greyscale gradient background. Three values to set here. First one provides a color to use as a background for older browsers that don't support gradient backgrounds. Second and third values are the start and end brightness which goes from 0 to 255. */
.bw-gradient(#EEE, 230, 255); 

/* Quick way to set a 1 pixel thick border that varies its color on each side. The color values go in a clockwise order: top, right, bottom, left. */
.bordered(#EEE, #E5E5E5, #DDD, #E5E5E5); 

/* Adds a box-shadow that is a semi-transparent black. The first two values control the x and y axis position, the third controls blur (how big the shadow is), and the final value is the opacity (0 is fully transparent, 1 is opaque). */
.drop-shadow(0, 1px, 2px, 0.2); 

/* Sets a border-radius for all 4 corners. If you want to set border-radius for individual corners use: .border-radius */

/* Sets a border-radius for each of the 4 corners individually. The values go in a clockwise rotation: top right, bottom right, bottom left, top left. */ 
.border-radius(5px, 0, 0, 5px); 

/* Sets the opacity. 0 is fully transparent, 1 is opaque. */

/* Sets a transition-duration (time it takes to do things like hover effects). The value provides a time in seconds. */

/* Rotates the item by a number of degrees clockwise. */

/* Scales the item by the ratio provided. The example makes the item 2 times larger. */

/* Sets the transition duration and effect to use for any transitions (e.g. hover effects), unlike transition-duration which only sets the duration. */
.transition(2s, ease-out); 

/* Sets the inner shadow. The first two numbers are the x and y coordinates, the third is the blur and the last one is the strength of the shadow. */
.inner-shadow(0, 1px, 2px, 0.4); 

/* Sets the box-shadow. The first two numbers are the x and y coordinates, then the blur, and the color. This is different from drop-shadow in that it takes on a color instead of setting a transparent black shadow. Additionally, this mixin takes on the whole set of arguments in one go, so no need for commas between each number, and you can also add "inset" before the first number for inset shadow. */
.box-shadow(0 1px 2px #999); 

/* Divides the content into columns. The variables are: column width, column count, column gap, column border color, column border style, column border width. */
.columns(250px, 0, 50px, #EEE, solid, 1px); 

/* Translates an element using the given coordinates. The values are x and y offset coordinates, so the above example moves the element right 10 pixels and up 20 pixels. */
.translate(10px, 20px); 

/* Allows you to alter the CSS box model. For example, by setting this to 'border-box' the width and height properties will include the padding and border values. More info at MDN. */

/* Allows you to disable text highlighting, which can be useful on interface elements. */
Provided by: LESS Elements
Posted in LESS


Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

No Trackbacks.


Register | Lost your password?
0 Flares Twitter 0 Facebook 0 Google+ 0 0 Flares ×