SASS

June 03, 2024

Jekyll-ს აქვს ჩაშენებული sass ინტერპრეტატორი, ამ პოსტში მოყვანილია მისი გამოყენების ფორმა.

SASS

sass არის ინტერპრეტატორი, რომელიც უზრუნველყოფს CSS-ის გაფართოებას. ის წარმოდგენილია ორი სინტაქსის სახით - SCSS და SASS.

SCSS и Sass (Syntactically Awesome Stylesheets) – ეს ორი განსხვავებული სინტაქსისია ერთი და იგივე სტილების პრეპროცესორისათვის. ორივე მათგანი აფართოებს CSS-ის შესაძლებლობებს, მაგრამ აქვთ განსხვავებული სინტაქსისი და კოდის ჩაწერის სტილი.

ᲫᲘᲠᲘᲗᲐᲓᲘ ᲒᲐᲜᲡᲮᲕᲐᲕᲔᲑᲐ SCSS ᲓᲐ Sass ᲨᲝᲠᲘᲡ

SCSS (Sassy CSS)

• ᲡᲘᲜᲢᲐᲥᲡᲘᲡᲘ: ძალიან ჰგავს სტანდარტულ CSS-ს, აქვს ფიგურული ფრჩხილები {} და დაბოლოება წერტილ-მძიმით ;.
• ᲤᲐᲘᲚᲔᲑᲘᲡ ᲢᲘᲞᲘ: .scss
• ᲙᲘᲗᲮᲕᲐᲓᲝᲑᲐ: ადვილია მათთვის, ვინც უკვე იცნობს CSS-ს, რადგან სინტაქსისი პრაკტიკულად იდენტურია.
• ᲛᲐᲒᲐᲚᲘᲗᲘ:

  $primary-color: #3498db;
  
  body {
    font: 100% Helvetica, sans-serif;
    color: $primary-color;
  }
  
  .container {
    padding: 10px;
    @include border-radius(5px);
  }
  

Sass (ᲮᲐᲜᲓᲐᲮᲐᲜ ᲛᲝᲘᲮᲡᲔᲜᲘᲔᲑᲔᲜ “Sass indented syntax”)

• ᲡᲘᲜᲢᲐᲥᲡᲘᲡᲘ: ფიგურული ფრჩხილების და წერტილ-მძიმის ნაცვლად იყენებს აიდენტებს. აქვს უფრო მინიმალისტური სტილი.
• ᲤᲐᲘᲚᲔᲑᲘᲡ ᲢᲘᲞᲘ: .sass
• ᲙᲘᲗᲮᲕᲐᲓᲝᲑᲐ: ნაკლებად გავს CSS-ს, მაგრამ მოხერხებულია მათთვის, ვინც ამჯობინებს უფრო მოკლე და სუფთა სინტაქსის.
• ᲛᲐᲒᲐᲚᲘᲗᲘ:

  $primary-color: #3498db
  
  body
    font: 100% Helvetica, sans-serif
    color: $primary-color
  
  .container
    padding: 10px
    +border-radius(5px)
  

ᲠᲐᲢᲝᲛ ᲒᲐᲛᲝᲕᲘᲧᲔᲜᲔᲑᲗ SCSS-Ს ᲐᲜ Sass-Ს

• ᲛᲐᲦᲐᲚᲘ ᲞᲠᲝᲓᲣᲥᲢᲘᲣᲚᲝᲑᲐ: ორივე სინტაქსისი აქვს ისეთი ინსტრუმენტები, როგორიცაა ცვლადები, ჩადგმები, მიქსინები და ფუნქციები, რომლებიც აიოლებენ და აჩქარებენ სტილების დაწერას.
• ᲒᲐᲣᲛᲯᲝᲑᲔᲡᲔᲑᲣᲚᲘ ᲡᲢᲠᲣᲥᲢᲣᲠᲐ: ჩადგმები და კოდის მოდულირება ეხმარება სტილების უკეთ ორგანიზებას, მათ მეტად კითხვადობას და მხარდაჭერას.
• ᲙᲠᲝᲡᲑᲠᲐᲣᲖᲔᲠᲣᲚᲘ ᲗᲐᲕᲡᲔᲑᲐᲓᲝᲑᲐ: მიქსინების და ფუნქციების გამოყენება პრეფიქსების ავტომატურად დასამატებლად აუმჯობესებს სხვადასხვა ბროუზერის მხარდაჭერას.
• ᲙᲝᲓᲘᲡ ᲒᲐᲜᲛᲔᲝᲠᲔᲑᲘᲗ ᲒᲐᲛᲝᲧᲔᲜᲔᲑᲐ: მიქსინები და ცვლადები აიოლებს კოდის ბლოკების განმეორებით გამოყენებას და სტილების სწრაფ ცვლილებებს.

SCSS и Sass – ეს ორი განსხვავებული სინტაქსისია, არჩევანი მათ შორის დამოკიდებულია პროექტის ავტორის შეხედულებაზე.

ერთი Jekyll-პროექტისათვის არჩევანი უნდა გაკეთდეს ამ ორი სინტაქსიდან ერთერთზე, შერევა არ შეიძლება. არჩევანისათვის საკმარისია ფაილის ტიპის მითითება (ან .scss, ან .sass). სხვა სტრუქტურული ელემენტები აბსოლუტურად იდენტურია. მე განვიხილავ SCSS სინტაქსის, ხოლო ვინც უპირატესობას მიანიჭებს SASS-ს, წარმოდგენილ ინსტრუქციაში მხოლოდ ფაილების ტიპის შეცვლა მოუწევს.

Jekyll — ეს არის საიტების სტატიკური გენერატორი, რომელიც მჭიდროდ ინტერგრირებულია Sass-თან (და SCSS-თან), რაც საშუალებას იძლევა გომოვიყენოთ სტილების პრეპროცესორის მძლავრი შესაძლებლობები Jekyll-ის პროექტებში. აი როგორ მუშაობს Jekyll-ი Sass-თან და რით შეიძლება იყოს სასარგებლო:

Jekyll-ᲘᲡ ᲘᲜᲢᲔᲒᲠᲐᲪᲘᲐ Sass-ᲗᲐᲜ

1. ᲐᲕᲢᲝᲛᲐᲢᲣᲠᲘ ᲙᲝᲛᲞᲘᲚᲐᲪᲘᲐ: Jekyll-ი საიტის მშენებლობის პროცესში ავტომატურად აკომპილირებს .scss და .sass ფაილებს ჩვეულებრივ CSS ფაილებში. ეს ნიშნავს, რომ არაა საჭირო კომპილაციის პროცესის ხელით გაშვება; Jekyll ამას თვითონ გააკეთებს.

2. ᲞᲠᲝᲔᲥᲢᲘᲡ ᲡᲢᲠᲣᲥᲢᲣᲠᲐ: Sass ფაილების განლაგება, ჩვეულერივად, ხდება პროექტის ძირეული დირექტორიის _sass დირექტორიაში. ამ ფაილების იმპორტირება შესაძლებელია ძირითად სტილის ფაილში, რომელიც დაკომპილირდება CSS-ში.

   ᲞᲠᲝᲔᲥᲢᲘᲡ ᲡᲢᲠᲣᲥᲢᲣᲠᲘᲡ ᲛᲐᲒᲐᲚᲘᲗᲘ:

   my-jekyll-site/
   ├── _sass/
   │   ├── _variables.scss
   │   └── _mixins.scss
   ├── _site/
   ├── _config.yml
   ├── index.html
   └── assets/
       ├── css/
       │   └── main.scss
   

3. ᲪᲕᲚᲐᲓᲔᲑᲘᲡ ᲓᲐ ᲛᲘᲥᲡᲘᲜᲔᲑᲘᲡ ᲒᲐᲛᲝᲧᲔᲜᲔᲑᲐ: მონაცემები, მიქსინები და სხვა ფუნქციები იქმნება _sass დირექტორიაში მოთავსებულ ფაილებში, რომელთა იმპორტირებაც ხდება ძირითადი სტილის ფაილში.

   ᲤᲐᲘᲚᲘᲡ ᲛᲐᲒᲐᲚᲘᲗᲘ _sass/_variables.scss:

   $primary-color: #3498db;
   $padding: 10px;
   

   ცვლადს შესაძლებეილია მიენიჭოს მნიშვნელობა default.

$blue: #4a9ae1 !default;

თუ სადმე კოდში მოხდა $blue ცვლადზე მნიშვნელობის მინიჭება, მაშინ $blue: #4a9ae1 !default; მნიშვნელობა დაიგნორდება, თუ როდისმე გვეგნება ორი აღწერა

$blue: #4a9ae1 !default;
$blue: #5a9ae1 !default;

უპირატესობა მიენიჭება პირველს, მაგრამ აქაც, საკმარისია ამ ცვლადის აღწერა სადმე მოხდეს სხვა მნიშვნელობით, უპირატესი გახდება ის მნიშვნელობა.

მიქსინის მაგალითი: SCSS მიქსინი transition გამოიყენება CSS გადასვლების (transitions) კროსბრაუზერული მხარდაჭერისათვის. აი როგორ მუშაობს:

@mixin transition($args...) {
  -webkit-transition: $args; // ბრაუზერებისათვის, WebKit ძრავზე (მაგალითად, ძველი ვერსია Safari და Chrome)
  -moz-transition: $args;    // ბრაუზერებისათვის Gecko ძრავზე (მაგალითად ძველი ვერსია Firefox)
  transition: $args;         // სდანდარტული თვისება transition თანამედროვე ბროუზერებისათვის
}

$args... პარამეტრი საშუალებას გვაძლევს გადავცეთ ერთი ან რამოდენიმე პარამეტრი, რომელებიც იქნებიან გამოყენებული გადასვლებისათვის.

მიქსიის გამოყენების მაგალითი:

.element {
  @include transition(all 0.3s ease-in-out);
}

ეს კოდი იზამს გადასვლას ყველა ელემენტის თვისებაზე ხანგრძლივობით 0.3 წამი და ფუნქციით დროის ინტერვალით “ease-in-out”. CSS რეზულტატი გამოვა ასე:

.element {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

ამგვარად, ეს მიქსინი უზრუნველყობს კრობრაუზერულ თავსებადობას CSS გადასვლისათვის WebKit და Gecko-ს პრეფიქსების გამოყენებით, ასევე სტანდარტული თვისება transition.

მიქსინის ჩართვა ხდება @include ინსტრუქციის გამოყენებით.

ᲫᲘᲠᲘᲗᲐᲓᲘ ᲤᲐᲘᲚᲘᲡ ᲛᲐᲒᲐᲚᲘᲗᲘ assets/css/main.scss:

   ---
   ---
   @import 'variables';
   @import 'mixins';

   body {
     color: $primary-color;
     padding: $padding;
   }

1. ᲤᲠᲝᲜᲢᲛᲐᲗᲔᲠᲘ: ძირითადი სტილის ფაილი (მაგალითად, main.scss) უნდა იწყებოდეს ფრონტმათერით (ორი ხაზი ზემოთ და ქვემოთ ფაილის დასაწყისში), იმისათვის, რომ Jekyll-მა გაიგოს , საიდან უნდა დაიწყოს დამუშავება:

   ---
   ---
   
   @import 'variables';
   @import 'mixins';
   
   body {
     color: $primary-color;
     padding: $padding;
   }
   

Jekyll-ᲘᲡ ᲛᲝᲬᲧᲝᲑᲐ Sass-ᲗᲐᲜ ᲡᲐᲛᲣᲨᲐᲝᲓ

Jekyll-მა იცის, როგორ მოექცეს სტანდარტულად განლაგებულ Sass-ს, მაგრამ მისი გადაწყობა შეიძლება საკონფიგურაციო ფაილ _config.yml-ის საშუალებითაც, იმისათვის, თუ საჭიროა დამატებითი პარამეტრები.

ᲛᲐᲒᲐᲚᲘᲗᲘ _config.yml:

sass:
  style: compressed
  sass_dir: assets/css/_sass

ამ შემთხვევაში _sass კატალოგი პროექტის ძირიდან გადაინაცვლებს assets/css/_sass-ში

Sass-ᲘᲡ ᲒᲐᲛᲝᲧᲔᲜᲔᲑᲘᲡ ᲣᲞᲘᲠᲐᲓᲔᲡᲝᲑᲐ Jekyll-ᲗᲐᲜ

1. ᲡᲢᲘᲚᲔᲑᲘᲡ ᲝᲠᲒᲐᲜᲘᲖᲐᲪᲘᲐ: სტილების დაყოფა მოდულებად და კომპონეტებად, რაც კოდს ხდის უფრო სტრუქტუირებულს და კითხვადს.

2. ᲙᲕᲚᲐᲕᲛᲝᲮᲛᲐᲠᲔᲑᲐ: ცვლადების და მიქსინების გამოყენება პროექტის სხვადასხვა ადგილას სტილების კვლავგამოყენების საშუალებას იძლევა, რითაც აიოლებს კოდის მხარდაჭერას და განახლებას.

3. ᲐᲕᲢᲝᲛᲐᲢᲘᲖᲐᲪᲘᲐ: Jekyll-ის კომპილაციის პროცესი ავტომატიზირებულია, რითაც აღარ საჭიროებს Sass-ის CSS-ში კომპილაციის ხელით გაშვებას სტილების ყოველი ცვლილებისას.

4. ᲬᲐᲠᲛᲐᲓᲝᲑᲐ: პრეპროცესორის გამოყენება CSS-ის ოპტიმიზაციის საშუალებას იძლევა, მაგალითად მინიფიკაციის ფუნქციის გამოყენებით და პრეფიქსების ავტომატური დამატებით.

ᲓᲐᲡᲙᲕᲜᲐ

Jekyll-ი და Sass-ი ბრწყინვალედ შეესაბმებიან ერთმანეთს და დიველოპერს უქმნიან მძლავრ ინსტრუმენტს სტილების შესაქმნელად და სამართავად სტატიკურ საიებზე. Sass-ის Jekyll-ში ინტეგრაცია აიოლებს CSS-ის დაწერის, ორგანიზაციის და კომპლაციის პროცესს, უზრუნველყოფს სტილების შემუშავებაის ეფექტურობას და მოხერხებულობას.