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

Z tego, co czytałem, Sass jest językiem, który czyni CSS potężniejszym dzięki obsłudze zmiennych i matematyki.

Jaka jest różnica z SCSS? Czy to ma być ten sam język? Podobny? Różne?

Sass jest preprocesorem CSS z ulepszonymi składniami. Arkusze stylów w zaawansowanej składni są przetwarzane przez program i przekształcane w zwykłe arkusze stylów CSS. Nie rozszerzają one jednak samego standardu CSS.

Zmienne CSS są obsługiwane i mogą być używane, ale nie tak dobrze, jak zmienne z procesora wstępnego.

Aby odróżnić SCSS i Sass, ten tekst na stronie dokumentacji Sass powinien odpowiedzieć na pytanie:

Istnieją dwie składnie dostępne dla Sassa. Pierwszy, znany jako SCSS (Sassy CSS) i używany w tym dokumencie, jest rozszerzeniem składni CSS. Oznacza to, że każdy prawidłowy arkusz stylów CSS jest prawidłowym plikiem SCSS o tym samym znaczeniu. Ta składnia została ulepszona o funkcje Sass opisane poniżej. Pliki korzystające z tej składni mają rozszerzenie .scss .

Druga i starsza składnia , znana jako składnia wcięta (lub czasami po prostu „Sass”), zapewnia bardziej zwięzły sposób pisania CSS. Używa wcięcia zamiast nawiasów, aby wskazać zagnieżdżenie selektorów, a nowe linie zamiast średników do oddzielenia właściwości. Pliki korzystające z tej składni mają rozszerzenie .sass .

Wszystko to działa jednak tylko z prekompilatorem Sass, który ostatecznie tworzy CSS. Nie jest rozszerzeniem samego standardu CSS.

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

Różnica polega na interfejsie użytkownika. Pod tekstem zewnętrznym są identyczne. Dlatego pliki sass i scss mogą się importować. W rzeczywistości Sass ma cztery parsery składniowe: scss, sass, CSS i mniej. Wszystkie z nich konwertują inną składnię do abstrakcyjnego drzewa składni, które jest następnie przetwarzane na dane wyjściowe CSS lub nawet na jeden z pozostałych formatów za pomocą narzędzia sass-convert.

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

Plik Sass .sassjest wizualnie różny od .scsspliku, np

Przykład.sass - sass to starsza składnia

$color: red

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

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

Example.scss - sassy css to nowa składnia 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żna przekonwertować na Sassy CSS (SCSS), po prostu zmieniając rozszerzenie z .cssna .scss.

Sass ( Syntactically Awesome StyleSheets ) mają dwie składnie:

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

Oba są więc częścią preprocesora Sass z dwiema możliwymi składniami.

Najważniejsza różnica między SCSS a oryginalnym Sass :

SCSS :

• Składnia jest podobna do CSS (do tego stopnia, że ​​każdy prawidłowy CSS3 jest również prawidłowym SCSS , ale związek w innym kierunku oczywiście nie ma miejsca)

• Używa aparatu ortodontycznego {}

• Wykorzystuje średniki ;
• Znak przydziału to :
• Aby utworzyć mixin , wykorzystuje @mixindyrektywę
• Aby użyć mixin , poprzedza go @includedyrektywa
• Pliki mają rozszerzenie .scss .

Oryginalny Sass :

• Składnia jest podobna do Ruby
• Bez nawiasów klamrowych
• Bez ścisłego wcięcia
• Bez średników
• Znak przypisania jest =zamiast:
• Aby utworzyć mixin, używa =znaku
• Aby użyć mixin , poprzedza go +znakiem
• 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 wcięcia Sassa nie była i nigdy nie będzie przestarzała .

Konwersje z 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 plus (lub con, w zależności od twojej perspektywy).

Spróbuję nie powtarzać wiele z tego, co powiedzieli inni, możesz łatwo to zrobić w Google, ale zamiast tego chciałbym powiedzieć kilka rzeczy z mojego doświadczenia, używając obu, czasem nawet w tym samym projekcie.

SASS pro

• czystsze - jeśli pochodzisz z Python, Ruby (możesz nawet pisać rekwizyty ze składnią podobną do symboli) lub nawet ze świata CoffeeScript, stanie się to dla ciebie bardzo naturalne - pisanie miksów, funkcji i ogólnie wszystkich rzeczy wielokrotnego użytku .sassjest o wiele łatwiejsze ”i czytelne niż w .scss(subiektywne).

Wady SASS

• wrażliwe na spacje (subiektywne), nie przeszkadza mi to w innych językach, ale tutaj w CSS po prostu mi to przeszkadza (problemy: kopiowanie, tabulacja vs. wojna kosmiczna itp.)
• brak wbudowanych zasad (dla mnie było to łamanie gier), body color: redw .scss nie możesz robić tak, jak potrafiszbody {color: red}
• importowanie materiałów innych dostawców, kopiowanie fragmentów waniliowych CSS - nie niemożliwe, ale po pewnym czasie bardzo nudne. Rozwiązaniem jest posiadanie .scssplików (wraz z .sassplikami) w projekcie lub ich konwersja .sass.

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

Teraz lubię pisać miksy i zmienne .sassoraz kod, który będzie się kompilował w CSS, .scssjeśli to możliwe (tj. Visual Studio nie ma wsparcia dla, .sassale zawsze, gdy pracuję nad projektami Railsowymi, zwykle łączę dwa z nich, a nie w jednym pliku ofc).

Ostatnio, jestem rozważa dając Stylus szansę (dla pełnoetatowego preprocesor CSS), ponieważ pozwala na łączenie dwóch składnie w jednym pliku (wśród innych funkcji). To może nie być dobry kierunek dla zespołu, ale jeśli utrzymujesz go w spokoju - jest w porządku. Rysik jest w rzeczywistości najbardziej elastyczny, jeśli chodzi o składnię.

I na koniec mixin do .scssporównania .sassskładni vs :

// 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. Nowa główna składnia (od Sass 3) jest znana jako „SCSS” (dla „Sassy CSS”) i stanowi nadzbiór składni CSS3. Oznacza to, że każdy prawidłowy arkusz stylów CSS3 jest również prawidłowym SCSS. Pliki SCSS mają rozszerzenie .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 w celu określenia bloków. Chociaż nie jest już podstawową składnią, wcięta składnia będzie nadal obsługiwana. Pliki w składni wciętej używają rozszerzenia .sass.

SASS to interpretowany język, który wyrzuca CSS. Struktura Sass wygląda jak CSS (zdalnie), ale wydaje mi się, że opis jest nieco mylący; to nie zastępuje CSS, lub rozszerzenie. Jest to interpreter, który ostatecznie wyrzuca CSS, więc Sass wciąż ma ograniczenia normalnego CSS, ale maskuje je prostym kodem.

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

SASS oznacza Syntactically Awesome StyleSheets. Jest to rozszerzenie CSS, które dodaje mocy i elegancji do podstawowego języka. SASS został niedawno nazwany SCSS z pewnymi szansami, ale jest też stary SASS. Przed użyciem SCSS lub SASS zapoznaj się z poniższą różnicą.

Przykład składni SCSS i SASS:

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 kompilacji (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 przewodnika można znaleźć na oficjalnej stronie internetowej .

Sass był pierwszy, a składnia jest nieco inna. Na przykład, włączając mixin:

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

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

Różnica między artykułami SASS i SCSS wyjaśnia różnicę w szczegółach. Nie dajcie się zwieść opcjom SASS i SCSS, chociaż ja również początkowo byłem .scss to Sassy CSS i kolejna generacja .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; oddzielić deklaracje. Dodałem nawet wszystkie deklaracje dla .border w jednym wierszu, aby zilustrować ten punkt dalej. Natomiast poniższy kod SASS musi znajdować się w różnych wierszach z wcięciem 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

Możesz zobaczyć z CSS poniżej, że styl SCSS jest znacznie 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 ​​współpracuje z Sass, odnosi się do tworzenia w .scss zamiast tradycyjnego .sass.

Oryginalny sass jest podobny do składni ruby, podobny do rubinu, jadeitu itp.

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

W scssskładniach są bardziej podobne CSS, ale z uzyskaniem większej liczby opcji, takich jak: zagnieżdżanie, deklarowanie itp., Podobne lessi inne wstępne przetwarzanie CSS...

Są to przede wszystkim zrobić to samo, ale mogę umieścić kilka wierszy każdy, aby zobaczyć różnicę składni, spojrzeć 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;
}

Kompaktowa odpowiedź:

SCSS odnosi się do głównej składni obsługiwanej przez preprocesor Sass CSS .

• Pliki z rozszerzeniem .scss reprezentują standardową składnię obsługiwaną przez Sass. SCSS jest nadzbiorem CSS.
• Pliki kończące się .sassna „reprezentują” starszą składnię obsługiwaną przez Sass pochodzącą ze świata Ruby.

SASS to Syntactically Awesome Style Sheets i jest rozszerzeniem CSS, które zapewnia funkcje zagnieżdżonych reguł, dziedziczenia, Mixins, natomiast SCSS to Sassy Cascaded Style Sheets, który jest podobny do CSS i wypełnia luki i niezgodności między CSS i SASS. To było na licencji MIT. Ten artykuł zawiera więcej informacji na temat różnic: https://www.educba.com/sass-vs-scss/