Kirjautuminen

Haku

Tehtävät

Keskustelu: Nettisivujen teko: Miten tehdä tehokas linkkimäärittey SASS:lla?

amuse [20.11.2014 23:36:05]

#

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;
}

The Alchemist [21.11.2014 08:24:44]

#

Ei oo mitään hyötyä kikkailla mixinien sun muiden koodilla saadakseen tiiviimpää outputtia. Pakkaa koko css-filu jälkikäteen.

Tukki [21.11.2014 11:55:11]

#

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.

amuse [27.11.2014 13:29:12]

#

Ok, on tiennytkään, että joku softa osaa tehdä minimoinnin niin, että se muuttaa css:n rakennetta. Mitä suosittelisitte?

The Alchemist [27.11.2014 13:48:59]

#

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ä.

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta