The .clearfix()
mixin is a modern solution for healing container`s height which have floated elements. Also its applying prevents top-margins from collapsing.
Container with floated child elements without .clearfix()
Container with floated child elements with .clearfix()
.example-clearfix-container-1 {
border: 1px solid #f00;
}
.example-clearfix-container-2 {
.clearfix();
border: 1px solid #0f0;
}
.example-clearfix-item.left {
float: left;
}
.example-clearfix-item.right {
float: right;
}
The .css()
mixin is used to set any css property if there is a value passed to it by a variable. Also .css()
can add -ms-, -webkit- and -moz- prefixes if needed.
If the variable is set to false
, the .css()
mixin will add nothing to the code.
.example-css-container {
.css(padding, @indent__base);
.css(background, @secondary__color);
}
.example-css-container-2 {
.css(background, false);
}
Mixin variable | Default value | Allowed values | Comment |
---|---|---|---|
@_property | false | '' | false | value | Any css property |
@_value | false | '' | false | value | Any css value |
@_prefix | 0 | '' | false | 1 | If set to "1" adds -ms-, -webkit- and -moz- prefixes to the property |
.example-rotate {
background: #f00;
position: absolute;
height: 20px;
width: 40px;
.rotate(
@_rotation: 45deg;
);
}
Mixin variable | Default value | Allowed values | Comment |
---|---|---|---|
@rotation | '' | '' | false | value | Transform rotate value, false or '' |
The .input-placeholder()
mixin is used to change placeholder font-color and font-weight.
.example-placeholder {
.input-placeholder(#808080, bold);
}
Mixin variable | Default value | Allowed values | Comment |
---|---|---|---|
@_input-placeholder-color | @form-element-input-placeholder__color | '' | false | value | Input placeholder color |
@_input-placeholder-font-weight | @form-element-input__font-weight | '' | false | value | Input placeholder font-weight |
.example-background-gradient-1 {
.background-gradient(
@_background-gradient: true,
@_background-gradient-direction: vertical,
@_background-gradient-color-start: #cff,
@_background-gradient-color-end: #ccf
);
}
.example-background-gradient-2 {
.background-gradient(
@_background-gradient: true,
@_background-gradient-direction: horizontal,
@_background-gradient-color-start: #cff,
@_background-gradient-color-end: #ccf
);
}
.example-background-gradient-3-wrapper {
background: #ffc;
padding: 10px;
}
.example-background-gradient-3 {
.background-gradient(
@_background-gradient: true,
@_background-gradient-direction: horizontal,
@_background-gradient-color-start: rgba(255,255,255,0),
@_background-gradient-color-end: #ccf,
@_background-gradient-color-position: false
);
}
Mixin variable | Default value | Allowed values | Comment |
---|---|---|---|
@_background-gradient | false | '' | false | true | If set to 'true' the element has gradient background |
@_background-gradient-direction | '' | '' | horizontal | vertical | Gradient direction (horizontal or vertical) |
@_background-gradient-color-start | '' | '' | false | value | Gradient start color (any css color) |
@_background-gradient-color-end | '' | '' | false | value | Gradient end color (any css color) |
@_background-gradient-color-position | false | '' | false | true | Sets the background-color fallback property. When set to 'false', the background-color property will be set to @_background-gradient-color-end. When set to 'true', the background-color property will be set to @_background-gradient-color-start |