Domieszki i moduły

Domieszki i moduły

Domieszki w SASS (Mixins) to bloki z wyglądu pełniące rolę funkcji, które mogą być używane w różnych miejscach przekazując do nich argumenty. Są przydatne gdy chcemy w wielu miejscach wykorzystać ten sam zestaw styli.

Domieszki definiujemy przy pomocy słowa kluczowego @mixin na początku, następnie nazwa i parametry. W miejscu gdzie chcemy użyć domieszki używamy słowa kluczowego @include następnie jej nazwa i argumenty.

Moduły w CSS to osobne pliki, które są ładowane przy pomocy słowa kluczowego @use a następnie nazwy domieszki, funkcji lub zmiennej z innego pliku do zaimportowania. Niektóre transpilatory nie wspierają modułów a jedynie domieszki lub ładowanie całych plików przy pomocy @import i nazwy pliku.

Przykład

// SASS
@mixin button($bg, $color) {
  background: $bg;
  color: $color;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-family: sans-serif;
}

.btn-primary { 
    @include button(#3f3aaf, #fff); 
}

.btn-secondary { 
    @include button(#e600ac, #fff); 
}

.btn-tertiary { 
    @include button(#ffffb3, #000); 
}

Po transpilacji poskutkuje arkuszem CSS:

/* CSS */
.btn-primary {
  background: #3f3aaf;
  color: #fff;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-family: sans-serif;
}

.btn-secondary {
  background: #e600ac;
  color: #fff;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-family: sans-serif;
}

.btn-tertiary {
  background: #ffffb3;
  color: #000;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-family: sans-serif;
}

Ćwiczenia

Ćwiczenie 1 - Przygotuj domieszkę, która posłuży do szybkiego zdefiniowania 5 prostokątów o różnych kolorach tła i kolorach fontu. Każdy prostokąt powinna mieć font o rozmiarze 1rem, zaokrąglenie 20%, minimalną wysokość 300px i szerokość 100%.

school Mentoring

Masz pytania lub wątpliwości? Coś jest niejasne? Kliknij tutaj i skontaktuj się z mentorem.

Wprowadzenie

library_books O czym jest kurs library_books Wymagania przed rozpoczęciem library_books Narzędzia dla programistów

Podstawy HTML

lock Składnia HTML lock Struktura strony i jak testować lock Semantyka i element DIV lock Paragrafy, nagłówki i formatowanie lock Klasy i identyfikatory lock Hiperłącza lock Listy lock Obrazy i mapy obrazów lock Formularz i elementy formularza lock Osadzanie ramek lock Tabele lock Znaczniki Meta lock Osadzanie zasobów lock Audio i wideo lock Projekt z rozdziału o HTML

Podstawy CSS

lock Składnia CSS lock Selektory i pseudo-klasy library_books Box Model lock Marginesy i odstępy wewnętrzne lock Dziedziczenie lock Jednostki miary lock Kaskada lock Typografia lock Kolory lock Właściwości tła lock Flexbox lock Animacje i przejścia lock Responsywność z Media Queries lock Projekt z CSS lock Test z wiedzy o CSS

Podstawy JavaScript

lock Wprowadzenie do JavaScript lock Zmienne i stałe lock Wyrazy zarezerwowane lock Typy danych lock Operatory lock Pętle lock Funkcje lock Projekt z JavaScript

Praktyczny JavaScript

lock Template strings lock Obiekt console lock Zarządzanie datą i czasem library_books Obiekt - Object lock Tablica - Array lock Symbol lock JSON lock Web API - DOM, Window lock Asynchroniczność z Promise lock Async/await lock Obiekt Math lock Klasy library_books Settery i gettery lock Projekt z JavaScript 2 lock Test wiedzy z JavaScript 2

Zaawansowany JavaScript

lock Wyrażenia regularne lock Generatory funkcji lock Tryb ścisły lock Tail Call lock Błędy i wyjątki lock Praca z danymi binarnymi lock Moduły, import, export lock Workers lock Fetch i protokół HTTP lock Projekt z JavaScript 3

Node i przydatne narzędzia

lock Node lock NPM lock Yarn lock ESLint library_books Webpack lock Jest lock Projekt z JavaScript 4

SASS - Preprocesor CSS

lock Wprowadzenie lock Zmienne i operatory library_books Domieszki i moduły lock Zagnieżdżanie lock Rozszerzanie lock Listy i pętle lock Projekt z SASS

Bootstrap - Framework CSS

lock Wstęp do frameworków CSS lock Wprowadzenie do Bootstrap 4 lock Siatka pozycjonowania lock Typografia, kolory, formularze i przyciski lock Przydatne klasy lock Flex lock Projekt z Bootstrap

Wprowadzenie do React.js

lock Czym są frameworki JavaScript lock Wprowadzenie do React lock JavaScript Extended lock VirtualDOM i ReactDOM lock Typy komponentów i ich stan lock Komponenty wyższego rzędu lock Redux i Flux lock Projekt z React lock Test z wiedzy o React

© 2020 CodeHub.pl