no dobra wiadomość. Sass uczyni twoje życie lepszym. W końcu będziesz mógł wyschnąć (nie powtarzaj się) swój kod w CSS.
zasadniczo, CSS brakuje kilku świetnych funkcji, które pomogłyby przekształcić go w łatwiejszy w użyciu i czytaniu. Sass dodaje zmienne, Zagnieżdżanie, częściowe, Mixiny,rozszerzenie / dziedziczenie i operatory. Niektóre z nich są rzeczy, które języki programowania mają tendencję do., Jeśli nie wiesz, czym są niektóre z nich, to w porządku. Zdefiniujemy każdy z nich i pokażemy, w jaki sposób można je wykorzystać.
Sass może być skompilowany do plików CSS, co ułatwia pisanie wielu plików.
Jeśli używasz create react app masz szczęście, ponieważ część przetwarzania jest już za Ciebie. Jeśli nie możesz użyć Grunt lub Gulp do przetworzenia plików Sass / SCSS do CSS. Jeśli nie jesteś jeszcze w środowisku, które to zrobi, proponuję najpierw skonfigurować. Ten artykuł opowiada o funkcjach Sass i o tym, jak z nich korzystać.,
Jaka jest różnica między Sass a SCSS. Cóż, oba mogą być skompilowane do CSS. Prawdziwa różnica polega na składni. SCSS używa głównie tej samej składni CSS, podczas gdy Sass usuwa nawiasy klamrowe i średniki. W obu przypadkach możesz skorzystać z dodatkowych funkcji, które zapewnia Sass.
poniżej przedstawiono różnice składniowe.
Jeśli używasz dowolnego języka kodowania, wiesz, co to jest zmienna. Więc nie zagłębiam się w to zbyt głęboko. Zasadniczo Sass pozwala definiować zmienne tak, że jeśli zdecydujesz się zmienić say kolor, nie musisz zmieniać go 1000 razy., Możesz po prostu zmienić podstawową zmienną koloru w jednym miejscu i możesz iść
$primary-color: #333; body {
background-color: $primary-color;
}.text {
color: $primary-color;
}
Zagnieżdżanie
w CSS nie możesz zagnieżdżać. Spójrzmy na tych dwóch selektorów. Nie ma w tym nic strasznego złego. Ale powtarzamy kod.
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
możemy tak zagnieżdżać się w Sass. Wygląda dużo czystiej.
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
}
częściowe
częściowe są plikami Sass lub Scss, które mają podkreślenie z przodu nazwy pliku. Na przykład. „_test.scss”. Co to robi?, Oznacza to, że ten konkretny plik nie powinien być zamieniany w CSS, gdy nadejdzie czas. Pliki te będą zawierać fragmenty CSS, które mogą być importowane przez inne pliki SCSS.
jest to świetny sposób, aby modularyzować swój CSS i zachować rzeczy łatwiejsze w utrzymaniu. Na przykład możesz przechowywać zmienne, które będą używane w wielu plikach. To jest sposób, aby to zrobić.
Mixiny
Mixiny są interesujące, ponieważ dodają funkcję podobną do języka kodowania. Od razu rozpoznasz, co mam na myśli, widząc Kod:
zamiast wpisywać „rotate(30deg)” 3 razy., Możesz stworzyć to, co zasadniczo wygląda jak funkcja i coś w rodzaju działa jak jedna. Przekazujesz właściwość do transform() mixin.
aby użyć tego fragmentu kodu, musisz użyć słowa kluczowego „@ include”.
Więcej informacji po kliknięciu tutaj.
Rozszerz/dziedziczenie& operatorzy
opowiem o nich w części 2, ponieważ są nieco bardziej zaangażowani. Są to jedne z najbardziej przydatnych funkcji w SCSS więc proszę śledzić i będę pisać ten blog w przyszłym tygodniu!
Zapraszam na Twitter @thedrewprint i znajdźcie mnie na LinkedIn w Andrew Richards., Dzięki za przeczytanie!