Jaka jest różnica między SCSS a Sass?

Jestem jednym z programistów, którzy pomogli stworzyć Sass.

Różnica polega na UI. Pod powierzchnią tekstualną są identyczne. Dlatego pliki Sass i scss mogą importować się nawzajem. W rzeczywistości Sass ma cztery parsery składni: scss, sass, CSS i mniej. Wszystkie z nich konwertują inną składnię na abstrakcyjne drzewo składni , które jest następnie przetwarzane na wyjście CSS lub nawet na jeden z innych formatów za pomocą narzędzia Sass-convert.

Użyj składni, którą lubisz najbardziej, oba są w pełni obsługiwane i można zmienić między nimi później, jeśli zmienisz zdanie.

Plik Sass .sass wizualnie różni się od pliku .scss, np.

Przykład.sass-sass jest starszą składnią

$color: red

=my-border($color)
  border: 1px solid $color

body
  background: $color
  +my-border(green)

Przykład.scss-sassy css jest nową składnią od Sass 3

$color: red;

@mixin my-border($color) {
  border: 1px solid $color;
}

body {
  background: $color;
  @include my-border(green);
}

Każdy ważny dokument CSS może zostać przekonwertowany na Sassy CSS (SCSS) po prostu zmieniając rozszerzenie z .css na .scss.

Sass (składniowo niesamowite arkusze stylów ) mają dwie składnie:

• a newer: SCSS (Sassy CSS )
• oraz starszą, oryginalną składnię indent, która jest oryginalną Sass i jest również nazywana Sass .

Więc oba są częścią preprocesora Sass z dwoma różnymi możliwymi składniami.

Najważniejsza różnica między SCSS a oryginałem Sass :

SCSS:

• Składnia jest podobna do CSS (tak bardzo, że każda regularna poprawna CSS3 jest również poprawna SCSS, ale relacja w przeciwnym kierunku oczywiście nie zachodzi)

• Używa aparatów ortodontycznych {}

• używa półkolonów ;
• Znak przypisania to :
• aby utworzyć mixin używa dyrektywy @mixin
• aby użyć mixin poprzedza ją dyrektywą @include
• pliki mają .rozszerzenie scss.

Original Sass:

• składnia jest podobna do Ruby
• brak szelek
• brak ścisłego wcięcia
• brak półkolonów
• Znak przypisania to = zamiast :
• aby utworzyć mixin używa znaku =
• aby użyć mixin poprzedza go + znak
• pliki mają .rozszerzenie sass.

Niektórzy wolą Sass, oryginalną składnię - podczas gdy inni wolą SCSS . Tak czy inaczej, ale warto zauważyć, że składnia Sass nie została I nigdy nie będzie przestarzała .

Konwersje za pomocą sass-convert:

# Convert Sass to SCSS
$ sass-convert style.sass style.scss

# Convert SCSS to Sass
$ sass-convert style.scss style.sass

Dokumentacja Sass i SCSS

Jego składnia jest inna, i to jest główny pro (lub con, w zależności od twojej perspektywy).

Postaram się nie powtarzać wiele z tego, co inni mówili, można łatwo google, ale zamiast tego, chciałbym powiedzieć kilka rzeczy z mojego doświadczenia przy użyciu obu, czasami nawet w tym samym projekcie.

SASS pro

• cleaner - jeśli pochodzisz z Pythona, Ruby (możesz nawet pisać rekwizyty ze składnią podobną do symbolu) lub nawet ze świata CoffeeScript, to będzie to bardzo naturalne-pisanie mixinów, funkcji i ogólnie wszelkich rzeczy wielokrotnego użytku w .sass jest o wiele "łatwiejsze" i czytelne niż w .scss (subiektywnie).

SASS cons

• whitespace sensitive( subiektywny), nie przeszkadza mi to w innych językach, ale tutaj w CSS po prostu mi przeszkadza(kwestie: kopiowanie, tab vs space war, itp).
• brak zasad inline (to było łamanie gry dla mnie), nie można zrobić body color: red Jak można w .scss body {color: red}
• importowanie innych sprzedawca rzeczy, kopiowanie fragmentów CSS-nie niemożliwe, ale bardzo nudne po jakimś czasie. Rozwiązaniem jest albo posiadanie plików .scss (wraz z plikami .sass) w projekcie lub przekonwertowanie ich na .sass.

Poza tym-wykonują tę samą pracę.

Teraz lubię pisać mixiny i zmienne w {[1] } i kod, który faktycznie skompiluje się do CSS w .scss, jeśli to możliwe (czyli Visual studio nie ma wsparcia dla .sass, ale zawsze gdy pracuję nad projektami Rails Zwykle łączę dwa z nich, nie w jednym pliku ofc).

Ostatnio rozważam danie Stylus szansy (dla pełnoetatowego preprocesora CSS) , ponieważ pozwala on połączyć dwie składnie w jednym pliku (wśród niektórych innych funkcji). Może to nie jest dobry kierunek dla zespołu, ale kiedy utrzymujesz go sam - jest w porządku. Rysik jest w rzeczywistości najbardziej elastyczny, gdy chodzi o składnię.

I ostatecznie mixin dla .scss vs .sass porównanie składni:

// SCSS
@mixin cover {
  $color: red;
  @for $i from 1 through 5 {
    &.bg-cover#{$i} { background-color: adjust-hue($color, 15deg * $i) }
  }
}
.wrapper { @include cover }


// SASS
=cover
  $color: red
  @for $i from 1 through 5
    &.bg-cover#{$i}
      background-color: adjust-hue($color, 15deg * $i)
.wrapper
  +cover

Ze strony głównej języka

Sass ma dwie składnie. Nowy Główny składnia (od Sass 3) jest znana jako "SCSS "(dla"Sassy CSS") , i jest superset składni CSS3. Oznacza to że każdy ważny arkusz stylów CSS3 jest ważny również SCSS. Pliki SCSS wykorzystują przedłużenie .scss.

Druga, starsza składnia znana jest jako składnia wcięta (lub po prostu "Sass"). Zainspirowany terseness Hamla, to przeznaczony dla osób, które preferuj zwięzłość względem podobieństwa do CSS. Zamiast nawiasów i średników, to wykorzystuje wcięcia linii do określ bloki. Chociaż już nie składnia podstawowa, składnia wcięta będzie nadal wspierany. Pliki w wciętej składni użyj przedłużenie .sass.

SASS jest zinterpretowanym językiem, który wypluwa CSS. Struktura Sass wygląda jak CSS (zdalnie), ale wydaje mi się, że opis jest nieco mylący; jest to Nie zamiennik CSS, ani rozszerzenie. Jest to interpreter, który wypluwa CSS w końcu, więc Sass nadal ma ograniczenia zwykłego CSS, ale maskuje je prostym kodem.

Sass oznacza składniowo niesamowite arkusze stylów. Jest to rozszerzenie CSS, który dodaje mocy i elegancji do języka podstawowego. SASS jest nowo nazwany jako SCSS z kilkoma chagami, ale stary SASS jest również tam. Przed użyciem SCSS lub SASS należy zapoznać się z poniższą różnicą.

SCSS

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

//Mixins
@mixin transform($property) {
  -webkit-transform: $property;
      -ms-transform: $property;
          transform: $property;
}

.box { @include transform(rotate(30deg)); }

SASS

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

//Mixins
=transform($property)
  -webkit-transform: $property
  -ms-transform:     $property
  transform:         $property

.box
  +transform(rotate(30deg))

Wyjście CSS po Kompilacja (to samo dla obu)

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}
//Mixins
.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

Więcej informacji można znaleźć na oficjalnej stronie .

Podstawową różnicą jest składnia. Podczas gdy SASS ma luźną składnię ze spacjami i bez średników, SCSS przypomina bardziej CSS.

Sass był pierwszym, a składnia jest nieco inna. Na przykład, w tym mixin:

Sass: +mixinname()
Scss: @include mixinname()

Sass ignoruje nawiasy klamrowe i średniki i kładzie się na zagnieżdżeniu, co uważam za bardziej przydatne.

Różnica między SASS i SCSS artykuł wyjaśnia różnicę w szczegółach. Nie mylić z opcjami SASS i SCSS, chociaż początkowo też byłem, .scss jest Sassy CSS i jest kolejną generacją .sass.

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 .obramowanie na pojedynczą linię, aby zilustrować ten punkt dalej. In contrast, poniższy kod SASS musi być w różnych wierszach z wcięciami i nie ma zastosowania ;.

/* SASS */
$blue: #3bbfce
$margin: 16px

.content-navigation
  border-color: $blue
  color: darken($blue, 9%)

.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $blue

Z poniższego CSS widać, ż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, jeśli ktoś wspomina, że pracuje z Sassem, odnosi się do tworzenia.scss zamiast tradycyjnego .sass way.

Original sass jest podobny do składni ruby, podobny do ruby, jade itp...

W tych składniach nie używamy {}, zamiast tego używamy białych spacji, również bez użycia ;...

W scss składnie są bardziej podobne do CSS, ale z uzyskaniem większej liczby opcji, takich jak: zagnieżdżanie, deklarowanie itp., podobne do less i innych wstępnych procesów CSS...

W zasadzie robią to samo, ale wstawiłem kilka linijek każdego, aby zobaczyć różnicę w składni, spójrz na {}, ;, oraz spaces:

SASS:

$width: 100px
$color: green

div
  width: $width
  background-color: $color

SCSS:

$width: 100px;
$color: green;

div {
  width: $width;
  background-color: $color;
}

Zwarta odpowiedź:

SCSS odnosi się do głównej składni obsługiwanej przez pre-procesor CSS SASS .

• pliki kończące się .scss reprezentują standardową składnię obsługiwaną przez Sass. SCSS to superset CSS.
• pliki kończące się .sass reprezentują "starszą" składnię obsługiwaną przez Sass wywodzącą się ze świata Ruby.

SASS jest składniowo niesamowitym arkuszem stylów i jest rozszerzeniem CSS, które zapewnia funkcje zagnieżdżonych reguł, dziedziczenia, mieszania, podczas gdy SCSS jest kaskadowym arkuszem stylów Sassy, który jest podobny do CSS i wypełnia luki i niezgodności między CSS i SASS. Na licencji MIT. Ten artykuł ma więcej o różnicach: https://www.educba.com/sass-vs-scss/

SCSS to nowa składnia Sass. In Extension wise, .sass za SASS while .scss dla SCSS. Tutaj SCSS ma bardziej logiczne i złożone podejście do kodowania niż SASS. Dlatego dla początkujących w dziedzinie oprogramowania lepszym wyborem jest SCSS.