Articles

różnica między .sass i .scss

by admin

Kiedy po raz pierwszy zacząłem podążać ścieżką preprocesorów CSS, byłem przytłoczony różnymi opcjami (sass, less, stylus), różnicami w składni, a przede wszystkim nie miałem pojęcia, jak powinienem zacząć z tym nowym podejściem do pisania CSS.

Jeśli jesteś częstym użytkownikiem CodePen.io zauważysz, że istnieje kilka opcji, jeśli chodzi o smak CSS, które możesz wybrać.

  • SASS z kompasem
  • SCSS z kompasem
  • mniej
  • zwykły ol ’ CSS

nie daj się pomylić opcjom SASS i SCSS, chociaż początkowo byłem .scss jest Sassy CSS i jest następną generacją .sass. Wyjaśnienie ze strony internetowej

Sass ma dwie składnie. Najczęściej używana składnia jest znana jako” SCSS „(dla” Sassy CSS”) i jest superset składni CSS3. Oznacza to, że każdy poprawny arkusz stylów CSS3 jest również poprawny SCSS. Pliki SCSS używają rozszerzenia .scss.

druga, starsza składnia jest znana jako składnia wcięta (lub po prostu „.sass”). Zainspirowany zwięzłością Hamla, jest przeznaczony dla osób, które wolą zwięzłość niż podobieństwo do CSS. Zamiast nawiasów i średników, używa wcięcia linii do określania bloków. Pliki w składni wciętej używają rozszerzenia .sass.

Wyjaśnienie SASS vs SCSS na sass-lang.com website

Jeśli to nie miało sensu, możesz zobaczyć różnicę w kodzie poniżej.

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

w powyższym kodzie używamy; do oddzielenia deklaracji. Dodałem nawet wszystkie deklaracje dla .border do jednej linii, aby zilustrować ten punkt dalej.

w przeciwieństwie do tego, poniższy kod SASS musi być w różnych wierszach z wcięciem i nie ma użycia;.

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

możesz zobaczyć z CSS poniżej, że styl SCSS jest o wiele bardziej podobny do zwykłego CSS niż starsze podejście SASS.

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

myślę, że większość czasu w dzisiejszych czasach, gdy ktoś wspomina, że pracuje z Sass, odnosi się do authoringu .scss zamiast tradycyjnego .sass way.

Możesz również sprawdzić kilka pomocnych @mixins, które pomogą Ci w responsywnej kompilacji.