| Mixin | Parameters | Description |
|---|---|---|
.gradient-h(); |
@startColor, @endColor |
Horizontal background gradient. |
.gradient-hline(); |
@startColor, @middleColor1, @middleColor2, @endColor |
Horizontal-linear background gradient. |
.gradient-v(); |
@startColor, @endColor |
Vertical background gradient. |
.gradient-v3colors(); |
@startColor, @middleColor, @colorStop, @endColor |
Three-color background gradient. |
.gradient-radial(); |
@innerColor, @outerColor |
Radial background gradient. |
.gradient-direction(); |
@startColor, @endColor, @degrees |
Directional background gradient (you can enter only the number in the last option - without units). |
.background-clip(); |
@type |
Crop the backgroud of an element (value must be without "-box"). |
.background-size(); |
@value |
Control the size of background images via CSS3. |
| Mixin | Parameters | Description |
|---|---|---|
.box-shadow(); |
"@values" |
The box-shadow property attaches one or more drop-shadows to the box (always add " before and after values - thanks to that you can use many shadows at the same time). |
.border-image(); |
@source, @slice, @width, @outset, @repeat |
Define an image to be used instead of the normal border of an element. |
.rounded(); |
@radius |
Round the corners of an element. Can be a single value or four space-separated values. |
.box-sizing(); |
@type |
Change the box model for an element (e.g., border-box for a full-width input). |
.tab-size(); |
@value |
The tab-size CSS property is used to customize the width of a tab character. |
| Mixin | Parameters | Description |
|---|---|---|
.translate(); |
@x, @y |
With the translate() method, the element moves from its current position (X-axis - left, Y-axis - top) - (you can enter only the numbers - without units). |
.rotate(); |
@degrees |
With the rotate() method, the element rotates clockwise at a given degree (you can enter only the numbers - without units). |
.scale(); |
@ratio |
With the scale() method, the element increases or decreases the size. |
.skew(); |
@degrees-x, @degrees-y |
With the skew() method, the element turns in a given angle (X-axis - horizontal, Y-axis - vertical) - (you can enter only the numbers - without units). |
.matrix(); |
@rotate, @scale, @translate, @skew, @x, @y |
The matrix() method combines all of the 2D transform methods into one. |
| Mixin | Parameters | Description |
|---|---|---|
.rotateX(); |
@degrees |
With the rotateX() method, the element rotates around its X-axis at a given degree (you can enter only the numbers - without units). |
.rotateY(); |
@degrees |
With the rotateY() method, the element rotates around its Y-axis at a given degree (you can enter only the numbers - without units). |
.translate3d(); |
@x, @y, @z |
It's same that the 'translate' option but we have at our disposal 3 values (X-axis, Y-axis, Z-axis). |
.perspective(); |
@value, @unit |
Defines a perspective view for a 3D transformed element (@unit - it's for FF10 that's reading the value of the property perspective in pixels). |
| Mixin | Parameters | Description |
|---|---|---|
.transform-origin(); |
@x, @y, @z |
The transform-origin property allows you to change the position on transformed elements. |
.transform-style(); |
@value |
The transform-style property specifies how nested elements are rendered in 3D space. |
| Mixin | Parameters | Description |
|---|---|---|
.transition(); |
@property, @duration, @timing, @delay |
Add an effect when changing from one style to another. |
| Mixin | Parameters | Description |
|---|---|---|
.animate(); |
@name, @duration, @timing, @delay, @iteration-count, @direction, @state |
Create animations (checkout: http://daneden.me/animate/ - pack of done animations). |
| Mixin | Parameters | Description |
|---|---|---|
.columns(); |
@columnWidth-Count, @columnGap, @columnRule |
Create multiple columns for laying out text (like in newspapers). |
| Mixin | Parameters | Description |
|---|---|---|
.clearfix(); |
none |
Add to any parent to clear floats within. |
.font(); |
@size, @line-height, @weight |
Font-size, line-height and weight (you can enter only the numbers - without units). |
.size(); |
@height, @width |
Quickly set the height and width on one line (you can enter only the numbers). |
.square(); |
@value |
Use this if height and width have the same values (use px/%/em - if you type only the number, to it will be added the default unit (px)). |
.opacity(); |
@opacity |
Elements transparency (full = 1 not 100, so use e.g. 0.5, .8, etc.). |
.less-button(); |
@bg-color, @border-color, @text-color, @text-shadow, @padding, @corners |
Quickly create a customize button. |