Alweer???
RobertMe schreef op zaterdag 04 januari 2014 @ 19:26:
[...]
Bij CSS is dat inderdaad standaard moeilijk, vooral door de selector opbouw. Bij Javascript kun je IMHO wel vrij makkelijk structuur aanbrengen (alhoewel OO werken met "overrides" een hell is en blijft). In het geval van CSS is SASS of LESS erg handig omdat je dan (o.a.) de operators kunt nesten:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| #foo
{
color: red;
.bar {
color: blue;
&:hover {
color: yellow;
}
}
}
/*wordt: */
#foo {
color: red;
}
#foo .bar {
color: blue;
}
#foo .bar:hover {
color: yellow;
} |
Zo kun je dus vrij makkelijk de structuur aanbrengen doordat je niet elke keer een berg selectors moet herhalen en je de bij elkaar horende stukjes mooi bij elkaar kunt zetten binnen de nesting.
Edit:
Tweakers CSS parser snapt // natuurlijk niet, wat ook zo'n handige toevoeging van SASS is.
Hoewel ik LESS inderdaad erg fijn vind werken, ben ik niet zo'n fan van extreem diepe inheritance blokken (verder dan 2 ga ik liever niet).
Ander groot voordeel van LESS, is het structureren in bestanden.
Ik heb main.less:
@import 'bootstrap'; /** Twitter bootstrap componenten die ik nodig heb in LESS format */
@import 'elements'; /** You can't live without elements.less! */
@import 'fonts'; /** Fonts declaraties */
@import 'body';
@import 'news';
@import 'menu';
@import 'sidebar';
@import 'form';
@import 'poll';
@import 'responsive';
@import 'fancybox';
@import 'forum';
Nu heb ik 5 LESS bestanden, met allemaal hun eigen target waar de LESS/CSS die ze bevatten voor bedoeld is.
Draai de LESS-compiler, en je houdt 1 minified bestand over, main.css. Minified, netjes gescheiden, leesbaar.
Ow ja, en ik heb elements er in, die me deze awesome dingen fixt:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
| .container {
.rounded(1px);
background-color:#FDFDFD;
padding: 10px 10px;
margin-bottom: 10px;
position: relative;
height: 20px;
} |
En natuurlijk, nog een voordeel van LESS.
Heb je een DOM-element wat BIJNA hetzelfde is als, bijvoorbeeld je container?
Cascading Stylesheet:
1
2
3
4
| .mini-container {
.container;
height: 10px;
} |
[
Voor 18% gewijzigd door
Firesphere op 04-01-2014 19:37
]