forked from DominikGuzei/flawless.css
/
grid_width.less
46 lines (41 loc) · 2.12 KB
/
grid_width.less
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
//
// massive kludge to embed columns width calculation in LESS so as to support
// vanilla Less.js.
//
// WHY is this code so aweful ?
// A. Less.js does not support conditionals
// A. Less.js does not support returning a value from a mixin, mixins must return a property: value pair
// A. In Less.js inline JS only has access to the local scope, not arguments or the outer scope
// A. For users of the framework it is an improvement from requiring a customized Less.js
// A. It is an interim solution that can be improved in the future when Less.js is more powerful
//
.grid_columns_width(@count, @width, @columns) {
@n: @count;
@w: @width;
@c: @columns;
width: e(`(/\d(em|%)/.test(this.w.toJS())) ? (100 / this.c.toJS() * this.n.toJS()) + '%' : ((this.w.toJS().match(/\d+/) / this.c.toJS()) * this.n.toJS()) + (this.w.toJS().match(/(mm|cm|in|pt|pc|px)/) || ['']).pop()`);
}
.grid_columns_margin_left(@count, @width, @columns) {
@n: @count;
@w: @width;
@c: @columns;
margin-left: e(`(/\d(em|%)/.test(this.w.toJS())) ? (100 / this.c.toJS() * this.n.toJS()) + '%' : ((this.w.toJS().match(/\d+/) / this.c.toJS()) * this.n.toJS()) + (this.w.toJS().match(/(mm|cm|in|pt|pc|px)/) || ['']).pop()`);
}
.grid_columns_margin_right(@count, @width, @columns) {
@n: @count;
@w: @width;
@c: @columns;
margin-right: e(`(/\d(em|%)/.test(this.w.toJS())) ? (100 / this.c.toJS() * this.n.toJS()) + '%' : ((this.w.toJS().match(/\d+/) / this.c.toJS()) * this.n.toJS()) + (this.w.toJS().match(/(mm|cm|in|pt|pc|px)/) || ['']).pop()`);
}
.grid_columns_left(@count, @width, @columns) {
@n: @count;
@w: @width;
@c: @columns;
left: e(`(/\d(em|%)/.test(this.w.toJS())) ? (100 / this.c.toJS() * this.n.toJS()) + '%' : ((this.w.toJS().match(/\d+/) / this.c.toJS()) * this.n.toJS()) + (this.w.toJS().match(/(mm|cm|in|pt|pc|px)/) || ['']).pop()`);
}
.grid_columns_right(@count, @width, @columns) {
@n: @count;
@w: @width;
@c: @columns;
right: e(`(/\d(em|%)/.test(this.w.toJS())) ? (100 / this.c.toJS() * this.n.toJS()) + '%' : ((this.w.toJS().match(/\d+/) / this.c.toJS()) * this.n.toJS()) + (this.w.toJS().match(/(mm|cm|in|pt|pc|px)/) || ['']).pop()`);
}