Základy Sass - nová pravidla

Instalace na Mac OS X nebo Linux (homebrew)

Pokud používáte správce balíčků Homebrew pro Mac OS X nebo Linux, můžete nainstalovat Dart Sass  spuštěním

brew install sass/sass/sass

Instalovat pomocí NODE.sj (npm)

Pokud používáte Node.js, můžete také nainstalovat Sass pomocí npm spuštěním 

npm install -g sass

Upozorňujeme však, že tím se nainstaluje čistá implementace JavaScriptu Sass, která běží poněkud pomaleji než ostatní zde uvedené možnosti. Ale má stejné rozhraní, takže bude snadné jej později vyměnit za jinou implementaci, pokud potřebujete trochu vyšší  rychlost!

Proměnné

Představte si proměnné jako způsob, jak ukládat informace, které chcete znovu použít ve své šabloně stylů. Můžete ukládat věci jako barvy, zásobníky písem nebo jakoukoli hodnotu CSS , o které si myslíte, že ji budete chtít znovu použít. Sass používá $ symbol k tomu, aby se něco stalo proměnným. Zde je  příklad:

Syntaxe SCSS

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

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

Výstup CSS

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

Když je Sass zpracován, vezme proměnné, které definujeme pro a $font-stack, $primary-color a vypíše normální CSS s hodnotami našich proměnných umístěnými v CSS. To může být extrémně účinné při práci s barvami značky a jejich konzistentnosti na celém webu.

Nesting

Při psaní HTML jste si pravděpodobně všimli, že má jasnou vnořenou a vizuální hierarchii. CSS, na druhou stranu,  ne.

Sass vám umožní vnořit vaše selektory CSS způsobem, který sleduje stejnou vizuální hierarchii vašeho HTML. Uvědomte si, že příliš vnořená pravidla budou mít za následek příliš kvalifikované CSS , které by mohlo být obtížné udržovat a je obecně považováno za špatný postup.

S ohledem na to uvádíme příklad některých typických stylů pro  navigaci na webu:

Syntaxe SCSS

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Výstup CSS

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Všimnete si, že selektory ul, li, a ajsou vnořeny do nav selektoru. Je to skvělý způsob, jak uspořádat svůj CSS a učinit jej čitelnějším.

Moduly

Nemusíte psát všechny své Sass do jednoho souboru. Podle pravidla si to můžete rozdělit, jak chcete @use. Toto pravidlo načte další soubor Sass jako modul , což znamená, že můžete odkazovat na jeho proměnné, mixiny a funkce ve svém souboru Sass pomocí jmenného prostoru založeného na názvu souboru. Použití souboru bude zahrnovat také CSS, které generuje, do vašeho kompilovaného výstupu!

Syntaxe SCSS

// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

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

// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

Výstup CSS

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

.inverse {
  background-color: #333;
  color: white;
}

Všimněte si, že používáme @use 'base'; v styles.scsssouboru. Když použijete soubor, nemusíte uvádět příponu souboru. Sass je chytrý a přijde na to za  vás.

Mixins

Některé věci v CSS jsou trochu zdlouhavé na psaní, zvláště s CSS3 a mnoha předponami dodavatelů, které existují. Mixin vám umožňuje vytvářet skupiny deklarací CSS , které chcete znovu použít na svém webu. Pomáhá udržet váš Sass velmi SUCHÝ . Můžete dokonce předávat hodnoty, aby byl váš mix flexibilnější. Zde je příklad pro theme.

Syntaxe SCSS

@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkRed);
}
.success {
  @include theme($theme: DarkGreen);
}

Výstup CSS

.info {
  background: DarkGray;
  box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
  color: #fff;
}

.alert {
  background: DarkRed;
  box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
  color: #fff;
}

.success {
  background: DarkGreen;
  box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
  color: #fff;
}

Chcete-li vytvořit mixin, použijte @mixin direktivu a pojmenujte ji. Pojmenovali jsme náš mixin theme. Také používáme proměnnou $theme v závorkách, abychom mohli předat, theme co chceme. Poté, co vytvoříte svůj mixin, můžete jej použít jako deklaraci CSS začínající na @include následovanou názvem mixinu.

Extends/Dědičnost

Použití @extend umožňuje sdílet sadu vlastností CSS z jednoho selektoru do druhého. V našem příkladu vytvoříme jednoduchou sérii zpráv pro chyby, varování a úspěchy pomocí další funkce, která jde ruku v ruce s třídami extend, zástupných symbolů. Třída zástupného symbolu je speciální typ třídy, která se vytiskne pouze tehdy, když je rozšířena, a může pomoci udržet vaše zkompilované CSS čisté a čisté.

Syntaxe SCSS

/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

Výše uvedený kód říká .message, .success, .error, a .warningchovat se stejně jako %message-shared. To znamená, že kdekoli, kde %message-sharedse objeví, .message, .success, .error, & .warning bude také. Kouzlo se odehrává v generovaném CSS , kde každá z těchto tříd získá stejné vlastnosti CSS%message-shared jako. To vám pomůže vyhnout se nutnosti psát více názvů tříd na prvky HTML. 

Kromě zástupných tříd v Sass můžete rozšířit většinu jednoduchých selektorů CSS, ale použití zástupných symbolů je nejjednodušší způsob, jak zajistit, že nerozšíříte třídu, která je vnořená jinde ve vašich stylech, což může vést k nechtěným selektorům ve vašem CSS. 

Všimněte si, že CSS v %equal-heights není generováno, protože %equal-heights není nikdy rozšířeno.

Operátory

Matematika ve vašem CSS je velmi užitečná. Sass má několik standardních matematických operátorů jako +, -, *, math.div()a %. V našem příkladu provedeme jednoduchou matematiku pro výpočet šířek pro articlea aside.

Syntaxe SCSS

@use "sass:math";

.container {
  display: flex;
}

article[role="main"] {
  width: math.div(600px, 960px) * 100%;
}

aside[role="complementary"] {
  width: math.div(300px, 960px) * 100%;
  margin-left: auto;
}

Výstup CSS

.container {
  display: flex;
}

article[role=main] {
  width: 62.5%;
}

aside[role=complementary] {
  width: 31.25%;
  margin-left: auto;
}

Vytvořili jsme velmi jednoduchou proměnlivou mřížku založenou na 960 pixelech. Operace v Sass nám umožňují udělat něco jako vzít hodnoty pixelů a převést je na procenta bez větších  problémů.