Articles

rozdíl mezi .sass a .scss

by admin

Když jsem poprvé začal na cestě CSS troffu jsem byl ohromen různé možnosti (sass, less, stylus), rozdíly v syntaxi, a ze všeho nejvíce jsem neměl tušení, jak bych měl začít s tento nový přístup k psaní CSS.

Pokud jste častým uživatelem CodePen.io zjistíte, že existuje několik možností, pokud jde o chuť CSS, které si můžete vybrat.

  • SASS s Kompasem
  • SCSS s Kompasem
  • MENŠÍ
  • Pravidelné ol‘ CSS

nenechte se zmást tím, SASS a SCSS možnosti, i když jsem byl původně .scss je drzý CSS a je další generací .sass. Vysvětlení z webových stránek

Sass má dvě syntaxe. Nejčastěji používaná syntaxe je známá jako „SCSS“ (pro „Sassy CSS“) a je nadmnožinou syntaxe CSS3. To znamená, že každý platný CSS3 stylesheet je platný SCSS stejně. Soubory SCSS používají příponu .scss.

druhá, starší syntaxe je známá jako odsazená syntaxe (nebo jen „.sass“). Inspirován Haml je terseness, je určen pro lidi, kteří dávají přednost stručnost před podobností s CSS. Místo závorek a středníků používá odsazení řádků k určení bloků. Soubory v odsazené syntaxi používají příponu .sass.

Vysvětlení SASS vs SCSS na sass-lang.com webové stránky

Pokud to nedává žádný smysl, můžete vidět rozdíl v kódu níže.

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

ve výše uvedeném kódu používáme ; k oddělení deklarací. Dokonce jsem přidal všechny deklarace pro .border na jeden řádek, abych tento bod dále ilustroval.

naproti tomu níže uvedený kód SASS musí být na různých řádcích s odsazením a ;se nepoužívá.

/* 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 CSS níže můžete vidět, že styl SCSS je mnohem více podobný běžnému CSS než starší přístup SASS.

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

myslím, že většinu času v těchto dnech, pokud někdo zmíní, že pracují s Sass se odkazují na authoring in .scss spíše než tradiční .sass way.

můžete se také podívat na některé užitečné @mixins, které vám pomohou s vaší citlivou sestavou.