Milleks kasutatakse eelprotsessoreid arenduses?

CSS-i eelnevaltöötlusvahendid (Sass, Less, Stylus) laiendavad CSS-i võimalusi, lisades:

• Muudatused: Võimaldavad salvestada väärtusi (värve, fonte) korduvkasutamiseks.

  // Muutuja Sass-is
  $peamine-värv: #3498db;
  
  keha {
    värv: $peamine-värv;
  }
  

• Sisemine struktuur: Võimaldab CSS-i reegleid üksteise sisse panna, peegeldades HTML-i struktuuri.

  // Siseehitus Sass-is
  nav {
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
  
      li {
        display: inline-block;
      }
    }
  }
  

• Segud (Mixins): Võimaldavad CSS-deklaratsioonide gruppe taaskasutada.

  // Segu Sass-is
  @mixin puhastaja {
    &::after {
      display: table;
      content: "";
      clear: both;
    }
  }
  
  konteiner {
    @include puhastaja;
  }
  

• Funktsioonid: Võimaldavad arvutusi teha ja väärtusi töödelda.

  // Funktsioon Sass-is
  $võrku-veerud: 12;
  
  @function võrgu-laius($n) {
    @return ($n / $võrku-veerud) * 100%;
  }
  
  .veeru-6 {
    width: võrgu-laius(6);
  }
  

• Import: Võimaldab CSS-i jagada mooduliteks ja neid põhifaili lisada.

  // Import Sass-is
  @import "muutujad";
  @import "segud";
  
  keha {
    font-family: $baas-font;
  }
  

See parandab koodi organiseeritust, vähendab dubleerimist, suurendab loetavust ja kiirendab arendust. Lõppkokkuvõttes kompileerib eelprotsessor koodi tavalise CSS-ks, mida brauserid mõistavad.