Skip to content

Instantly share code, notes, and snippets.

View seven-phases-max's full-sized avatar

Max Mikhailov seven-phases-max

View GitHub Profile
.localise(@-) {
.ie, .au, .gb, // <- langs "variable"
.localise &
{@-();}}
// usage:
.localise({
.button {
foo:extend(.font-size-xxl) {}
.font-size-xxl {
@media (min-width: 768px) {
font-size: 48px;
}
@media (max-width: 767px) {
font-size: 32px;
// example for http://stackoverflow.com/questions/44007852
@font-base: 16;
@font-scale: 1.2;
@line-height: 1.5;
// ............................................
@tags: h1, h2, h3, h4, p;

Of course numbers as selectors, like 1 + 2, do not make any sense on their own (considering that they are not valid CSS selectors), but they can be used to form more complex things:

1, 2 {
    foo-& > bar-& {color: red}
}

So even if (I suppose) such feature was not really intentional, it could be worth to keep unless it gets totally broken.

test {
left-etc {
.FluidGutter(margin, 1, 2, 3, 4);
}
vert-horz {
.FluidGutter(padding, @v: 22, @h: 33);
}
.FluidGutter(@property, @top, @right, @bottom, @left, @vertical, @horizontal, @all) when
(@property = margin),
(@property = padding) {
.MakeFluidGutter() when (% either of trbl is not 0 %) {
.MakeGutter(@property, @top @right @bottom @left);
}