npm install kolos.mixins --save;
- triangle
- grid (deprecated in favour of CSS Grid Layout)
- for
- placeholder
- pseudo
- bg
- square
- ellipsis
- burger
.figure {
.triangle(top, 22px);
}
deprecated in favour of CSS Grid Layout
//create simple grid:
.grid(~'.gridSelector'; ~'.itemSelector'; 4; 30px);
//create adaptive grid:
@adaptiveState1000px: 1000px, 3, 20px;
@adaptiveState700px: 700px, 2, 10px;
@adaptiveState400px: 400px, 1;
.grid(~'.gridSelector'; ~'.itemSelector'; 4; 30px; @adaptiveState1000px, @adaptiveState700px, @adaptiveState400px);
@colors: #1abc9c, #2ecc71, #3498db, #9b59b6;
.for(@colors, {
.color-@{i} {
color: @value;
}
});
.input {
.placeholder(red);
}
.selector:after:extend(.pseudo) { }
.selector {
.bg();
}
.selector:extend(.square all) {}
.selector:extend(.ellipsis) {}
.selector {
.m-burger(21px, 13px, 1px, #000);
}