რა მიზნით გამოიყენება წინასწარი დამუშავება განვითარებაში?

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-ში მიკსინი
  @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;
  }
  

ეს კოდი ორგანიზებას უკეთებს კოდს, ამცირებს დუბლირებას, ზრდის წაკითხვადობას და აჩქარებს განვითარებას. საბოლოოდ, წინასწარი დამუშავებელი კოდს გარდაქმნის ჩვეულ CSS-ში, რომელიც ბრაუზერებს ესმით.