Nowoczesne CSS z SASS

Nowoczesny CSS z Sass - poradnik praktyczny

Język: niemiecki

Nowoczesne CSS z Sass - samouczek praktyczny

Zawsze irytowałeś się, że w CSS nie ma zmiennych i pętli? Koniec z tym! Preprocesory CSS, takie jak Sass, udostępniają dokładnie takie funkcje. Dzięki nim można efektywniej generować kod CSS. Oprócz Sass, w tym samouczku zostanie oceniona również popularna ramka Compass, która podnosi użycie Sassa na jeszcze wyższy poziom. Poznaj możliwości, jakie mają do zaoferowania Sass i Compass podczas trzygodzinnego kursu.

Stań się mistrzem Sass dzięki tej trzygodzinnej serii szkoleń wideo z programistą internetowym Danielem Kochem.
Zdefiniuj zmienne, stwórz własne miksymy, eksperymentuj z kolorami i liczbami oraz na koniec wykorzystaj Compass.
Naucz się tworzyć CSS efektywnie i zastosuj swoją nową wiedzę w przyszłych projektach.

Krok po kroku do profesjonalnego rozwoju CSS. Jeśli CSS, to nowoczesne i z użyciem Sass - Daniel Koch pokaże Ci jak!

szczegóły

Możliwe z:
Zawartość: 3 h Szkolenie wideo
Licencja: prywatna i komercyjna Prawa użytkowania

Kategorie

Web design, CMS i rozwój

Z miłością stworzone przez:

Daniel Koch

Nowoczesny CSS z użyciem Sass.

Nowoczesny CSS z pomocą Sass – 01 Wprowadzenie

Darmowe

Nowoczesny CSS z Sass – Wprowadzenie

Dzięki preprocesorom CSS pisanie CSS jest znacznie bardziej efektywne. Co to są preprocesory, jakie istnieją i dlaczego wybór padł na Sass, pokazuje ten film.

Nowoczesny CSS z Sass - 02 Instalacja

Zanim będzie można korzystać z Sass, trzeba go zainstalować. I warunkiem koniecznym jest Ruby. Obie te czynności - czyli instalacja Ruby i Sass - zostaną pokazane w tym filmie. Następnie będziecie mogli od razu sprawdzić, czy instalacja Sass faktycznie się udała.

Nowoczesny CSS z Sass - 03 Mistrzowska kompilacja

Nowoczesny CSS z Sass - 03 Sprawne kompilowanie

Sasse muszą być przekształcone w pliki CSS, aby faktycznie były użyteczne. Dzięki poleceniu Watch można łatwo wykryć zmiany w poszczególnych plikach lub w całych katalogach.

Nowoczesny CSS z Sass - 04 Pliki scalone.

Nowoczesne CSS z Sass – połącz pliki 04

Za pomocą dyrektywy @import można importować i łączyć pliki SCSS. Co ma to wszystko wspólnego z podkreśleniem przed nazwą pliku, jest aspektem tego filmu.

Nowoczesny CSS z Sass - Deklarowanie i używanie zmiennych.

Nowoczesny CSS z użyciem Sass - Deklarowanie i używanie zmiennych 05

W Sass istnieje możliwość deklarowania zmiennych. To pojęcie, jak wiadomo, nie jest dostępne w tradycyjnym CSS, ale w Sass jest genialnym narzędziem do efektywnego tworzenia arkuszy stylów.

Nowoczesny CSS z Sass - 06 Zasada zagnieżdżania

Dzięki zagnieżdżaniu można utrzymać składnię Sassa znacznie bardziej zwartą niż jest to zazwyczaj w CSS. Dodatkowo zagnieżdżanie pomaga również w zwięźlejszym pisaniu kodu.

Nowoczesny CSS z użyciem Sass - 07 Wyrafinowane dziedziczenie za pomocą Extend

Nowoczesne CSS z Sass - 07 Sprytne dziedziczenie z Extend.

Użycie @extend pozwala przekazywać zestaw właściwości CSS z jednego selektora do drugiego. To również pomaga utrzymać pliki Sass w dobrej formie.

Nowoczesny CSS z Sass - 08 modułów z selektorami zastępczymi.

Selektor zastępczy umożliwia definiowanie modułów. Ta modularność pozwala na podzielenie składni Sass na logiczne bloki, które można dołączyć w różnych miejscach.

Nowoczesny CSS z Sass – 09 Definiowanie mixinów

Nowoczesne CSS z użyciem Sass – definiowanie 09 miksinów.

Mixin-y to funkcje, które pozwalają znacznie uprościć przepływ pracy, na przykład. W tym filmie pokazane zostanie, jak definiować swoje własne mixin-y i w końcu je stosować.

Nowoczesny CSS z Sass - 10 Selektor elementu rodzica.

Z selektorem, o którym mowa w tym filmie, można uzyskać dostęp do elementu nadrzędnego elementu. Ten selektor, jak wiadomo, nie istnieje w CSS i dlatego oferuje ogromną wartość dodaną.

Nowoczesny CSS z użyciem Sassa – 11 Automatyzacja za pomocą pętli for.

Nowoczesne CSS z Sass - 11 Automatyzacja z pętlami For

Sass umożliwia użycie pętli For. Jest to bardzo proste w Sassie i może być wykorzystane na przykład do zdefiniowania własnego systemu siatkowego.

Nowoczesny CSS z Sass - 12 pętli each i while.

Oprócz pętli For, w Sass można również korzystać z pętli Each i While. Jak można to wykorzystać do automatyzacji, pokazuje ten film.

Nowoczesny CSS z Sass - 13 decyzji warunkowych z if i else

Nowoczesne CSS z Sassy - 13 decyzji warunkowych z if i else

W językach takich jak PHP i JavaScript istnieje możliwość reagowania na różne zdarzenia za pomocą if i else. Coś takiego istnieje również w Sass. Jak to można wykorzystać, pokazuje ten film.

Nowoczesne CSS z Sass - 14 Operatory matematyczne

Nowoczesny CSS przy użyciu Sassa - 14 operatorów matematycznych

Możecie liczyć w Sass. To jest na przykład praktyczne ze względu na definiowanie rozmiarów czcionek. Dzięki odpowiednim operatorom można również zbudować własny, indywidualny system siatkowy.

Nowoczesny CSS z Sassy - 15 gier kolorowych

Nowoczesny CSS z SASS - 15 kolorowych układów.

Oczywiście można definiować kolory w Sassie. Jednak Sass wychodzi też znacznie dalej w tej dziedzinie niż tradycyjne CSS. Dzięki odpowiednim funkcjom na przykład można łatwo manipulować kolorami.

Nowoczesny CSS z użyciem Sass - 16 Compass.

Framework Compass rozszerza możliwości Sass o wiele. Ten pierwszy film pokaże, jak zainstalować i korzystać z Compass.

Nowoczesny CSS z Sass - 17 Compass i CSS3.

Strona internetowa projektu Compass jest głównym narzędziem informacyjnym, jeśli chodzi o pracę z tym frameworkiem. Pokażę wam na przykładzie funkcji CSS3 w Compass, jak możecie pracować z dokumentacją.

Nowoczesny CSS z pomocą Sassa – 18 Compass w akcji i przegląd Susy.

Nowoczesny CSS z Sass - działanie Bullet 18 Compas i przegląd Susy.

Przykład pokazuje, jak łatwo można zrealizować rzeczy przy użyciu Compass. Na końcu tej serii zostanie także przyjrzane się alternatywnemu frameworkowi Sass. Susy oferuje smukły system siatki.

Szczegóły dotyczące zawartości

CSS efektywne – z Sass: zacznij praktykę przez poradnik
Sass zdynamizował rozwój CSS, ponieważ w końcu można skutecznie pisać kod CSS. W trzygodzinnym kursie z 18 lekcjami dowiesz się wszystkiego o Sass i frameworku Sass - Compass.

Instalacja środowiska programistycznego Sass

Zanim rozpoczniesz podróż z przewodnikiem CSS z Sass, musisz dokonać instalacji. Ale bez obaw - jest to bardzo proste. Wystarczy Ruby i kilka poleceń w wierszu poleceń, aby stać się dumny posiadaczem środowiska programistycznego Sass. Ten, kto do tej pory bał się instalacji Sass, zostanie tutaj krok po kroku poprowadzony przez instalację. Pierwsze testy pokażą, jaką wersję Sass masz zainstalowaną.

Pierwsze kroki w typowej strukturze projektu

Następnie następują pierwsze kroki: Zacznij od Sass! Po pierwszym spojrzeniu na składnię poznaj podstawowe cechy języka. Poznajesz zmienne, zobaczysz typową strukturę projektu i szybko poradzisz sobie z Sass.

Rozwój: Pętle & Instrukcje warunkowe

Przygotowany w ten sposób można przejść do profesjonalnego rozwoju: To, co sprawia, że Sass jest tak wyjątkowy, to rzeczy, które prawie przypominają prawdziwe języki skryptowe, takie jak JavaScript. Ponieważ w Sass można definiować pętle i używać instrukcji warunkowych. Te kwestie są również podstawą dla mistrzostwa w Sass - definiowania Mixins. Są to potężne funkcje, które znacznie ułatwiają pracę z Sass, a więc w końcu z CSS.

Compass: Ułatwia pracę z CSS

Diamentowym punktem tego szkolenia jest Compass. Podnosi to rozwój Sass na zupełnie inny poziom, ponieważ ten framework Sass oferuje niezliczone narzędzia i funkcje, które znacznie ułatwiają pracę z CSS.

To, czego się nauczysz w poradniku o CSS i Sass

Krok po kroku poznasz funkcje Sass, od wprowadzenia przez narzędzia profesjonalne po pracę z Compass. Dzięki temu masz to, co jest obecnie możliwe, i możesz od razu wykorzystać swoją wiedzę. Pisanie CSS nigdy nie było tak efektywne!