Articles

diferența dintre .sass și .scss

by admin

când am început pe calea PREPROCESOARELOR CSS, am fost copleșit de diferitele opțiuni (sass, less, stylus), de diferențele de sintaxă și, mai ales, nu aveam idee cum ar trebui să încep cu această nouă abordare a scrierii CSS.

dacă sunteți un utilizator frecvent de CodePen.io veți observa că există câteva opțiuni atunci când vine vorba de aroma CSS pe care o puteți alege.

  • SASS cu busolă
  • SCSS cu busolă
  • mai puțin
  • Regular ol ‘ CSS

nu vă confundați cu opțiunile Sass și SCSS, deși am fost inițial, .scss este Sassy CSS și este următoarea generație de .sass. O explicație de pe site-ul

Sass are două sintaxe. Sintaxa cea mai frecvent utilizată este cunoscută sub numele de „SCSS” (pentru „sassy CSS”) și este un superset al sintaxei CSS3. Aceasta înseamnă că fiecare foaie de stil CSS3 validă este valabilă și SCSS. Fișierele SCSS utilizează extensia .scss.

a doua sintaxă mai veche este cunoscută sub numele de sintaxa indentată (sau doar „.sass”). Inspirat de concizia lui Haml, este destinat persoanelor care preferă concisitatea față de similitudinea cu CSS. În loc de paranteze și punct și virgulă, folosește indentarea liniilor pentru a specifica blocurile. Fișierele din sintaxa indentată utilizează extensia .sass.

explicația SASS vs SCSS pe sass-lang.com website

dacă acest lucru nu are sens, puteți vedea diferența de cod de mai jos.

/* SCSS */$blue: #3bbfce;$margin: 16px;.content-navigation { border-color: $blue; color: darken($blue, 9%);}.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}

în codul de mai sus folosim ; pentru a separa declarațiile. Am adăugat chiar toate declarațiile pentru .border pe o singură linie pentru a ilustra acest punct în continuare.

în schimb, codul SASS de mai jos trebuie să fie pe linii diferite cu indentare și nu există nici o utilizare a ;.

/* SASS */$blue: #3bbfce$margin: 16px.content-navigation border-color: $blue color: darken($blue, 9%).border padding: $margin / 2 margin: $margin / 2 border-color: $blue

puteți vedea din CSS de mai jos că stilul SCSS este mult mai similar cu CSS obișnuit decât abordarea Sass mai veche.

/* CSS */.content-navigation { border-color: #3bbfce; color: #2b9eab;}.border { padding: 8px; margin: 8px; border-color: #3bbfce;}

cred că de cele mai multe ori în aceste zile, dacă cineva menționează că lucrează cu Sass, se referă la creație .scss, mai degrabă decât tradiționale .sass way.

s-ar putea dori, de asemenea, pentru a verifica unele @mixins utile care vă va ajuta cu construi receptiv.