Ի՞նչ նպատակով են օգտագործվում նախապատրաստողները զարգացման ժամանակ։

CSS-առաջնորդիչները (Sass, Less, Stylus) ընդլայնում են CSS-ի հնարավորությունները՝ ավելացնելով.

• Փոփոխականներ: Позволяют сохранять значения (գույներ, տառատեսակներ) բազմակի օգտագործման համար:

  // Sass-ում փոփոխական
  $primary-color: #3498db;
  
  body {
    color: $primary-color;
  }
  

• Ներքին տեղադրում: Позволяет вложить CSS կանոններ մեկը մյուսի մեջ՝ արտացոլելով HTML կառուցվածքը:

  // Sass-ում ներսում տեղադրում
  nav {
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
  
      li {
        display: inline-block;
      }
    }
  }
  

• Mixins: Позволяют многократно использовать CSS հայտարարությունների խմբեր:

  // Sass-ում Mixins
  @mixin clearfix {
    &::after {
      display: table;
      content: "";
      clear: both;
    }
  }
  
  .container {
    @include clearfix;
  }
  

• Ֆունկցիաներ: Позволяют կատարել հաշվարկներ և մշակել արժեքներ:

  // Sass-ում ֆունկցիա
  $grid-columns: 12;
  
  @function grid-width($n) {
    @return ($n / $grid-columns) * 100%;
  }
  
  .col-6 {
    width: grid-width(6);
  }
  

• Ներմուծում: Позволяет բաժանել CSS-ը մոդուլների և ներառել դրանք հիմնական ֆայլում:

  // Sass-ում ներմուծում
  @import "variables";
  @import "mixins";
  
  body {
    font-family: $base-font;
  }
  

Այս ամենը բարելավում է կոդի կազմակերպվածությունը, նվազեցնում կրկնությունը, բարձրացնում ընթերցելիությունը և արագացնում զարգացման գործընթացը: Վերջում, նախապատրաստիչը կ compile-է կոդը սովորական CSS-ի՝ browser-ների համար հասկանալի։