ev > Windows 10 > Sass preprocessor nədir. SASS Sintaksisi. Sintaksis - Sass, Scss


Sass preprocessor nədir. SASS Sintaksisi. Sintaksis - Sass, Scss




Məqalənin tərcüməsi: Sass üçün Mütləq Başlayanlar üçün Bələdçi.
Andrew Chalkley.

SASS nədir?

SASSüçün abreviaturadır Sintaktik cəhətdən zəhmli üslub cədvəlləri adı kimi tərcümə oluna bilən CSS əsaslı metadildir "Əla sintaksisi olan CSS", Hampton Catlin tərəfindən hazırlanmışdır.

Bu, kodun işlənib hazırlanması və sonradan saxlanılması vəzifəsini xeyli asanlaşdıran CSS üslublarının yaradılması prosesini sadələşdirmək üçün bir vasitədir.

Siz nə vaxtsa, məsələn, müəyyən tərəddüdlü müştərini razı salmaq üçün müəyyən bir rəng HEX dəyərini tapmaq üçün onu başqası ilə əvəz etmək üçün üslub faylının bütün məzmununu nəzərdən keçirməli olmusunuzmu? Və ya çox sütunlu şablon üçün sütun enini hesablamaq üçün həmişə mövcud olmayan kalkulyator tətbiqinə müraciət edin?

SASS-ın ixtiyarında sizi belə bir rutindən xilas edəcək alətlər var. Bunlara aid edilə bilər dəyişənlər, qarışıqlar, yuva salma Və seçici miras.

Prinsipcə, SASS kodu CSS-ə bənzəyir, lakin dərhal diqqətinizi çəkən əsas fərqləndirici xüsusiyyət hər bir dəyər-dəyər cütündən və buruq mötərizələrdən sonra nöqtəli vergülün olmamasıdır.

Nümunə olaraq aşağıdakı CSS kod parçasını götürək:

#göydələn_reklamı
{
ekran: blok;
eni: 120px
hündürlük: 600px;
}

#leaderboard_reklamı
{
ekran: blok;
eni: 728px;
hündürlük: 90px;
}

Hansı bu SASS-ə bərabərdir:

#göydələn_reklamı
ekran: blok
eni: 120px
hündürlük: 600px

#leaderboard_reklamı
ekran: blok
eni: 728px
hündürlük: 90px

SASS-də kod fraqmentlərinin yuvalanmasını göstərmək üçün iki boşluğa bərabər olan intervaldan (növbəti sətrin əvvəlindəki girinti) istifadə olunur. ( *Son fraqmentdə aydınlıq üçün bu boşluqları qırmızı fonla vurğuladım.)

İndi SASS kodunun necə yaradıldığına dair bir fikrimiz var, gəlin onu belə edən məsələlərə baxaq. əla.

Dəyişənlər.

SASS-da dəyişəni elan etmək üçün onun adından əvvəl dollar simvolu qoymalısınız. Dəyişəninizin adı, məsələn, qırmızıdırsa, iki nöqtədən sonra ona uyğun aşağıdakı dəyəri təyin edə bilərik:

SASS bu tip dəyişənlərin dəyərlərini dəyişdirmək üçün istifadə edilə bilən qaralma və işıqlandırma kimi daxili funksiyaları təmin edir.

Beləliklə, aşağıdakı nümunədə paraqraflardakı şrift rəngi də qırmızı, lakin h1 başlıqlarında istifadə ediləndən daha tünd olacaq:

$qırmızı: #FF4848
$fontsize: 12px
h1
rəng: $ qırmızı

səh
rəng: tünd($qırmızı, 10%)

Dəyişənlər üzərində əlavə və çıxma kimi arifmetik əməliyyatları yerinə yetirə bilərsiniz, bu şərtlə ki, bunun üçün istifadə olunan dəyərlər eyni məlumat növüdür. Əgər, məsələn, daha tünd rəng tətbiq etmək lazımdırsa, onda bizə lazım olan tək şey dəyişəndə ​​saxlanılan kodda artıq istifadə olunmuş rəng dəyərindən, məsələn, #101-ə bərabər olan kiçik onaltılıq HEX dəyərindən çıxmaqdır. Eyni şey şrift ölçüsünün dəyərini dəyişdirmək lazım olduqda, məsələn, onu 10 piksel artırdıqda tətbiq olunur, bunun üçün sadəcə çatışmayan pikselləri əlavə edirik:

p.toplama_və_çıxma
rəng: $qırmızı - #101
şrift ölçüsü: $fontsize + 10px

Yuvalama.

SASS-da iki növ yuva var.

Selektor yuvası.

Bu, HTML kodunu strukturlaşdırmaq üçün istifadə edilənə oxşar olan birinci yuva növüdür:

$fontsize: 12px

natiq
.adı
şrift:
çəki: qalın
ölçüsü: $fontsize + 10px
.vəzifə
şrift:
ölçüsü: $fontsize

Yaranan CSS koduna nəzər salsanız, hər hansı şərhlər artıq olacaq. .name sinfini .speaker sinfi daxilində yerləşdirməklə ( *eyni şəkildə - növbəti sətrin əvvəlində iki boşluqdan istifadə etməklə) CSS seçicisi .speaker.name yaradılır. Eyni şey, ikinci .speaker.mövqe seçicisini meydana gətirmək üçün yuva quran birinci seçici üçün mülkiyyət bəyannaməsindən sonra aşağıdakı .pozisiya sinif adına da aiddir:

spiker.name(
şrift çəkisi: qalın;
şrift ölçüsü: 22px; )
.natiq.mövqe(
şrift ölçüsü: 12px; )

Yuvalama xüsusiyyətləri.

İkinci növ yuvalama, xassələri bir prefikslə (*) qurmağa imkan verir. font-family, font-size, font-weight və ya haşiyə tərzi, haşiyə-rəng, haşiyə-radius və s.):

$fontsize: 12px

natiq
.adı
şrift:
çəki: qalın
ölçüsü: $fontsize + 10px
.vəzifə
şrift:
ölçüsü: $fontsize

Yuxarıdakı misalda biz ana, ümumi xassə şriftinin elanından istifadə edirik: , sonra isə yeni sətirdə iki boşluq abzasından sonra xassələrin adətən defisdən sonra olan ikinci hissəsini təyin edirik.

Yəni şrift: xassəni, növbəti sətirdə iki boşluqdan sonra çəki: xassəni qeyd etsək, nəticədə o, məlum font-weight xassəsinə ekvivalent olacaq.

spiker.name(
şrift çəkisi: qalın;
şrift ölçüsü: 22px; )
.natiq.mövqe(
şrift ölçüsü: 12px; )

Modul bütün defis tərkibli xüsusiyyətlərə dəstək verir.

Bu cür yuvalama CSS kodunuzu təşkil etmək və strukturlaşdırmaq və lazımsız təkrarlardan qaçmaq üçün əla bir yoldur. ( *QURU- "Özünüzü təkrarlamayın" - "Özünüzü təkrarlamayın". Müəyyən elementlərin CSS formatlanmasının başqa yerlərdə onların üslublarını təkrarladığı və/və ya ləğv etdiyi, kodun oxunmasını və saxlanmasını çətinləşdirdiyi vəziyyətlər).

Qarışıqlar.

SASS-ın başqa bir əla xüsusiyyəti qarışıqlar.

Qarışıqlar SASS kodunun bütün hissələrini təkrar istifadə etməyə və hətta lazım gələrsə, onlara arqumentlər ötürməyə imkan verir. Və ən əsası, onların ilkin dəyərlərini də təyin edə bilərsiniz.

Miksin təyin etmək üçün SASS-da xüsusi olaraq qorunan @mixin açar sözündən və ardınca seçdiyiniz mixin adından istifadə edin. Arqumentlərə ehtiyac varsa, onları mötərizədə qeyd edin. Defolt arqument üçün təyin edilmiş dəyərlər miksin təyin edildikdə, iki nöqtə ilə ayrıldıqda müəyyən edilir. ( *Başqa sözlə, mixinlər CSS xüsusiyyətləridir.)

Miksinlərdən istifadə proseduru çox sadədir - @include açar sözündən sonra istədiyiniz miksin adını qeyd edin və əgər varsa, mötərizədə tələb olunan parametrləri qeyd edin.

Aşağıdakı nümunəyə nəzər salın:

@mixin border-radius($miqdar: 5px) /* mixin təyin edin */
-moz-border-radius: $miqdar
-webkit-border-radius: $miqdar
sərhəd radiusu: $miqdar

h1 /* mixin istifadə edin */
@include border-radius(2px)

natiq
@include border-radius

Bu SASS tərtib edildikdən sonra aşağıdakı CSS-ə çevriləcək:

h1 (
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
sərhəd radiusu: 2x )

natiq (
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
sərhəd radiusu: 5px )

h1 başlığı üçün biz açıq şəkildə sərhəd küncünün radius dəyərini təyin etdik, lakin sinif adı olan element üçün .speaker etmədik, ona görə də standart 5px dəyəri götürüldü.

Seçici miras.

Başqa əla SASS sintaksisinin bir xüsusiyyəti seçicilərin digər seçicilər üçün müəyyən edilmiş bütün üslubları miras alma qabiliyyətidir. Bu funksiyadan yararlanmaq üçün @extend açar sözündən sonra xassələrini miras almaq istədiyiniz seçicidən istifadə etməlisiniz:

h1
haşiyə: 4px bərk #ff9aa9

natiq
@uzatmaq h1
haşiyə eni: 2px

Nə tərtib ediləcək:

h1,.dinamik(
haşiyə: 4px bərk #ff9aa9; )

natiq (
haşiyə eni: 2px; )

(*Bəyannamənin sərhədinə diqqət yetirin: 4px bərk #ff9aa9; .dinamik seçicisi ilə qayda daxilində təkrarlanmır, əvəzində birinci qaydaya ikinci seçici əlavə edilir. Başqa sözlə, kodun təkrarlanması yoxdur.)

Fəaliyyətdə SASS-ı sınayın.

Onlayn.

Siz modulu yerli kompüterinizə quraşdırmadan SASS ilə onlayn tanış ola bilərsiniz.

Ancaq sınaqlara başlamazdan əvvəl səhifənin altındakı seçimi seçin "Girişli Sintaksis".

PC-də quraşdırılmışdır.

SASS özü Ruby platformasının tətbiqidir (gem). Buna görə də, onu quraşdırmaq üçün əvvəlcə platformanın özünü və bu RubyGems proqramlaşdırma dilinin paket menecerini quraşdırmadan edə bilməzsiniz. Platformanın özünü və meneceri uğurla quraşdırdıqdan sonra konsolda aşağıdakı əmri yerinə yetirin:

gem install sass

SASS modulu SASS fayllarınızı CSS fayllarına çevirmək üçün komanda xətti vasitəsi kimi istifadə edilə bilər.

Bu, məsələn, aşağıdakı əmri yazmaqla edilə bilər:

sass --sass_qovluğuna baxın:stylesheets_qovluğu

Burada sass_folder SASS faylları olan qovluğa gedən yoldur (yəni .sass uzantısı ilə) və stylesheets_folder tərtib edildikdən sonra nəticədə CSS fayllarının saxlanacağı qovluğa gedən yoldur. --watch əmri modula bildirir ki, o, göstərilən qovluqdakı hər hansı dəyişikliyi izləməli ( izləməli ) və əgər varsa, onları saxladıqdan sonra orijinal .sass fayllarını öz ekvivalent .css fayllarına çevirməlidir.

CSS-dən SASS-ə tərs çevrilmə.

Mövcud layihələrinizdə istifadə olunan üslubları "sass-convert" yardım proqramından istifadə edərək bu formata çevirməklə SASS-dan istifadə etməyə başlaya bilərsiniz.

Bunu etmək üçün əmr satırında məzmununu çevirmək istədiyiniz qovluğun yolunu daxil edin ( *yəni, mənbə fayllarının yerləşdiyi istədiyiniz kataloqa getmək kifayətdir). Sonra yuxarıda göstərilən yardım proqramını işə salın və ona aşağıdakı parametrləri verin:

sass-convert --css-dən --sass-a -R.

Burada -R bayrağı əməliyyatı yerinə yetirmək üçün rekursiv yolu müəyyən edir. Və növbəti nöqtə. o deməkdir ki, yaranan .sass faylları cari kataloqda saxlanılacaq. ( *Lazım olduqda, nöqtə yerinə, nəticədə yaranan faylları saxlamaq istədiyiniz qovluğa gedən yolu göstərə bilərsiniz.)

Salam dostlar!

Bu, preprosessor üçün ətraflı təlimatdır Sass yeni başlayanlar üçün. Burada biz Sass preprosessoru, onun üstünlükləri, sintaksisi ilə tanış olacaq və ondan nümunələrlə istifadə imkanlarını nəzərdən keçirəcəyik.

sərin

Pin edin

Bu dərsin bütün nümunələrini və fərdi layihəsini saytımızdan yükləyə bilərsiniz.

Sassən inkişaf etmiş və sabit CSS preprosessorlarından biri olmaqla yanaşı, peşəkarlar arasında ən populyar preprosessorlardan biridir.

Sass-ın faydaları

  • CSS-in müxtəlif versiyaları ilə uyğunluq, bunun sayəsində layihənizdə istənilən CSS kitabxanasından istifadə edə bilərsiniz;
  • Həyatın hər hansı bir hadisəsi üçün çox sayda müxtəlif funksiyalar. Çox az CSS preprosessoru belə zəngin funksionallıqla öyünə bilər;
  • Sass mövcud olduğu illər ərzində çoxlu təcrübə toplamış ən qədim CSS preprosessorlarından biridir;
  • Bir tərtibatçının həyatını asanlaşdıran Sass çərçivələrindən istifadə etmək üçün əla fürsət. Bu çərçivələrdən biri Sass yazarkən Jedi layoutunun bəzi nəşrlərində istifadə etdiyimiz Burbondur;
  • Sintaksis. Sizə ən uyğun olan iki sintaksisdən birini seçə bilərsiniz - sadələşdirilmiş (SASS) və genişləndirilmiş CSS-bənzər (SCSS).

CSS preprosessorları ilə ilk tanış olanda mən, bir çox digər təcrübəsiz veb tərtibatçıları kimi, CSS preprosessorlarından istifadə ideyasını tam başa düşmədim. Nəyə görə əlavə bir təbəqə düzəldin, bəzi alətlərdən istifadə edin, CSS-ni çətinləşdirin, düşündüm. Ancaq zaman keçdikcə hər gün CSS yazmağın işgəncəyə çevrildiyini, boz rutin olduğunu, bir çox hərəkətlərin təkrarlanmalı olduğunu, seçicilərin, xüsusiyyətlərin və hətta CSS kodunun bütün bloklarının istənilən nəticəni əldə etmək üçün kopyalandığını anlamağa başladım. Bu gün nümunələrdən istifadə edərək, Sass preprosessorundan istifadə edərək işinizi necə sadələşdirə biləcəyinizi, inkişafınızı şaxələndirə biləcəyinizi və hətta bəzi az və ya çox mürəkkəb funksiyaları yazaraq bir az əylənə biləcəyinizi göstərəcəyəm.

Ətraf mühitin qurulması

Bu dərslikdə Sass ilə işləmək üçün mühit olaraq, digər dərslərimizdə olduğu kimi, biz Gulp tapşırıq menecerinin Sass versiyasından istifadə edəcəyik ( qup-sass). Orijinal Ruby versiyasını istifadə etmək və ya Sass-ı xüsusi proqram təminatı ilə tərtib etmək üçün burada təlimatları oxuya bilərsiniz. vebsayt. Bu dərs əsasən praktikdir, ona görə də layihəyə qoşulmağın mümkün variantları üzərində dayanmayacağıq, biz Gulp istifadə edərək Sass-ı ən məşhur şəkildə birləşdirəcəyik.

Node.js və Gulp-in ən son versiyasını quraşdırdığınızdan əmin olun. Node.js quraşdırılmayıbsa, onu endirin və quraşdırın. Node.js-i quraşdırdıqdan sonra əmrlə gulp quraşdırın "npm i -g yudum"(Windows) və ya "sudo npm i -g yudum"(Linux, OS X). Oxuyun: .

npm i --save-dev gulp gulp-sass

Var gulp = require("gulp"), // Daxil et Gulp sass = tələb("gulp-sass"); // Sass paketini daxil edin gulp.task("sass", function() ( // "sass" tapşırığı yaradın qaytar gulp.src(["sass/**/*.sass", "sass/**/*.scss "]) // source.pipe əldə edin(sass((outputStyle: "expanded")).on("error", sass.logError)) // gulp-sass .pipe(gulp.dest(") ilə Sass-ı CSS-ə çevirin css")) // Nəticəni css qovluğuna yükləyin )); gulp.task("saat", funksiya() ( gulp.watch(["sass/**/*.sass", "sass/**/*.scss"], ["sass"]); // Bax sass qovluğunda sass fayllarının arxasında)); gulp.task("standart", ["saat"]);

6-cı sətirə diqqət yetirin - burada nəticələnən faylda çıxış üslublarından birini istifadə edirik: yuvalanmış- standart olaraq yuvalanmış; genişlənmişdir- yerləşdirilmiş; yığcam- yığcam, buruq mötərizələrdə selektor və onun xassələri bir sətirdə göstərildikdə; sıxılmış- sıxılmış. Bundan əlavə, emal səbəbiylə .on("xəta", sass.logError) xəta baş verərsə, biz Gulpfile run əmrini yenidən yükləmək məcburiyyətində qalmayacağıq və biz Sass faylının hansı sətirində xətanın olduğunu görəcəyik. Nümunələrdə mən çıxış üslubundan istifadə edəcəyəm genişlənmişdir aydınlıq üçün.

Fayl sisteminizdə aşağıdakı layihə strukturu olmalıdır:

  • mənim layihəm/
    • css/
      • ümumi.css
    • sass/
      • ümumi.sass
    • node_modules/
    • gulpfile.js
    • paket.json

Komanda ilə Gulpfile-nin icrasına başlayırıq udmaq layihə qovluğu terminalında.

Burada bütün Sass fayllarını kataloqdan götürürük sass/ layihənizin və bitmiş CSS nəticəsini qovluğa yükləyin css/. Bundan əlavə, burada bir müşahidə qururuq izləmək Sass fayllarında dəyişikliklər və belə dəyişikliklər baş verərsə, CSS-ə avtomatik tərtib üçün. Nəticədə css faylı tərtibata daxil edilir.

Bu nümunədə Gulp paketlərinin qurulması ilə bağlı başa düşmədiyiniz bir şey varsa, Gulp təlimatını oxuyun.

Ətraf mühitimiz qurulduqdan və *.sass fayllarını kataloqda saxlayarkən Sass uğurla CSS-ə çevrildikdən sonra sass/, siz təhlükəsiz şəkildə öyrənməyə davam edə və bu gün praktikada təhlil edəcəyimiz nümunələrə əməl edə bilərsiniz.

Sass sintaksisi

Sass yazmağın 2 yolu, 2 sintaksis var: SASS və SCSS. Sassın ən qədim yazılışı girinti sintaksisi. Bu, dərsimizdə istifadə edəcəyimiz orfoqrafiyadır. Belə sintaksis üçün fayl uzantısı belədir *.sass. İkinci seçim sintaksisdir, CSS sintaksisinin genişləndirilməsi, Sassy CSS. SCSS adi CSS kimi yazılır, lakin əlavə Sass xüsusiyyətləri ilə genişləndirilir. SCSS sintaksisi ilə fayl uzantısı - *.scss.

Çox vacib! Girinti sintaksisi iç-içə xassələrin çox diqqətlə girintiyə salınmasını tələb edir və siz Gulp işləyərkən xətalar və ya konsolda sətir göstərmədən gizli xətalar alırsınızsa, çox güman ki, xəta yanlış abzasdadır. Başqa bir vacib detal - əgər siz nişanları abzas kimi istifadə etsəniz, tərtibçi Sass-ı çevirmək istəyərkən xəta verəcək və bu, nişanlara əlavə olaraq boşluqları da abzas kimi istifadə edir. Ya yalnız tab və ya boşluqlardan istifadə edirsiniz.

SASS və SCSS sintaksisi:

SASS - Girinti Sintaksisi SCSS - genişləndirmə sintaksisi
$font-stack: Helvetica, sans-serif $primary-color: #333 əsas şrift: 100% $font-stack color: $primary-color $font-stack: Helvetica, sans-serif; $əsas rəng: #333; bədən ( şrift: 100% $font-stack; rəng: $primary-color; )

Əsas orfoqrafiya qaydalarına əlavə olaraq (qıvrımlı mötərizə, sətirlərin sonunda nöqtəli vergül) SASS və SCSS bəzi funksiyaların yazılmasında da fərqlənir. Beləliklə, İnternetdən hər hansı bir nümunədən istifadə edərkən diqqətli olun, hansı sintaksisdən istifadə olunduğunu yoxlayın. İnternetdən kifayət qədər böyük bir nümunə SCSS üslubundadırsa və layihəniz SASS-da yazılıbsa, direktivdən istifadə edərək sintaksisi və fayl uzantısını dəyişdirmədən onu əsas faylınıza idxal edə bilərsiniz. @import məsələn, faylı endirmisinizsə carousel.scss, sonra onu özünüzə qoşa bilərsiniz əsas.sass simli @import "karusel". Siz həmçinin *.sass fayllarını main.scss faylına idxal etmək lazım olduqda bunun əksini edə bilərsiniz. Github nümunəmizdə hər şeyi idxal edirik _x.x.sass faylları birinə ümumi.sass, burada x.x bu məqalədəki nümunənin başlıq nömrəsidir.

Girinti sintaksisindən istifadə edəcəyik.

1. CSS-i Sass ilə genişləndirin

1.1 Yuvalama qaydaları

Sass tərtibatçılara CSS qaydalarını başqaları arasında yerləşdirmək üçün əla fürsət verir və bununla da uzun seçicilərin yazılması/kopyalanması üçün vaxtı azaldır və aydın iyerarxiya ilə kodu daha strukturlaşdırılmış edir.

1.2 Ana selektora bağlama

Yeni qayda yaratmadan selektoru genişləndirmək istəyirsinizsə, işarədən istifadə edərək əlavə seçiciləri əvvəlcədən hazırlanmış seçiciyə bağlaya bilərsiniz. & . Zahirən, bu, iyerarxiyada uşaq seçicisi yaratmaq kimi görünür, lakin istifadə edir & , biz ana selektoru genişləndiririk, uşaq seçicisini yaratmırıq.

Qaydaya diqqət yetirin body.firefox &, bu, sonunda təyin olunarsa, hər hansı bir elementdən indiki birinə yeni bir zəncir əldə etməyə imkan verir & .

Əlavə olaraq, ana bağlama mürəkkəb seçicilər yaratmaq üçün istifadə edilə bilər:

1.3 Əlavə edilmiş xüsusiyyətlər

Rahatlıq üçün əmlakın ad sahəsi şəkilçisini qoşmalara bölmək olar. Misal üçün, marjaüst, marja- alt, marja-sol, marja-sağda ortaq bir kök var marja və aşağıdakı kimi yuvalara bölünə bilər:

1.4 Nümunə seçiciləri

Bəzən elə bir vəziyyət yaranır ki, səhifədəki bir neçə element eyni CSS bazasından, yalnız onlara xas olan eyni xüsusiyyətlər dəstindən istifadə edir. Bu əsas CSS qaydaları Sass-da bir çox yerdə istifadə üçün joker seçici kimi formatlana bilər. Şablon seçiciləri direktivdən istifadə etməklə çıxarılır @uzatmaq.

2. SassScript

SassScript istifadəçi dəyişənləri, arifmetik və digər funksiyalardan istifadə etməklə Sass-ın imkanlarını əhəmiyyətli dərəcədə genişləndirməyə imkan verir. SassScript avtomatik olaraq yeni seçicilər və xassələr yaratmaq üçün istifadə edilə bilər.

2.1 Sassdakı dəyişənlər

Sass faylınızın istənilən yerində istifadə oluna bilən dəyişənləri təyin edə bilmək çox gözəldir. Rənglər, standart dəyərlər, vahidlər, bütün bunlar dəyişənə götürülə və gələcəkdə istifadə edilə bilər. Dəyişən aşağıdakı kimi müəyyən edilir: $adı: dəyər.

2.2 Rəqəmlər və sətirlərlə əməliyyatlar + interpolyasiya

Sass toplama (+), çıxma (-), bölmə (/) və modul (%) kimi ədədlər üzərində standart hesab əməliyyatlarından istifadə etməyə imkan verir. Müqayisə operatorları (<, >, <=, >=, ==, !=) rəqəmlər üçün də dəstəklənir.

Bundan əlavə, Sass sətirləri birləşdirmək (birləşdirmək) qabiliyyətinə malikdir.

Nümunədən gördüyümüz kimi $ cəmi: 10 + 20 / 2, arifmetik əməliyyatların yerinə yetirilməsində prioritet müşahidə olunur - əvvəl bölmə, sonra toplama. Mötərizədə riyaziyyatda olduğu kimi əməliyyatların ardıcıllığını təyin etmək olar. Əlavə edərkən qeyd edin 12px + 8px, alacağıq 20px.

Həmçinin 2 və 9-cu sətirlərə diqqət yetirin, burada biz Sass faylının istənilən yerinə dinamik dəyərlər yerləşdirmək üçün interpolyasiyadan istifadə edirik, o cümlədən əmlak adı, seçici adı və ya hər hansı bir sətir var.

İnterpolyasiya başqalarından istifadə edərək yeni dəyər əldə edir.

Sass-da interpolyasiyadan ən çox istifadə edilən konstruksiya vasitəsilə başqa dəyişənin dəyərinə "inteqrasiya" etməklə dəyişən üçün yeni dəyər əldə etməkdir. #{} , Misal üçün:

PHP-də, məsələn, qoşa dırnaqlarda edə biləcəyiniz kimi, interpolyasiyadan istifadə etmədən sadəcə dəyişəni götürüb sətirə yapışdıra bilməzsiniz. Dəyişənlərə interpolyasiyadan istifadə etdiyinizə əmin olun.

2.3 Rənglərlə əməliyyatlar

Sassdakı rəngləri əlavə etmək, çıxmaq, bölmək və çoxaltmaq olar. Bütün arifmetik əməliyyatlar hər bir rəng üçün ayrıca yerinə yetirilir: qırmızı, yaşıl və mavi.


Nəzərə alın ki, rgba rəngləri əlavə edilərkən sonuncu qeyri-şəffaflıq parametri 0.75 ifadədə digərlərindən fərqlənməməlidir, əks halda əlavə xətası yaranacaq. Bunun əvəzinə rgba alfa kanalını istifadə edərək tənzimləyə bilərsiniz tutqunlaşdırmaq Və şəffaflaşdırmaq və ya rgba funksiyası vasitəsilə HEX rənginin qeyri-şəffaflığına nəzarət edin.

3. Direktivlər və qaydalar

3.1 @import

Sass faylınıza idxal edə bilərsiniz sass, scss Və css direktivdən istifadə edərək fayllar @import, bütün miksinlər və dəyişənlər idxalın baş verdiyi əsas faylda işləyəcək.

@import normal CSS @import kimi işləyəcək, əgər:

  • fayl yolunda mövcuddur http://;
  • fayl vasitəsilə çağırılır url();
  • və ya idxalda media parametrləri var.

Başqa bir faylın əsas Sass faylına tam idxal edilməsi üçün fayl uzantısı olmalıdır *.sass, *.scss və ya *.css.

Gəlin bəzi nümunələrə baxaq.

Aşağıdakı fayllar idxal olunur olmayacaq:

Aşağıdakı fayllar olacaq idxal:

Diqqət! Yeni versiyalarda qup-sass CSS fayllarını Sass-a idxal etmək üçün .css uzantısını göstərməlisiniz

Vergüllə ayrılmış bir neçə faylı idxal etmək mümkündür: @import "başlıq", "media".

Alt xətt ilə başlayan fayllar çağırılır fraqmentlər və idxal edərkən altdan xətt çəkməyə və genişləndirməyə ehtiyac yoxdur. Məsələn, fayl _başlıq.sass belə idxal edilə bilər: @import "başlıq".

Qeyd edək ki, idxal direktivi göstərdiyiniz nöqtədə baş verir @import. Müvafiq olaraq, zəruri olan yerdə iç-içə idxal etmək mümkündür:
#main @import "nümunə"

3.2 @at-root

Direktiv @at-root zənciri valideyndən ləğv edərək içindəki qaydaları kökünə qaldırır. Burada hər şey sadədir:

Biz Sass-da olan bütün direktivləri nəzərdən keçirmədik, ancaq praktikada ən çox istifadə olunanları nəzərdən keçirdik. Sass direktivləri haqqında daha çox öyrənmək istəyirsinizsə, sənədlərə baxın.

4. İfadələr

Sass müxtəlif şərtlər üçün ifadələrdən və funksiyalardan istifadəni, döngələrin həyata keçirilməsini və s.

4.1 @if() direktivi

Direktiv @if() SassScript-i müəyyən şərtlərlə icra etməyə imkan verir və aşağıdakı sintaksisə malikdir:

4.2 @for direktivi

@forüslubları olan bloku bir neçə dəfə göstərir. İş zamanı sayğac dəyişəni təyin edə bilərsiniz.

Müəyyən edə bilərsiniz vasitəsilə Nümunədə olduğu kimi 10-a qədər deyil, 1-dən 11-ə daxil olmaq istəyirsinizsə to yerinə.

4.3 @hər direktiv

Təkcə rəqəmlər deyil, dəyərlər siyahısı üzərində təkrarlamaq istəyirsinizsə, direktivdən istifadə edə bilərsiniz @hər:

4.4 @while direktivi

@while ifadə olduğu müddətdə üslub blokları arasında dövr edir doğru.

5. Qarışıqlar

Qarışıqlar- arqumentlər (isteğe bağlı) götürə bilən və yazı üslublarının imkanlarını əhəmiyyətli dərəcədə genişləndirməyə və eyni tipli qaydaların və hətta bütün CSS bloklarının tətbiqinə sərf olunan vaxtı azaltmağa imkan verən Sass kodu blokları (və ya mixins-şablonları). Bu, bir növ arqument götürə bilən, böyük həcmdə iş görə bilən və giriş parametrindən asılı olaraq nəticə çıxara bilən funksiyaya bənzəyir.

Qarışıq direktiv tərəfindən elan edilir @mixin, bəyannamədən sonra göstərilməlidir ad qarışdırın. Mixin direktivi ilə çağırılır @daxil et, əgər varsa, miksin və ötürüləcək arqumentlərin adını alır.

Dostlar, biz Sass-ın CSS sayt üslubları ilə səmərəli işləmək üçün kifayət edən əsas xüsusiyyətlərini nəzərdən keçirdik. Bəzi direktivlər və xüsusiyyətlər bu təlimata daxil edilməyib, lakin Sass-ın bütün xüsusiyyətlərini öyrənməkdə maraqlısınızsa, bu faydalı olacaq.

Mən dərhal suala cavab verəcəyəm - bitmiş saytda Sass üslubları ilə necə işləmək olar, həqiqətən hazır CSS-ni redaktə etmək və FTP vasitəsilə yükləmək lazımdırmı? Xeyr, bunu edə bilməzsən. Sass üslublarınızın yerli surətinə və ya hətta bütöv bir sayta sahib olmalı və işi bitirdikdən sonra FTP hazır üslubları vasitəsilə yerləşdirməli (yükləməlisiniz). Bunun üçün Gulp paketindən istifadə edə bilərsiniz vinil-ftp. Və ya FTP/sFTP vasitəsilə yüklənmiş faylları tərtib etmək üçün serverinizdə Sass mühiti qurun.

Hamıya salam! Zaman necə tez uçur. Yazı üslublarından adi Css-dən Sass preprosessoruna necə keçdiyimin fərqinə varmadım. Ancaq əvvəllər başa düşmədim - Sass nədir, nə üçündür, bu, yəqin ki, dizaynda super qabaqcıl peşəkarlar üçündür. Bəli, preprosessorların istifadəsi veb inkişafında yeni səviyyəyə bir addımdır, lakin burada dəhşətli və mürəkkəb bir şey yoxdur və bu məqaləni sona qədər oxumaqla özünüz görəcəksiniz.

Beləliklə, preprosessor və xüsusilə Sass haqqında nə yaxşıdır? Dərhal deyəcəyəm ki, başqaları da var, məsələn, Less, Stylus və s. Onların hamısı eyni prinsiplə işləyir, lakin hər birinin öz xüsusiyyətləri var. Sass peşəkarlar arasında böyük populyarlıq qazandı, bunun nəticəsində öyrənmə çox sadələşdirildi. Sadəcə olaraq, texnologiya nə qədər populyardırsa, icma bir o qədər böyükdür və sənədləşmə bir o qədər genişdir.

Preprosessorlar kod yazarkən tərtibatçını adi işlərin əksəriyyətindən xilas etmək və bununla da işin sürətini və keyfiyyətini artırmaq üçün nəzərdə tutulmuşdur. CSS preprosessorlarına əlavə olaraq, Pug (Jade) kimi HTML preprosessorları da var.

Məqalə strukturu

Sənədlər

Sass-ın tərtibçisi müəyyən vaxtdan Almaniyada yaşayan fransız Hugo Giraudeldir. Təbii ki, sənədlər ingilis dilindədir, lakin mən şəxsən onu yaxşı başa düşürəm (texniki ingilis dilini bilmək vacibdir). Amma rus dilinə tərcüməsi də var. Mən hələ də ingilis dili versiyasını tövsiyə edərdim, bu, ingilis dilinə öyrəşmək və daha çox və daha dərindən öyrənmək üçündür. Ancaq rus da bundan pis deyil.

  • İngilis dili sənədləri: http://www.sass-lang.com
  • Rus sənədləri: https://sass-scss.ru

Sass-ı CSS-ə tərtib etmək

Sass-ı Css-ə tərtib etmək üçün proqram kimi mən Sass tapşırıq meneceri plaginindən istifadə edirəm. Ümumiyyətlə, Sass Ruby dilinin tətbiqidir (Gem). Buna görə də, Gulp olmadan etmək istəyirsinizsə, Css-ə kompilyasiya etmək üçün Ruby proqramlaşdırma dili platformasını quraşdırmalısınız. Bunun necə edildiyini indi göstərməyəcəyəm, bu barədə rəsmi veb saytında oxuya bilərsiniz.

Sintaksis - Sass, Scss

Dərhal qeyd edirəm ki, kod yazmaq üçün 2 sintaksis var: Sass və Scss.

Sass sintaksisi Scss-dən bir qədər fərqlidir. Scss daha çox adi Css koduna bənzəyir və Sass qaydalar arasında əyri mötərizələri və nöqtəli vergülləri buraxır. Bəzi funksiyaların necə yazıldığı ilə bağlı da fərq var və siz hansı sintaksisi seçdiyinizə diqqətli olmalısınız. Sass üçün fayl uzantıları − *.sass və Scss üçün - *.scss. Sass sintaksisi daha köhnədir və Scss yeni başlayanlar üçün öyrənməyi asanlaşdırmaq üçün daha sonra gəldi. Mən özüm bu preprosessoru Scss-də öyrənməyə başladım, ona görə də onu başa düşmək daha asan oldu. İndi Sass-a keçdim, mənim üçün daha rahatdır.

Sass haqqında danışırıqsa, onda onun kod strukturu girinti əsasında qurulur (çünki orada heç bir qıvrım mötərizə yoxdur) və burada diqqətli olmalısınız, çünki həm tab (TAB - 4 boşluq), həm də adi boşluqlar (adətən ikiqat boşluq). Mən həmişə tablardan istifadə edirəm.

Unutma!Əgər siz tab dayanacağını abzas kimi istifadə edirsinizsə, boşluqlar xaric edilməlidir ki, hər yerdə eyni olsun. Və əksinə - boşluqlardan istifadə edirsinizsə, nişanlar xaric edilməlidir. Əks halda, kompilyator xəta atacaq.

Sass

.maincontent .main-title font-size: 30px font-weight: 700 haşiyə: 0 0 30px .description margin-bottom: 30px p color: #444444 font-size: 16px line-height: 22px

Scss

.maincontent ( .main-title ( şrift ölçüsü: 30px; şrift çəkisi: 700; kənar: 0 0 30px; ) .description ( alt kənar: 30px; p ( rəng: #444444; şrift ölçüsü: 16px; xətt -hündürlük: 22px; )))

Əksər kod redaktorlarında (məsələn, Sublime Text) bizi çaşdırmamaq üçün zolaqlı girinti var. Aşağıdakı nümunələrdə Sass sintaksisindən istifadə edəcəyəm.

Sass ilə həyatı asanlaşdırın

Yuvalama qaydası

Sass-ın əvvəldən bəyəndiyim budur, sadəcə css qaydalarının bir-birinə yuvalanmasıdır. Bu, çox vaxta qənaət edir və kod strukturlaşdırılmışdır və oxunması asandır. Məsələn, əgər biz konkret ana konteynerin elementlərini üslub etmək istəyiriksə, onda hər dəfə Css-də ana sinfi təyin etməliyik, məsələn:

Əsas .başlıq ( şrift ölçüsü: 30px; rəng: #444; ) .əsas .altyazı ( şrift ölçüsü: 20px; ) .main .təsvir ( şrift ölçüsü: 14px; kənar-alt: 30px; )

Yəni biz hər yerdə ana sinif .main təyin edirik və bu da öz növbəsində çox rahat deyil. Sass istifadə edərək, belə yazmaq olar:

Scss

.main ( .title ( şrift ölçüsü: 30px; rəng: #444; ) .altyazı ( şrift ölçüsü: 20px; ) .təsvir ( şrift ölçüsü: 14px; kənar-alt: 30px; ) )

Sass

.main .title font ölçüsü: 30px rəng: #444 .altyazı şrift ölçüsü: 20px .təsvir şrift ölçüsü: 14px kənar-alt: 30px

Razılaşın, bu şəkildə daha səliqəli görünür və kodu daha sürətli yaza bilərsiniz, çünki biz .main ana sinifini yalnız bir dəfə yazırıq. Ruby və bütün bu proqramları quraşdırmadan məni izləmək istəyirsinizsə, nümayiş etdirmək üçün onlayn tərtibçidən istifadə edə bilərsiniz.

Əlavə edilmiş xüsusiyyətlər

Sassda yuvalama qaydalarına əlavə olaraq, yuva xüsusiyyətlərinin olması ehtimalı var. Məsələn, marja dəyərlərini necə yazmaq olar:

Sass

.main .başlıq kənarı: yuxarı: 10px sağ: 15px aşağı: 10px sol: 15px

css

.main .title ( yuxarı kənar: 10px; kənar-sağ: 15px; kənar-aşağı: 10px; kənar-sol: 15px; )

Seçiciyə və ya birləşməyə bağlama - işarələ &

− simvolundan istifadə edərək birləşdirmə (əlaqə) tətbiq etməklə kod yazmağımızı sürətləndirə və onu daha da yığcam edə bilərik. & . Bu necə işləyir? Məsələn, bizdə belə siniflər var: .main-title , .main-subtitle , .main-description . Sass-da bu siniflər aşağıdakı kimi yazıla bilər:

Əsas &-başlıq şrift ölçüsü: 30px rəng: #444 &-altyazı şrift ölçüsü: 20px &-təsvir şrift ölçüsü: 14px kənar-alt: 30px

Əsas başlıq ( şrift ölçüsü: 30px; rəng: #444; ) .main-altyazı ( şrift ölçüsü: 20px; ) .main-təsvir ( şrift ölçüsü: 14px; kənar-alt: 30px; )

Simvol ilə & biz kök sinfinə qoşuluruq, ona görə də bu halda kökün daim təkrarlanmasına ehtiyac yoxdur.main . Eyni zamanda nəzərə alın ki, biz uşaq elementləri yaratmamışıq.

/* İstinad */ a (rəng: qırmızı; ) a:hover ( rəng: mavi; ) /* Pseudo-elementlər */ .main::befor ( məzmun: ""; displey: blok; şrift ölçüsü: 20px; ) .main ::after ( məzmun: ""; ekran: blok; şrift ölçüsü: 30px; )

Bəzən seçiciləri cari elementə qədər zəncirləmək lazımdır. Əlbəttə ki, onu kökünə götürə bilərsiniz, ancaq yuvanı pozmamaq üçün aşağıdakı kimi yaza bilərsiniz:

Əsas .konteyner və eni: 700px

Konteyner .main (en: 700px)

Hərəkət etməklə & selektordan sonra dok sırasını dəyişdik, yəni bu halda .container sinfi valideyndir.

Əsas seçiciyə bağlanır, lakin bir səviyyə yuxarıdır

Yuxarıda, məsələn, Sass kodunu nümayiş etdirdim:

Əsas &-başlıq şrift ölçüsü: 30px rəng: #444 &-altyazı şrift ölçüsü: 20px &-təsvir şrift ölçüsü: 14px kənar-alt: 30px

İndi təsəvvür edin ki, .main-title blokunda daha bir element var ki, onu bütün ana zəncirdən istifadə etməklə açıq şəkildə tərtib etmək lazımdır. Uzun müddətdir ki, mən sadəcə kök adını göstərdim (bu halda, .main), lakin bu, çox rahat deyil. Sass sənədlərini araşdırmağa başladım və bir həll tapdım. Əslində, hər şey sadədir - biz valideynə istinad elan etməliyik və lazım olduqda istifadə etməliyik.

Əvvəllər bunu belə etdim:

Əsas &-başlıq şrift ölçüsü: 30px rəng: #444 .main__icon // .main-in kökünü təyin edin, əks halda &-dən istifadə etsəniz, o, .main-title rəngi: #444 eni: 20px &-subtitr şriftinə bağlanacaq. -ölçüsü: 20px & -təsvir şrift ölçüsü: 14px kənar-alt: 30px

İndi bunu edə bilərsiniz:

Əsas $self: & // valideynə keçid &-title font ölçüsü: 30px rəng: #444 #($self)__icon // əvəzinə & əsas rəngə keçiddən istifadə edin: #444 eni: 20px &-altyazı şrift ölçüsü : 20px &-təsvir şrift ölçüsü: 14px kənar-alt: 30px

Əgər fikir vermisinizsə, biz valideynə istinad elan etmişik - $self: & . Mənə görə bu, javaScript-də hadisəyə səbəb olan obyektə (bu) istinadı bir qədər xatırladır. İndi, düzgün yerdə, biz sadəcə olaraq onu #($self) adlandıra bilərik. Hər şeyin nə qədər sadə olduğu ortaya çıxdı, amma beynimi sındırdım və Sassda bu problemin həlli olmadığını düşündüm.

Əsas başlıq ( şrift ölçüsü: 30px; rəng: #444; ) .main-title .main__icon ( rəng: #444; en: 20px; ) .main-subtitle ( şrift ölçüsü: 20px; ) .main-təsvir ( şrift ölçüsü: 14px; kənar-alt: 30px; )

Boş Şablonlar

Tez-tez olur ki, bir neçə element eyni üslub bazasına malikdir, lakin bir-birindən yalnız bir neçə qayda ilə fərqlənir. Məsələn, düymələri götürək. Düymələrin eyni ölçüsünü götürsək, onlar yalnız rəngdə fərqlənə bilər: qırmızı, yaşıl, boz və s. Əgər siz təmiz Css istifadə edirsinizsə, onda siz əsas üslublarda bütün düymə rənglərini vergüllə ayırmalı və ya əsas sinif yaratmalı olacaqsınız. Ancaq Sass-da bu daha asandır:

%button fon rəngi: #666 haşiyə: 1px bərk #666 dolgu: 0 20px şrift ölçüsü: 15px sətir hündürlüyü: 40px hündürlük: 40px .button-green @extend %düyməsinə fon rəngi: yaşıl haşiyə rəngi: yaşıl. düymə-qırmızı @uzatmaq %düymənin fon rəngi: qırmızı haşiyə-rəng: qırmızı

Düymə-yaşıl, .düymə-qırmızı ( fon rəngi: #666; haşiyə: 1px bərk #666; doldurma: 0 20px; şrift ölçüsü: 15px; xətt hündürlüyü: 40px; hündürlük: 40px; ) .düymə-yaşıl ( fon rəngi: yaşıl; haşiyə rəngi: yaşıl; ) .düymə-qırmızı ( fon rəngi: qırmızı; haşiyə rəngi: qırmızı; )

Bu zaman seçici % düyməsi şablon kimi çıxış edir (bu -%) işarəsi ilə göstərilir. Bu rahatdır, çünki şablon seçicisinin özü heç bir yerdə iştirak etmir və onun üslubları direktiv vasitəsilə digər seçicilər tərəfindən miras alınır - @uzatmaq. Bu şablondan istədiyiniz qədər istifadə oluna bilər və bununla da kodun miqdarı azalır.

SassScript

Proqramlaşdırma dillərində olduğu kimi Sass-da da aşağıdakı funksiyalar mövcuddur: dəyişənlərin yaradılması, hesab əməliyyatları (toplama, çıxma, bölmə, vurma və s.), təkrarlamalar (döngülər), funksiyalar (miksinlər) və s. Yəni, Sass bir növ proqramlaşdırma dilidir ki, yenə də kodun yazılmasını sadələşdirmək və bəzən işi sürətləndirmək üçün nəzərdə tutulub.

Dəyişənlər

Sass-da dəyişən işarə ilə başlayır $ , və adı Latın dilində yazılır, məsələn: $color . Qeyd etmək lazımdır ki, əlamətlər: — "Və" _ » dəyişdirilə bilər. Məsələn, əgər $color-red çağırılırsa, o zaman $color_red də çağırıla bilər. Dəyişən aşağıdakı kimi müəyyən edilir: $adı: dəyər, məsələn: $color: #f6f6f6 .

İstənilən yuva səviyyələrindən kənar elan edilmiş dəyişən qlobal miqyasda mövcuddur, yəni. hər yerdə istifadə oluna bilər. Əgər hər hansı bir seçici yuva səviyyəsində dəyişən təyin etmisinizsə, o, yalnız həmin səviyyədə mövcud olacaq. Bütün sənəddə qlobal şəkildə işləməsi üçün açar sözü göstərməlisiniz !qlobal.

Başlıq $font-size: 10px !qlobal font-size: $font-size .subtitle font-size: $font-size

Ümumiyyətlə, dəyişənlər gözəl bir şeydir, dəyər elan etməyə və daxil etməyə dəyər, ondan sonra istədiyiniz qədər və istədiyiniz yerdə istifadə edə bilərsiniz. Məsələn, rəngləri onlara xüsusi adlar, şrift ölçüləri, şrift ailələri və s. verməklə müəyyən edə bilərik. və ümumiyyətlə istənilən dəyərlər.

direktivlər

@uzatmaq

Şablon-blankı tədqiq edərkən yuxarıda bu direktivə toxunduq. Gəlin biliklərimizi möhkəmləndirək. İstifadə etməklə @uzatmaq istənilən seçicinin qaydalarını köçürə bilərik. Məsələn, yerləşdirərkən, ola bilər ki, element " A"və element" B' görünüşcə oxşar ola bilər. Bu halda, siz "A" elementi üçün qaydaları yaza bilərsiniz və "B" üçün sadəcə istədiyiniz xassələri bir az yenidən müəyyən edərək, "A" elementinin üslublarını köçürün.

Blok_a fon rəngi: #cccccc haşiyə: 5px bərk #999999 dolgu: 20px şrift ölçüsü: 30px hündürlük: 150px eni: 150px .block_b @extend .block_a padding: 15px

Block_a, .block_b (fon rəngi: #cccccc; haşiyə: 5px bərk #999999; doldurma: 20px; şrift ölçüsü: 30px; hündürlük: 150px; en: 150px; ) .block_b ( dolgu: 15px; )

Bu nümunədə 2 eyni kvadrat düzəltdik. "B" kvadratı üçün biz yalnız paddingi ləğv etdik: 15px . @extend belə işləyir. Mən bu direktivdən tez-tez istifadə edirəm.

@import

Bu direktiv sizə bir neçə üslub faylını birləşdirməyə imkan verir. Bu, xüsusilə layihə böyükdürsə, çox rahatdır. Css-də mövcud olan direktivlə qarışdırılmamalıdır @import. Css-də tələb olunan atribut --dir url().

Əslində, üslubları müxtəlif fayllarda yazmaq daha rahatdır və hər birinin öz məqsədi var. Məsələn, bütün səhifə çərçivəsini bölgələrə bölmək olar: header.sass, sidebar.sass, footer.sass. Siz sadəcə @import istifadə edərək hər şeyi əsas main.sass faylında toplaya bilərsiniz. Region faylları fayl adının əvvəlində alt xətt ilə də göstərilə bilər, məsələn: _header.sass, _sidebar.sass, _footer.sass. Belə fayllar fraqmentlər adlanır. Fraqmentləri idxal edərkən fayl uzantısını təyin etmək lazım deyil.

Sadə idxal

@import "header.sass" @import "sidebar.sass" @import "footer.sass"

Parçaları idxal edin

@import "header" @import "sidebar" @import "footer"

Fraqment faylları uzantılarla ola bilər: *.sass, *.scss və ya *.css. Məsələn, əsas faylın uzantısı ola bilər *.sass, və sayt başlığı, məsələn, genişləndirmə ilə *.scss. Yəni əsas faylın hansı uzantıya sahib olmasının əhəmiyyəti yoxdur. Qeyd etmək lazımdır ki, idxal zamanı bütün dəyişənlər və miksinlər (aşağıda onlar haqqında danışacağıq) idxalın baş verdiyi əsas fayla köçürülür.

Həmçinin, vergüllə ayrılmış bir neçə faylın idxalını təyin edə bilərsiniz: @import "başlıq", "yan panel", "altbilgi".

Nəzərə alın ki, idxal direktivi göstərdiyiniz yerdə baş verir @import. Bu adətən sənədin əvvəlində edilir.

@at-root

Direktiv @at-rootözü üçün danışır və rus dilinə tərcümə edilərsə, belə səslənəcəkdir - "kökdən". Başqa sözlə, biz ana selektorlar zəncirini ləğv edərək selektoru kökə keçirik. Burada, əlbəttə ki, sual verə bilərsiniz - "Əgər selektoru kökə əl ilə köçürə bilsəniz, bu direktiv niyə bizə lazımdır?". Cavab sadədir - strukturu pozmadan kodun yazılmasının rahatlığı. Sass ilə tam işləməyi öyrənəndə bunu başa düşəcəksən.

Əsas və başlıq şrift ölçüsü: 30px rəng: #444 @at-root .main__icon rəngi: #444 eni: 20px

Əsas başlıq ( şrift ölçüsü: 30px; rəng: #444; ) .main_icon (rəng: #444; en: 20px; )

Nəzarət direktivləri və ifadələri

@if direktiv

Bu direktiv üslubları yerinə yetirir, əgər ona əlavə edilmiş ifadə başqa bir dəyər qaytarırsa yalan Və sıfır.

$rəng: yaşıl .başlıq @if $rəng == yaşıl fon rəngi: yaşıl @else əgər $rəng == mavi fon rəngi: mavi @else fon rəngi: #f6f6f6

Başlıq (fon rəngi: yaşıl; )

Ən azı proqramlaşdırma dilinin əsaslarına (məsələn, javaScript və ya Php) bələd olanları başa düşmək çətin olmayacaq. Burada mahiyyət eynidir, əsas odur ki, kodun yazılması sintaksisini bilək.

@direktiv üçün

Proqramlaşdırma dilində (yenidən Javascript və ya Php-də). üçün dövrü təyin etmək olar. Sass-da bu direktiv eyni şeyi edir - bir döngə yaradır. Hər iterasiya (təkrar) üçün çıxış məlumatlarını dəyişən sayğac dəyişəni istifadə olunur.

Direktivin 2 yazı forması var: 1. @for $var from<начало>vasitəsilə<конец>və 2. @for $var from<начало>üçün<конец>. Son rəqəmin dövrəyə daxil edilməsini istəyirsinizsə, " istifadə edin. vasitəsilə". Bir misala baxaq:

@for $i 1-dən 6-ya qədər .elem-item-#($i) background-image: url("images/image-#($i).jpg")

element-item-1 ( fon-şəkil: url("şəkillər/şəkil-1.jpg"); ) .elem-item-2 (fon şəkli: url("şəkillər/şəkil-2.jpg"); ) . element-item-3 ( fon-şəkil: url("şəkillər/şəkil-3.jpg"); ) .elem-item-4 (arxa şəkil: url("şəkillər/şəkil-4.jpg"); ) . element-element-5 ( fon şəkli: url("şəkillər/şəkil-5.jpg"); )

Son dəyəri təyin etmək üçün mən " açar sözündən istifadə etdim. üçün". Bu ssenaridə dövr bir nömrə ilə bitir - 5 . Sass kodunun nə qədər yığcam göründüyünə diqqət yetirin.

@hər direktiv

Direktiv @hər@for kimi, o, dəyərləri döngədə göstərir və rahatdır, çünki rəqəmlərə əlavə olaraq, xüsusi dəyərləri təkrarlaya bilərsiniz. Yuxarıdakı döngəni götürək və onu bəzi dəyərlərə dəyişdirək.

@heyvanda, göldə, dənizdə, landşaftda, təbiətdə hər $bgItem .elem-item-#($bgItem) background-image: url("images/image-#($bgItem).jpg")

Element-heyvan ( background-şəkil: url("şəkillər/şəkil-heyvan.jpg"); ) .elem-element-göl (fon şəkli: url("şəkillər/image-lake.jpg"); ) . element-element-dəniz ( fon-şəkil: url("şəkillər/şəkil-dəniz.jpg"); ) .elem-element-landşaft (fon-şəkil: url("şəkillər/şəkil-mənzərə.jpg"); ) . element-element-təbiət ( fon şəkli: url("şəkillər/image-nature.jpg"); )

Bu halda heç bir sayğac dəyişəni yaradılmır və iterasiyaların sayı açar sözündən sonra yaradılan dəyərlərin sayından asılıdır " in". Dəyərlər adı ixtiyari ola bilən dəyişən (bu nümunədə $bgItem) vasitəsilə göstərilir.

Qarışıqlar (xüsusiyyətlər)

Mixins (miksinlər) proqramlaşdırma dilində olduğu kimi təkrarlanan kodlardan xilas olmaq üçün nəzərdə tutulmuş bir növ xüsusiyyətdir. Qarışıqlar Sass-da icazə verilən bütün üslub parçalarını ehtiva edə bilər. Daha aydın olmaq üçün bir misala baxaq.

@mixin align-center mövqeyi: mütləq yuxarı: 50% sol: 50% transform: tərcümə(-50%, -50%) .container @include align-center

@mixin direktivindən istifadə edərək miksin yaradılır, ardınca boşluqla ayrılmış miksin adı, həmçinin istəyə görə ötürülən parametrlər. Sadəcə qeyd edək ki, miksin adındakı defis (-) və alt xətt (_) simvolları bir-birini əvəz edə bilər. Miksin yalnız qaydaları deyil, həm də seçiciləri ehtiva edə bilər. Yuxarıda parametrləri olmayan elementar mixin nümunəsini verdim.

Miksin @include direktivi ilə çağırılır və sonra boşluqla ayrılaraq yaradılmış miksin adını qeyd edin. Yuxarıdakı misalda bu, mütləq yerləşdirmədən istifadə edərək blokun X oxunda və Y oxunda mərkəzləşdirilməsidir. Əgər bunu tez-tez istifadə etməlisinizsə, onda siz razılaşacaqsınız ki, mərkəzləşdirmə üslublarını təkrar-təkrar yazmaqdansa, sadəcə miksin adlandırmaq daha asandır.

İndi parametrləri (arqumentləri) olan miksinə baxaq.

@mixin haşiyəsi($en, $rəng) haşiyə: en: $enlik üslub: düz rəng: $rəng .kvadrat @include haşiyə(2px, #ccc)

Kvadrat ( haşiyə eni: 2px; haşiyə tərzi: bərk; haşiyə rəngi: #ccc; )

Gördüyünüz kimi, mötərizədə mixinin adından sonra arqumentləri təyin edirik, bu halda haşiyənin eni və rəngidir. Bu, aydınlıq üçün verdiyim ən sadə qarışıqdır. Praktikada müxtəlif şərtlər və dəyişənlərdən istifadə edərək daha mürəkkəb qarışıqları tapa bilərsiniz. Ancaq indi hər şeyi çətinləşdirməyək, həmişə kiçik və sadə bir şeylə başlamalıyıq, sonra yuxarı qalxdıqca yuxarı qalxmalıyıq.

Bu, Sass preprosessoru haqqında qısa icmalıma yekun vurur. Niyə kiçik? Bəli, çünki sizə dediklərimin hamısı bu deyil. Ümumiyyətlə, yuxarıda göstərilənlərdən istifadə edərək, indi Css əvəzinə Sass-dan istifadə etməyə başlaya bilərsiniz. Yuxarıda təqdim etdiyim sənədlərə istinad edərək Sass haqqında daha çox məlumat əldə edə bilərsiniz.

Yaxşı, diqqətinizə görə hamınıza təşəkkür edirəm! Həmişə olduğu kimi, şərhlərdə suallar veririk və maraqlı bir şeyi qaçırmamaq üçün ya telegram kanalına, ya da e-poçt bülleteninə (sağdakı yan paneldəki forma) abunə oluruq.

Digər postlarımda görüşənədək...

21-02-2013-cü il üçün "SASS yalnız dizaynerlər üçün deyil" məqaləsi "" olaraq dəyişdirildi. SASS Sintaksisi" və yeniləndi (2014-02-17)

Sass preprosessor dilidir; preprosessorlar prosessor dilində (SASS) yazdığımız CSS kodunu təmiz CSS koduna yığır.

SASS sənədləri daha çox proqramçı yönümlüdür, ona görə də dizaynerlər həmişə SASS ilə işə başlamaq istəmirlər. Bundan əlavə, dizaynerlər baxımından SASS-dən istifadənin faydaları həmişə aydın göstərilmir.

Bu yazıda bir neçə sadə prinsipi əhatə etmək istəyirəm. Mən SASS mütəxəssisi deyiləm, amma deməliyəm ki, sassdan istifadə ağıllı bir qərardır.

Bəs bu faydalar nədir? Siz kodunuzu məntiqi şəkildə strukturlaşdıra biləcəksiniz, bununla da kodun yazılması prosesini sürətləndirəcəksiniz; təkrarların sayı əhəmiyyətli dərəcədə azalacaq (dəyişənlər bu işdə bizə kömək edəcək), kodu saxlamaq daha asan olacaq. SASS dili proqramçı və ya dizayner olmağınızdan asılı olmayaraq, layihə üzərində işləməyi asanlaşdırır. Həqiqətən də belədir.

Dəyişənlər

SASS adı ilə dəyişən dollar işarəsi ($) ilə başlayır. Dəyişən dəyərlər CSS mülkiyyət qiymətləri ilə eynidir.

Əsaslardan, yəni dəyişənlərdən başlayaq. Aşağıdakı nümunə əsasında dəyişənləri nəzərdən keçirin. Biz sənəddə çoxlu rənglərdən istifadə etməyə meyl edirik. Nəticədə, hex və ya rgb formatında rəng dəyərlərini təkrar-təkrar yazmalısınız. Hər hansı bir rəngi dəyişdirmək istəsək, bütün sənədi avtomatik əvəz etməli olacağıq. Eyni zamanda, lazımsız bir dəyəri tutmayacağımıza əmin ola bilmərik.

A (rəng: #822733;) .xülasə (rəng: #822733;) .müəllif hüququ (rəng: #822733;)

Məsələn, istədiyiniz seçicilər üçün tünd qırmızını təyin edən bir neçə qaydanız ola bilər. SASS dili bizə aşağıdakıları etməyə imkan verir: sənədin əvvəlində biz $brand-colour adlı dəyişəni təyin edə bilərik və sonra sənəddə dəyərin yerinə dəyişənin adını qoya bilərik. Sonra, əgər rəngi dəyişdirməli olsaq, bizə lazım olan yalnız $brand-colour dəyişəninin dəyərini dəyişdirməkdir və bu, $brand-colour dəyişənindən istifadə edən bütün qaydaların rəngini dəyişəcək.

// Mənim SASS rəng kitabxanam $brand-colour: #822733; a (rəng: $brand-color;) .xülasə (rəng: $brand-color;) .müəllif hüququ (rəng: $brand-color;)

Dəyişənlər üçün rəqəmsal dəyərlər

Dəyişənlər yalnız sətirləri deyil, həm də manipulyasiya edə biləcəyiniz nömrələri ehtiva edə bilər. Əgər xüsusi dəyərlərə əsaslanan torlardan və ya tərtibat miqyasından istifadə edirsinizsə, o zaman çox güman ki, üslub cədvəlinizdə bu dəyərlərdən istifadə edirsiniz. Məsələn, əgər siz daim 10px dəyərindən istifadə edirsinizsə, onda siz $unit = 10px kimi dəyişən təyin edə bilərsiniz. Bu dəyişən kodunuzda bir neçə dəfə istifadə edilə bilər. Dəyişən adının əvəzinə, həmişə olduğu kimi, dəyər (10px) əvəz olunacaq.

Bəs dəyişənin dəyərini ikiqat artırmaq lazımdırsa? Məsələn, elementin alt kənarını ikiqat artırmaq istəyirsiniz. SASS istifadə edərək, bəzi sadə riyaziyyat əlavə edə bilərsiniz (+ , - , * , / , %), məsələn, bizim vəziyyətimizdə:

$vahid = 10px; h1, h2, h3 (margin-alt: $vahid;) p ( kənar-alt: $vahid;) kənara (margin-alt: $vahid*2; /* 20px */) altbilgi( kənar-yuxarı: $vahid* 4; /* 40px */)

çirkləri

qarışıq koddakı bəyannamələrin təkrar bloku ilə müqayisə oluna bilər. Bu, sənədin istənilən yerində istifadə edə biləcəyiniz kod parçasıdır. Siz nəinki lazımsız təkrarı aradan qaldıracaqsınız, həm də kodunuzu daha təmiz edəcəksiniz, çünki fərqli elementlər üçün eyni sinifdən istifadə etmək ehtiyacından xilas olacaqsınız.

Məsələn, saytınızda olduqca tez-tez istifadə etdiyiniz bir separator var. Məsələn, siz ondan əsas blokları (məsələn, məqalələr və başlıqlar) və ya hətta abzasları qırmaq üçün istifadə edə bilərsiniz. Ayırıcının alt örtüyü, alt kənarı, haşiyəsi və kölgəsi var.

Ayırıcı yaratmaq üçün elementə .shadow-border sinfini əlavə edə bilərsiniz. Ancaq bu, html və css faylınızı əhəmiyyətli dərəcədə çirkləndirəcək.

Kölgə sərhədi (haşiyə-alt: 1px bərk #a4a4a4; -webkit-box-kölgə: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); qutu-kölgə: 0px 2px 5px 0px rgba(200, 2000) , 0.6); dolgu-alt: 20px; kənar-alt: 40px; )

Əgər css faylınızda düzgün struktur və təmiz html işarələnməsi istəyirsinizsə, yuxarıdakı qaydanı müvafiq html elementlərinə əlavə etməlisiniz. Qeyd etmək lazımdır ki, ayırıcısı olan bir çox element varsa, bu, üslub faylını əhəmiyyətli dərəcədə "korlayacaq" və bu, üslub faylının saxlanmasını çətinləşdirəcək.

Başlıq, məqalə, p.intro (haşiyə-alt: 1px bərk #a4a4a4; -webkit-box-kölgə: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); qutu-kölgə: 0px 2px 5px 0px rgba(200) , 200, 200, 0.6); dolgu-alt: 20px; kənar-alt: 40px; )

İstifadə @mixin, siz reklam bloku üçün ad təyin edə bilərsiniz. Bu ad heç bir şəkildə HTML ilə əlaqəli olmamalıdır.

@mixin shadow-border ( haşiyə-alt: 1px bərk #a4a4a4; -webkit-box-kölgə: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); qutu-kölgə: 0px 2px 5px 0px rgba2(200,200,) , 200, 0.6); dolgu-alt: 20px; kənar-alt: 40px;)

Sonra miksini elementə daxil etmək üçün sadəcə miksinin adını daxil etməlisiniz: @include shadow-border;

@mixin shadow-border ( haşiyə-alt: 1px bərk #a4a4a4; -webkit-box-kölgə: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); qutu-kölgə: 0px 2px 5px 0px rgba2(200,200,) , 200, 0.6); padding-alt: 20px; kənar-alt: 40px;) məqalə ( @kölgə sərhədini daxil edin;) başlıq ( @kölgə sərhədini daxil edin;) p.intro ( @kölgə sərhədini daxil edin;)

Yaxşı görünür.

Çirklər üçün parametrlər

Miksinlər üçün parametrlər miksin adından sonra mötərizədə verilmişdir; mixin məzmunu buruq mötərizələrə yerləşdirilir.

@mixin border-radius($radius: 1px) ( -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; ) /* USE */ .example-class( fon rəngi: #900; @include border-radius(20px); )

Çirkləri daxil etmək

Bəzən bir murdarlığı digərinə yuva edə bilmək çox rahatdır. Məsələn, artıq mövcud olan miksəyə miksin əlavə etməliyik:

$sərhəd rəngi: #a4a4a4; $vahid: 10px; @mixin incə kölgə ( -webkit-box-kölgə: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); qutu-kölgə: 0px 2px 5px 0px rgba(200, 200, 200, @mixin)); kölgə-sərhəd ( @include incə kölgə; haşiyə-alt: $vahid/10 bərk $border-color; dolgu-alt: $vahid*2; kənar-alt: $vahid*4;) məqalə ( @kölgə sərhədi daxildir ;) başlıq ( @kölgə sərhədini daxil edin;) p.intro ( @kölgə sərhədini daxil edin;)

Qoşmalar

Qarışıqlar CSS seçicilərinə (və ya daha dəqiq desək, sass faylındakı bəyan bloklarına) yerləşdirə biləcəyiniz yeganə şey deyil. SASS-də edə bilərsiniz bir-birinin içərisində yuva elementləri. Bu, dublikat seçiciləri aradan qaldıracaq və kodun oxunmasını asanlaşdıracaq.

/* düz CSS */ .modul h3 ( şrift çəkisi: qalın;) .modul p ( altlıq doldurma: 10px;)

/* SASS-da yazmaq */ .modul ( h3( şrift-ağırlıq: qalın;) p ( padding-alt: 10px;) )

Qoşmalar və @media sorğuları

Media sorğuları ilə işləyərkən əlavələr son dərəcə faydalı olur. Adətən, siz media sorğuları ilə işləyərkən müxtəlif ekran qətnamələri üçün əlavə üslublar yaratmalı, bəzən hətta ayrıca üslub faylı yaratmalısınız.

/* baxış pəncərəsi - istənilən, o cümlədən @media-nı dəstəkləməyən brauzerlər */ məqalə ( şrift ölçüsü: 14px; xətt hündürlüyü: 25px;) məqalə h2 ( şrift ölçüsü: 18px; altlıq doldurma: 15px;) /* 300px və daha geniş görünüş portları üçün (əvvəlcə mobil) */ @media yalnız ekran və (min-en: 300px) ( məqalə (xətt hündürlüyü: 20px; en: 90%;) məqalə h2 ( dolgu-alt: 10px;) ) / * 600px və daha geniş görünüş portları üçün */ @media yalnız ekran və (min-en: 600px) ( məqalə (xətt hündürlüyü: 25px; en: 80%;) məqalə h2 ( dolgu-alt: 15px;) ) /* 900px üçün baxış pəncərələri və daha geniş */ @media yalnız ekran və (min-en: 900px) ( məqalə (en: 60%;) ) /* 1200px və daha geniş görünüşlər üçün */ @media yalnız ekran və (min-en: 1200px ) ( məqalə ( şrift ölçüsü: 16px; sətir hündürlüyü: 30px; en: 50%;) məqalə h2 ( şrift ölçüsü: 21px; sətir hündürlüyü: 35px; altlıq doldurma: 20px;) )

SASS, əksinə, bütün media sorğularını birbaşa elementlərin içərisində yerləşdirməyə imkan verir. Bu, cavab verən tərtibata təsir edən üslubları tapmağı və redaktə etməyi asanlaşdıracaq.

Məqalə ( şrift ölçüsü: 14px; sətir hündürlüyü: 25px; h2 ( şrift ölçüsü: 18px; doldurma-alt: 15px; ) yalnız @media ekranı və (min-en: 300px) ( sətir hündürlüyü: 20px; eni: 90%; h2 (doldurma-alt: 10px; ) ) @yalnız media ekranı və (min-en: 600px) (xətt hündürlüyü: 25px; en: 80%; h2 (doldurma-alt: 15px;) ) yalnız @media ekran və (min-en: 900px) ( en: 60%; ) @media yalnız ekran və (min-en: 1200px) ( şrift ölçüsü: 16px; sətir hündürlüyü: 30px; en: 50%; h2 ( şrift- ölçüsü: 21px; sətir hündürlüyü: 35px; doldurma-alt: 20px; ) ) )

SASS-da idxal, @import operatoru

@import bəyanatı
üçüncü tərəfin CSS(SCSS) faylının məzmununu cari CSS(SCSS) faylına daxil etməyə imkan verir.
@importun @charset və ya başqa @importdan başqa hər hansı bəyannamədən sonra daxil edilməsinə icazə verilmir.

Məzmunu daxil etmək üçün, məsələn, _style_two.scss , belə yazmalısınız:

@import "style_two.scss"; /* alt xətt olmadan qoşulun */

Əhəmiyyətli: müəyyən bir faylı deyil, qovluğu birləşdirsəniz, css faylları ilə başlayan fayllar üçün yaradılmayacaq. _ .
Məsələn, style.scss faylının olması style.css-nin yaradılması ilə nəticələnəcək, lakin _some.scss faylına malik olmaq mümkün olmayacaq. Beləliklə, alt xətt faylın müstəqil stil cədvəli olmadığını və yalnız başqa stil cədvəlinə idxal edilə biləcəyini bildirir.

SASS-də dövrələr

Döngə ifadəsi üçün sintaksis (hər biri) aşağıdakı kimidir: $var in . $var dəyişən adıdır və $var dəyərini qeyd edin.
$var dəyəri ilə əvəz olunur , sonra dövrün məzmunu stil faylında göstərilir (dəyərlərin sayına görə ).
Misal üçün:

SCSS

@hər $heyvan pumada, dəniz ilbizində, balıqqulağıda, salamandrda ( .#($animal)-ikonu ( fon şəkli: url("/images/#($animal).png"); ) )

Tərtib olunub:

css

.puma-icon ( fon şəkli: url("/şəkillər/puma.png"); ) .sea-slug-icon (fon şəkli: url("/images/sea-slug.png"); ) .egret -icon ( fon şəkli: url("/şəkillər/egret.png"); ) .salamander-icon (fon şəkli: url("/şəkillər/salamander.png"); )

@uzatma operatoru

Tez-tez elə bir vəziyyət yaranır ki, bir sinif öz üslublarına əlavə olaraq digər sinfin bütün üslublarına malik olmalıdır. Ən ümumi həll iki sinifdən istifadə etməkdir; birincisi ümumi üslubları, ikincisi xüsusi olanları ehtiva edir.

@extend ifadəsi bir seçiciyə üslubları digər seçicidən miras almağa icazə verməklə bu problemlərin qarşısını alır. Misal üçün:

SCSS

.xəta ( haşiyə: 1px #f00; fon rəngi: #fdd; ) .error.intrusion ( fon şəkli: url("/image/hacked.png"); ) .seriousError ( @extend .error; haşiyə eni :3px;)

Tərtib olunub:

css

.xəta, .seriousError ( haşiyə: 1px #f00; fon rəngi: #fdd; ) .error.intrusion, .seriousError.intrusion (fon şəkli: url("/image/hacked.png"); ) .ciddiError ( haşiyə eni: 3px; )

Artıq SASS (SCSS) haqqında çoxlu məqalələr var, Habrahabr haqqında daha az, lakin mənim fikrimcə, real təcrübənin olacağı kifayət qədər məqalə yoxdur. Bu boşluğu doldurmağa çalışacağam. Təxminən bir il bundan əvvəl SASS məqalələrindən biri məni “bağladı” və o vaxtdan bu texnologiyaya o qədər aşiq oldum ki, adi CSS kodunu əl ilə yazmaq mənə vaxt itkisi kimi görünür. Bu məqalə SCSS haqqında hələ eşitməmiş və ya hələ sınaqdan keçirməmiş tərtibatçılara (və ya veb proqramçılara) həsr edilmişdir. Daha təcrübəli yoldaşlar, inanıram ki, burada tutmaq üçün heç bir şey yoxdur.

SCSS nədir

SCSS SASS dilinin "ləhcəsidir". SASS nədir? SASS HAML-ə bənzər bir dildir (çox qısa şablonlaşdırma mühərriki), lakin CSS kodunun yaradılmasını sadələşdirmək üçün nəzərdə tutulmuşdur. Sadəcə olaraq, SASS kodu xüsusi ruby ​​proqramı ilə adi CSS koduna çevrilən bir dildir. Bu dilin sintaksisi çox çevikdir, CSS-də çox arzu olunan bir çox xırda şeyləri nəzərə alır. Üstəlik, hətta məntiq (@if, hər biri), riyaziyyat (hər iki rəqəm, sətir və rəng əlavə edə bilərsiniz) var. Bəlkə də bəzi SCSS xüsusiyyətləri sizə lazımsız görünəcək, amma mənim fikrimcə, onlar artıq olmayacaq, "ehtiyatda" qalacaqlar.

SCSS ilə SASS arasındakı fərq ondan ibarətdir ki, SCSS daha çox adi CSS koduna bənzəyir. SASS kodu nümunəsi:

$blue: #3bbfce $margin: 16px .content-navigation haşiyə rəngi: $mavi rəng: qaralmaq($mavi, 9%) .sərhəd doldurma: $margin / 2 haşiyə: $margin / 2 haşiyə rəngi: $mavi
SCSS üçün də eyni:

$mavi: #3bbfce; $margin: 16px; .content-navigation ( haşiyə rəngi: $mavi; rəng: qaralmaq($mavi, 9%); ) .border ( dolgu: $margin / 2; kənar: $margin / 2; haşiyə rəngi: $mavi; )
Mən SCSS-ni seçdim, çünki onunla hələ tanış olmayan həmkarlar üçün başa düşmək daha asandır. Həm də qeyd etmək lazımdır ki, adi CSS kodu SCSS sintaksisinə mükəmməl uyğun gəlir.

Quraşdırma və istifadə

Əvvəlcə ruby ​​quraşdırmalısınız. Sonra sass-gem quraşdırmalısınız (gem install sass konsolda). Hər şey qaydasındadırsa, sass konsol proqramı indi sizin üçün əlçatandır. Onun istifadəsinin bütün nüansları haqqında burada oxuya bilərsiniz - sass --help . Mən yalnız iki əsas xüsusiyyəti əhatə edəcəyəm:

--baxmaq

Sass-ı --watch düyməsi ilə işlədirsinizsə, proqram sizin qeyd etdiyiniz faylları izləyəcək. Dəyişsələr, o, bütün lazımi css fayllarını avtomatik olaraq yenidən quracaq (heç də deyil, yalnız dəyişdirilənlərlə əlaqəli olanlar).

Tutaq ki, sizdə aşağıdakı layihə strukturu var:

css ---- scss ------ style.scss ---- style.css
Sass bütün dəyişiklikləri css/scss/*-də izləməli və nəticəni css/*.css-də saxlamalıdır. Bu halda biz sass-ı belə işlədirik - sass --watch css/scss:css/. . Bunlar. sass - baxın [nə]: [harada] .

--yeniləmə

Əgər css fayllarını bir dəfə yeniləməlisinizsə, --watch əvəzinə --update istifadə edin. Nəzarət, eləcə də yeniləmələrə ehtiyac olub-olmadığını yoxlamaq olmayacaq.

Qeyd etmək lazımdır ki, Less-dən fərqli olaraq, SASS kodunu birbaşa brauzerdə tərtib edə bilməz. Mənim fikrimcə, bu yanaşma (server və ya PC layout dizaynerində tərtib) yeganə düzgündür.

Təcrübə edin

Beləliklə, ən vacib şeyə gəldik. @import ilə başlayaq.

@import

Əvvəlcə SCSS istifadə etməzdən əvvəl növbətçi işləməli olduğum mühərrikin bütün CSS kodu 1 nəhəng style.css faylında idi. Mənim IDE (Netbeans (yeri gəlmişkən, burada sintaksisi vurğulamaq üçün bir plagin var)) onunla əhəmiyyətli əyləclərlə işlədi. Heç kim onu ​​bir çox kiçik fayllara bölmək istəmədi və lazım gələrsə, onları 1-ə yapışdırdı. SCSS bu problemi avtomatik həll edir.

1 nüansı qeyd etməyə dəyər. Əgər siz sass-ı xüsusi mənbə faylı deyil, qovluğu qidalandırırsınızsa, o zaman _ ilə başlayan fayllar üçün css faylları yaradılmayacaq. Bunlar. style.scss faylına malik olmaq style.css yaradacaq, lakin _some.scss faylına malik olmaq olmayacaq.

Beləliklə, _template.scss və ya template.scss faylının məzmununu daxil etmək üçün yazırıq.

@import "şablon"; // şablonlar
Nəhayət, 1 böyük style.css faylının əvəzinə yüzdən çox kiçik scss faylı əldə etdim. İlk baxışdan belə bir məbləğin çox böyük olduğu və dəhşətli əzablara səbəb olacağı görünə bilər. Bununla belə, rahat qovluq strukturuna əsaslanaraq lazım olan faylı dərhal tapıram. Bundan əlavə, mən hesab edirəm ki, keşləmə sayəsində belə bir "sxem" daha performanslıdır.

@ yuvalama

CSS-də ən çox arzulanan xüsusiyyətlərdən biri selektor yuvasıdır. Misal:

#bəzi ( haşiyə: 1px bərk qırmızı; .bəzi ( fon: ağ; ) ) /* => */ #bəzi ( haşiyə: 1px bərk qırmızı; ) #bəzi .bəzi ( fon: ağ; )
Başqa bir misal:

Daxiletmə ( haşiyə: 1px bərk boz; fon: ağ; & ( rəng: qara; ) &.bəzi_sinif ( ekran: heç biri; ) ) /* => */ giriş ( haşiyə: 1px bərk boz; fon: ağ; ) giriş ( rəng: qara; ) giriş.bəzi_sinif (ekran: heç biri; )
& simvolu əsas seçiciyə bərabərdir. tag edək Brauzer olaraq Internet Explorer 7 varsa, bizdə ie_7 sinfi var. Aşağıdakı kod bütün "hack"lərdən və xüsusi şərhlərdən qurtulmağa imkan verir:

$IE_7: "body.ie_7"; //... .bəzi ( displey: inline-block; #($IE_7) & ( zoom: 1; display: inline; ) ) /* => */ .bəzi ( display: inline-block; ) body.ie_7 .bəzi ( zoom: 1; ekran: inline; )

$dəyişənlər

Dəyişənlər lazımlı bir şeydir. Onlar belə müəyyən edilir:

$ bəziləri: qırmızı;
Dəyişənlər sabit deyil, onlar yol boyu dəyişdirilə bilər :) İlk düşüncələrimdən biri bütün əsas rəngləri, şrift ölçülərini və s. ehtiva edən _const.scss faylı ilə nəticələndi.

$link: #15157d; $link_bottom: $link; $input_font_size: 13px; $content_bg: #F1F1F1; $input_color: #4E4D4D; $input_color_placeholder: #959595; $text_color: qara ...
Saytdakı keçidlərin rəngi $link olaraq qəbul edilir.

A (rəng: $link; ) span.link (rəng: $link; mətn dekorasiyası: altını xətt; )
Əgər sonradan bağlantıların rənginin dəyişdiyi üzə çıxarsa, 1 dəyişəni dəyişdirmək kifayətdir (CSS vəziyyətində, fayllar arasında avtomatik dəyişdirmə, bəlkə də seçmə yolu ilə keçmək lazım olacaq). Tutaq ki, birdən bəzi kontaktlar modulunda keçidlərin rənginin fərqli olduğu üzə çıxır. Ən azı iki həll yolu var.

$contacts_link: narıncı; // $link əvəzinə $contacts_link istifadə edərək modul kodu
İkinci

$__link: $link; $link:narıncı; // modul kodu $link: $__link;
Dəyişənlərimiz yazılmır, ona görə də onlar eyni müvəffəqiyyətlə sətirləri, rəqəmləri və rəngləri ehtiva edə bilər.

@riyaziyyat

Riyaziyyatı 2 kateqoriyaya ayıraq - rənglər və rəqəmlər. Nömrələrdən başlayaq. Sadə misal:

Blok ( $block_width: 500px; padding: 5px; haşiyə: 1px bərk qara; en: $block_width - (5px * 2) - (1px * 2); )
İstəyirsinizsə, siz dəyişənlərə haşiyə ilə doldurma da təyin edə bilərsiniz. Hamısı layoutun mürəkkəbliyindən asılıdır.

Başqa bir misal:

Blok ( $count: 10; $margin_left: 5px; $all_width: 1000px; width: $all_width; .sub_element ( width: ($all_width / $count) - $margin_left; margin: 0 0 0 $margin_left; ) )
Qeyd etmək istəyirəm ki, bu cür manipulyasiya çox tez-tez istifadə olunur. Onlarsız mən ayaqsız kimiyəm.

Və indi rənglər. Rəngləri əlavə etmək, çoxaltmaq olar:

Bəziləri ( $rəng: #010203; rəng: $rəng; haşiyə-rəng: $rəng - #010101; &:hover ( rəng: #010203 * 2; ) ) /* => */ .bəzi ( rəng: #010203; haşiyə rəngi: #000102; ) .bəzi:hover ( rəng: #020406; )
Rəngləri seçmək üçün çox tənbəl olduqda olduqca əlverişli bir şey. Qeyri-şəffaflaşdırmaq və şəffaflaşdırmaq kimi funksiyalar da mövcuddur (daha çox