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

Znam CSS bardzo dobrze, ale jestem zdezorientowany co do Sassa. Czym różni się SCSS od CSS i jeśli użyję SCSS zamiast CSS, czy będzie działać tak samo?

Oprócz odpowiedzi Idrissa :

CSS

W CSS piszemy kod w sposób przedstawiony poniżej, w pełnej długości.

body{
 width: 800px;
 color: #ffffff;
}
body content{
 width:750px;
 background:#ffffff;
}

SCSS

W SCSS możemy skrócić ten kod za pomocą a @mixinwięc nie musimy raz po raz pisać colori widthwłaściwości. Możemy to zdefiniować za pomocą funkcji, podobnie jak w PHP lub innych językach.

$color: #ffffff;
$width: 800px;

@mixin body{
 width: $width;
 color: $color;

 content{
  width: $width;
  background:$color;
 }
}

SASS

Jednak w SASS cała konstrukcja jest wizualnie szybsza i czystsza niż SCSS.

• Jest wrażliwy na białe znaki, gdy używasz kopiowania i wklejania,

• Wygląda na to, że obecnie nie obsługuje wbudowanego CSS.

  $color: #ffffff
  $width: 800px
  $stack: Helvetica, sans-serif
  
  body
    width: $width
    color: $color
    font: 100% $stack
  
    content
      width: $width
      background:$color
  

CSS to język stylizacji, który każda przeglądarka rozumie do nadawania stylów stronom internetowym.

SCSS to specjalny typ pliku dla SASSprogramu napisanego w języku Ruby, który zestawia CSSarkusze stylów dla przeglądarki i dla informacji, SASSdodaje wiele dodatkowych funkcji, takich CSSjak polubienie zmiennych, zagnieżdżanie i wiele innych, co może CSSułatwić i przyspieszyć pisanie .
Pliki SCSS są przetwarzane przez serwer, na którym działa aplikacja internetowa, w celu wyprowadzenia tradycyjnego formatuCSS zrozumiałego dla przeglądarki.

cssma również zmienne. Możesz ich używać w ten sposób:

--primaryColor: #ffffff;
--width: 800px;

body {
    width: var(--width);
    color: var(--primaryColor);
}
.content{
    width: var(--width);
    background: var(--primaryColor);
}

A to mniej

@primarycolor: #ffffff;
@width: 800px;

body{
 width: @width;
 color: @primarycolor;
 .content{
  width: @width;
  background:@primarycolor;
 }
}

Prawidłowe definicje zmiennych:

$      => SCSS, SASS
--     => CSS
@      => LESS

Wszystkie odpowiedzi są dobre, ale pytanie jest trochę inne niż odpowiedzi

"o Sassie. Czym SCSS różni się od CSS" : scss to dobrze sformułowana składnia CSS3 . używa do tego preprocesora Sass.

a jeśli użyję SCSS zamiast CSS, czy będzie działać tak samo? tak. jeśli twój ide obsługuje preprocesor sass. niż będzie działać tak samo.

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

Druga, starsza składnia jest nazywana składnią z wcięciem (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ęć wierszy do określenia bloków. Pliki o wciętej składni używają rozszerzenia .sass.

• Dalsze informacje o:

Co to jest preprocesor CSS?

Sam CSS jest pozbawiony złożonej logiki i funkcjonalności, które są wymagane do napisania uporządkowanego kodu wielokrotnego użytku. W rezultacie programista jest związany ograniczeniami i napotkałby ogromne trudności w utrzymaniu kodu i skalowalności, szczególnie podczas pracy nad dużymi projektami obejmującymi obszerny kod i wiele arkuszy stylów CSS. Tutaj z pomocą przychodzą preprocesory CSS.

Preprocesor CSS to narzędzie służące do rozszerzenia podstawowej funkcjonalności domyślnego standardowego CSS za pomocą własnego języka skryptowego. Pomaga nam używać złożonej składni logicznej, takiej jak - zmienne, funkcje, mieszanki, zagnieżdżanie kodu i dziedziczenie, aby wymienić tylko kilka, doładowując Twój waniliowy CSS. Korzystając z preprocesorów CSS, można bezproblemowo zautomatyzować nieużywane zadania, tworzyć fragmenty kodu wielokrotnego użytku, unikać powtarzania kodu i rozdęć oraz pisać zagnieżdżone bloki kodu, które są dobrze zorganizowane i łatwe do odczytania. Jednak przeglądarki rozumieją tylko natywny kod CSS i nie będą w stanie zinterpretować składni preprocesora CSS. Dlatego złożona i zaawansowana składnia preprocesora musi być najpierw skompilowana do natywnej składni CSS, która może być następnie zinterpretowana przez przeglądarki, aby uniknąć problemów ze zgodnością między przeglądarkami.

Idąc dalej w tym artykule, przyjrzymy się trzem najpopularniejszym preprocesorom CSS, które są obecnie używane przez programistów na całym świecie, tj. Sass, LESS i Stylus. Zanim wybierzesz zwycięzcę między Sass, LESS vs Stylus, najpierw zapoznaj się z nimi szczegółowo.

Sass - Syntactically Awesome Style Sheets

Sass to skrót od „Syntactically Awesome Style Sheets”. Sass to nie tylko najpopularniejszy preprocesor CSS na świecie, ale także jeden z najstarszych, uruchomiony w 2006 roku przez Hamptona Catlin, a później rozwinięty przez Natalie Weizenbaum. Chociaż Sass jest napisany w języku Ruby, prekompilator LibSass umożliwia analizowanie Sassa w innych językach i oddzielenie go od Rubiego. Sass ma ogromną aktywną społeczność i rozległe zasoby edukacyjne dostępne w sieci dla początkujących. Dzięki swojej dojrzałości, stabilności i potężnej sprawności logicznej, Sass znalazł się w czołówce CSS Preprocessor, wyprzedzając swoich rywali.

Sass można napisać w 2 składniach, używając Sass lub SCSS. Jaka jest różnica między nimi? Dowiedzmy Się.

Deklaracja składni: Sass vs SCSS

• SCSS oznacza Sassy CSS. W przeciwieństwie do Sassa, SCSS nie jest oparty na wcięciach.
• Rozszerzenie .sass jest używane jako oryginalna składnia dla Sass, podczas gdy SCSS oferuje nowszą składnię z rozszerzeniem .scss.
• W przeciwieństwie do Sassa, SCSS ma nawiasy klamrowe i średniki, podobnie jak CSS.
• W przeciwieństwie do SCSS, Sass jest trudny do odczytania, ponieważ jest dość odbiegający od CSS. Dlatego SCSS jest bardziej zalecaną składnią Sass, ponieważ jest łatwiejsza do odczytania i bardzo przypomina natywny CSS, a jednocześnie cieszy się mocą Sassa.

Rozważ poniższy przykład ze składnią Sass vs SCSS wraz ze skompilowanym kodem CSS.

Sass SYNTAX
    $font-color: #fff
    $bg-color: #00f

    #box
      color: $font-color
      background: $bg-color

SCSS SYNTAX
    $font-color: #fff;
    $bg-color: #00f;

    #box{
      color: $font-color;
      background: $bg-color;
    }

W obu przypadkach, czy to Sass, czy SCSS, skompilowany kod CSS będzie taki sam -

#box {
      color: #fff;
      background: #00f;

Wykorzystanie Sassa

Prawdopodobnie najpopularniejszy framework frontendowy Bootstrap jest napisany w Sassie. Aż do wersji 3, Bootstrap był napisany w LESS, ale bootstrap 4 przyjął Sass i zwiększył jego popularność. Kilka dużych firm korzystających z Sass to - Zapier, Uber, Airbnb i Kickstarter.

MNIEJ - Leaner Style Sheets

LESS to skrót od „Leaner Stylesheets”. Został wydany w 2009 roku przez Alexisa Selliera, 3 lata po pierwszym uruchomieniu Sassa w 2006 roku. Podczas gdy Sass jest napisany w Rubim, LESS jest napisany w JavaScript. W rzeczywistości LESS jest biblioteką JavaScript, która rozszerza funkcjonalność natywnego CSS waniliowego o miksy, zmienne, zagnieżdżanie i pętlę zestawu reguł. Sass vs LESS to gorąca debata. Nic dziwnego, że LESS jest najsilniejszym konkurentem Sassa i ma drugą co do wielkości bazę użytkowników. Jednak kiedy bootstrap rzucił MNIEJ na korzyść Sassa wraz z uruchomieniem Bootstrap 4, LESS stracił na popularności. Jedną z niewielu wad LESS w porównaniu z Sassem jest to, że nie obsługuje funkcji. W przeciwieństwie do Sassa, LESS używa @ do deklarowania zmiennych, które mogą powodować zamieszanie z @media i @keyframes. Jednak, Jedną z kluczowych zalet LESS w porównaniu z Sass i Stylus lub jakimikolwiek innymi preprocesorami jest łatwość dodania go do projektu. Możesz to zrobić używając NPM lub włączając plik Less.js. Deklaracja składni: LESS Używa rozszerzenia .less. Składnia LESS jest dość podobna do SCSS z tym wyjątkiem, że do deklarowania zmiennych zamiast znaku $ LESS używa @.

@font-color: #fff;
    @bg-color: #00f

    #box{
      color: @font-color;
      background: @bg-color;
    }

COMPILED CSS
    #box {
        color: #fff;
        background: #00f;
      }

Wykorzystanie LESS Popularny framework Bootstrap do czasu premiery wersji 4 był napisany w LESS. Jednak inny popularny framework o nazwie SEMANTIC UI jest nadal napisany w LESS. Wśród dużych firm używających Sass są - Indiegogo, Patreon i WeChat

Rysik

Rysik został uruchomiony w 2010 roku przez byłego programistę Node JS TJ Holowaychuk, prawie 4 lata po wydaniu Sassa i 1 rok po wydaniu LESS. Rysik jest napisany w Node JS i doskonale pasuje do stosu JS. Na rysik duży wpływ miała logiczna sprawność Sassa i prostota LESS. Mimo że Stylus jest nadal popularny wśród programistów Node JS, nie udało mu się stworzyć dla siebie znacznego udziału. Jedną z zalet Stylusa w porównaniu z Sass lub LESS jest to, że jest uzbrojony w niezwykle potężne wbudowane funkcje i jest w stanie obsługiwać ciężkie obliczenia.

Deklaracja składni: Stylus Używa rozszerzenia .styl. Stylus oferuje dużą elastyczność w pisaniu składni, obsługuje natywny CSS, a także pozwala na pominięcie nawiasów, dwukropków i średników. Należy również zauważyć, że rysik nie używa symboli @ ani $ do definiowania zmiennych. Zamiast tego Stylus używa operatorów przypisania do wskazania deklaracji zmiennej.

STYLUS SYNTAX ZAPISANY JAK NARODOWĄ CSS

font-color = #fff;
bg-color = #00f;

#box {
    color: font-color;
    background: bg-color;
}

LUB

STYLUS SYNTAX BEZ KRĘGLIWYCH SZELEK

font-color = #fff;
bg-color = #00f;

#box 
    color: font-color;
    background: bg-color;

LUB

SKŁADNIA STYLUSA BEZ KOLONÓW I PÓŁKOLONÓW

font-color = #fff
bg-color = #00f

#box 
    color font-color
    background bg-color