Mikten menisi SASS:lla (SCSS-syntaksilla) mixin, joka loisi mahdollisimman tiiviin CSS-tiedoston?
Nykyinen koodini näyttää tältä:
$font-family: verdana, arial, helvetica, sans-serif; @mixin a-creator($size, $normalColor, $hoverColor){ font-size: $size px; font-family: $font-family; color: $normalColor; text-decoration: none; &:visited { font-size: $size px; font-family: $font-family; color: $normalColor; text-decoration: none; } &:hover, &:active { color: $hoverColor; text-decoration: underline; } } a.linkki { @include a-creator(15, '#a61010', '#a61010'); }
Joka luo toimiva CSS:n
a.linkki { font-size: 15 px; font-family: verdana, arial, helvetica, sans-serif; color: "#a61010"; text-decoration: none; } a.linkki:visited { font-size: 15 px; font-family: verdana, arial, helvetica, sans-serif; color: "#a61010"; text-decoration: none; } a.linkki:hover, a.linkki:active { color: "#a61010"; text-decoration: underline; }
Tuossa on kuitenkin turhaa toistoa ja se olisi kiva saada tiiviimmäksi, eli näin:
a.linkki, a.linkki:visited { font-size: 15 px; font-family: verdana, arial, helvetica, sans-serif; color: "#a61010"; text-decoration: none; } a.linkki:hover, a.linkki:active { color: "#a61010"; text-decoration: underline; }
Ei oo mitään hyötyä kikkailla mixinien sun muiden koodilla saadakseen tiiviimpää outputtia. Pakkaa koko css-filu jälkikäteen.
Eikä pakkaamistakaan kannata yleensä alkaa itse väsäämän kun http-palvelimissa on yleensä tähän valmiina menetelmät ja useinmiten vielä oletuksena päällä. CSS:ien osalta on varmasti hyödyllisempää huolehtia oikeaoppisesta cachetuksesta ja tarvittaessa tiedostojen yhdistelemisestä niin että vaadittavien requestien määrä minimoidaan.
Ok, on tiennytkään, että joku softa osaa tehdä minimoinnin niin, että se muuttaa css:n rakennetta. Mitä suosittelisitte?
Toi esimerkki on sitä paitsi aika huono, koska tilaselektorit perivät yleensä määrittelynsä elementin perusmäärittelyistä. a:visited saa siis fonttikokonsa ja kirjasintyyppinsä ihan sillä perusteella, mitä a:lle on määritelty aiemmin. Turhia määrittelyitä kannattaa vältellä. Se vain pitää tietää, että selaimet lisäävät joskus vakiona omia tyylejään, jotka pitää erikseen hoksata kumota css:ssä.
Aihe on jo aika vanha, joten et voi enää vastata siihen.