CSS: Udostępnianie zmiennych do JavaScript
od Podstaw
9 godz. 11 min · HTML i CSS · Full-stack i Programowanie
Wojciech PołowniakSr. Fullstack EngineerCzego się nauczysz
- Najważniejsze koncepcje CSS
- Praktyczne przykłady zastosowania
- Kompendium wiedzy o nowych technikach
- Preprocesory CSS
- Flexbox oraz Grid
- Podstawy tworzenia animacji
- Architektura CSS
- I wiele więcej!
CSS na miarę lat 20 XXI wieku
Web dev nigdy nie stoi w miejscu - włączając w to CSS. Czołowe przeglądarki różną się implementacją różnych funkcjonalności, a coraz to nowe właściwości wchodzące do specyfikacji są w stanie postawić stylowanie do góry nogami. W tym kursie poznasz przegląd różnych technik i technologii które zmienią Twoje patrzenie na CSSa - zdecydowanie na lepsze! Koniec z tworzeniem hacków w JavaScript aby osiągnąć efekty takie jak wykresy kołowe czy płynne przewijanie. Poznasz też różne właściwości CSS które są w stanie przyśpieszyć Twoją witrynę!
Architektura CSS
Na pewnym etapie rozwoju jako Front-End developer, bądź wraz z rozwojem naszego produktu - standardowe podejście do CSSa może nie wystarczyć. W tym kursie poznasz 5 ciekawych architektur CSSa, poznasz ich podstawowe koncepty oraz moje opinie na ich temat. Dzięki temu, tworząc swój następny projekt, będziesz w stanie stworzyć architekturę CSSa bazując na sprawdzonych fundamentach.
Tworzenie layoutów przy współczesnych metodach pozycjonowania
CSS Grid i CSS Flexbox to właściwości które powinien znać każdy Front-end developer. Jeśli nie chcesz spędzać wielu godzin na poznawanie tych technologii z osobna, w tym kursie znajdziesz podstawowe informacje na temat tych dwóch technologii - w pigułce. Poznasz różnice między nimi oraz dowiesz się, co zmieniło się w nich w ostatnim czasie.
Przyśpiesz swoją stronę
Jeśli borykasz się z problemami wydajnościowymi na swojej stronie internetowej, ten kurs wskaże Ci techniki które pomogą Ci zmniejszyć czas ładowania, jak i ogólną wydajność Twojej witryny - czy to początkowe ładowanie, czy klatkująca animacja.
Preprocesory CSS
Czy nie wiesz jak zacząć z preprocesorami? Po co są nam one potrzebne? A może nie wiesz jak wpasowują się w obecne trendy tworzenia stron? Ten kurs odpowie na Twoje pytania! Dodatkowo, dowiesz się jak skonfigurować jeden z najbardziej popularnych preprocesorów CSS, oraz poznasz jego kluczowe funkcje czy składnie.Jako dodatek, dowiesz się jak dzielić Twoje zmienne SCSS wraz z Twoim kodem JavaScript!
Fundamenty animacji w CSS
Animacje CSSowe są już z nami od lat, ale jak konkretnie się za nie zabrać? Co trzeba zrobić, aby rozpocząć przygodę z animacjami? Jeśli nie wiesz, to w zaledwie kilku lekcjach poznasz narzędzia i składnie do tworzenia przejść i animacji ograniczonych tylko przez Twoją wyobraźnię* (i możliwości CSSa)
Dla kogo jest ten kurs?
Aby móc efektywnie korzystać z tego kursu, powinieneś posiadać średnio zaawansowaną wiedzę z kategorii Front End. Przyda się również umiejętność poszerzania pojedynczych zagadnień na własną rękę, ponieważ wiele z poruszanych w tym kursie tematów można by zgłębiać godzinami. Nie zaszkodzi również podstawowa wiedza o JavaScript. Postaram się wprowadzić Cię w różne obszary CSSa potrzebne w codziennej pracy jako Front-End developer. Doświadczeni developerzy znajdą w tym kursie powtórkę najistotniejszych informacji na temat współczesnego CSSa, jak i ciekawe zagadnienia o których często się zapomina.
W tej lekcji będę mówił o zmiennych
czasowych które będziemy mogli przekazać do Jeffa skryptu aby tam ich używać to się
często przydaje zwłaszcza jeśli pracujemy przy mediach kuervas.
No i generalnie do tego przekładu użyłem
łeb paka bo po prostu łatwiej było mi to skonfigurować.
Chociaż już wolę nadmienić że te konfiguracje zmieniają się z każdą wersją
Szpaka i najlepiej po prostu odnosić się do dokumentacji dla danej wersji.
Niedawno wyszedł łeb Pack 5.0 no i
niestety konfigurację paska czwórki już nie działają dla PKP.
W związku z czym trzeba emigrować i tę konfigurację dostosowywać.
To co można zrobić
z pakietem.
To oczywiście możemy zadeklarować nasze zmienne czasowe tak jak byśmy to zrobili.
Normalnie jesteśmy w stanie w dowolnym pliku użyć takiej klauzuli Export.
Ta klauzula sprawi że Web Pack po konfiguracji wystawi nam te zmienne o
takiej wartości do CSS a pod taką nazwą możemy jej
oczywiście zagrażać czyli moglibyśmy sobie tutaj zrobić kolor
i zrobić zagęszczenie.
Z tym że tak czy siak
w JavaScript nie będziemy musieli się do tego odnosić poprzez C.
Obręcz i refleks kolos czyli tak czy siak w krypcie w obiekcie będziemy mieli
jakby spłaszczona strukturę.
Więc jak to zapisze pokaże jak to wygląda z poziomu skryptu.
Mamy tutaj obiekt i widzimy że kolor Blu to jest faktycznie wartość którą sobie
zdecydowaliśmy więc mamy jedno źródło danych zarówno dla CSS i JavaScript
o ile dla kolorów niekoniecznie jest to nam potrzebne o tyle dla break point.
Już często się przydaje.
Czyli jeśli
definiujemy na przykład.
Break point czyli refleks PR Small stawia tutaj powiedzmy już nie będzie w piksela.
Można byłoby to zrobić w ramach
ale powiedzmy że to będzie też w liceach 600 pikseli
br.
Medium no to powiedzmy
do 1024 pikseli i Br Large.
To będzie powiedzmy to.
Tysiąca sześciuset a czemu nie
napiszemy to.
Możemy te zmienne tutaj sobie eksportować czyli
break point.
Small.
I tutaj wpisujemy.
Naszą zmienną czyli br Small sprawdźmy jeszcze dobrze powiedziałem tak
pojedyncze zmienne rozdzielane za pomocą średniaków tak jak w zwykłym cs.
I tutaj robimy sobie odpowiednio medium
do publikowania kalek karetki można zrobić za pomocą skrótów klawiszowych komend na
Maku bądź ekwiwalentu na Windowsie czyli prawdopodobnie Control D.
No i tutaj robimy Large Large.
I tutaj te zmienne nam się wystawiły.
Mamy tutaj też nasze kolory które możemy w sumie w tym
momencie usunąć i sama wartość pikseli nie jest aż tak przydatna.
Dlatego możemy tutaj wstawić na przykład Maks
z wartością.
Zobaczymy czy to zadziała tutaj prawdopodobnie będzie trzeba.
Zrobić
interpelację.
Gdzieś tu popełniłem błąd.
Tak nie jesteśmy w stanie tego zrobić.
Jestem ciekawy jak to.
Możemy w tym momencie obejść.
Moll.
Cs. No oczywiście że nie jest.
Jeśli.
Oferujemy tylko na tym że generalnie da się też przekazać jakby pełną wartość.
Możemy to w tym momencie zignorować
napiszemy sobie po prostu troszkę więcej by to zrobić.
W każdym razie najważniejsza rzecz którą
trzeba zrobić to faktycznie konfiguracja chłopaka.
I akurat w tej wersji z której ja korzystam ja tutaj mam serwer który
ustalamy za pomocą polecenia chłopak serwer.
No i tutaj są całe te reguły które odpowiadają za to budowanie.
Najważniejsza część która faktycznie
włącza ten tryb eksport w tej wersji paka to jest import.
Tutaj musimy podać i Walią czyli wartość nie fałszywą po prostu.
Czyli jakbyśmy tutaj w Polsce przestały działać.
Ale możemy tutaj dać jedynkę albo tu i nam wtedy zadziała
i musimy dać jako kąpiel Tip i CSS i to jest ta nazwa właśnie tego dania.
Do dzieła skryptu zmiennych.
A jeśli to sobie tak eksportujemy no to
możemy to na przykład w naszym pliku indeks James użyć.
Czyli jeśli byśmy sobie tutaj
podpisali na przykład pod Windows Staples to co importować.
My sobie z tego pliku bezpośrednio.
No to jesteśmy w stanie w tym momencie zrobić sobie this.
Mamy tutaj ten nasz obiekt i jeśli chcielibyśmy np.
sprawić aby przy odwiedzania konkretnej rozdzielczości
coś w naszym krypcie się działo jakaś logika to możemy sobie stworzyć.
Jakąś mapę tych wartości
więc możemy sobie użyć tutaj globalnego obiektu window a na nim mecz media.
I tutaj możemy przekazać faktycznie
takiego Stinga jaki by pasował normalnie do Media kursów.
Czy jeśli wykorzystamy na przykład.
MEN.
600 pikseli.
I tutaj musimy zamknąć ten nawias w ten sposób.
No to faktycznie widzimy że jest or Falls czyli w tym momencie to pasuje no
bo faktycznie nasze okno jest większe niż 600 pikseli jakie sobie trochę skurczyły.
Poniżej tej 600 opcji i uruchomimy to ponownie.
No to mamy teraz ma czas Falls.
W związku z czym to nam nie pasuje
i moglibyśmy faktycznie używać tych Styrii które sobie wypracowaliśmy z Sasa żeby
stworzyć takie reguły czyli jeśli tutaj użyjemy kręgów to może troszkę większe.
I tutaj też troszkę większe używamy z treningów ustawiamy no i tutaj wartość z.
Naszego sektora czyli powiedzmy.
Jest kropka.
Break point Small.
Gilles.
Black Point Small.
Albo może medium medium.
I piszemy no to w tym momencie jest mały
ponieważ mamy minimalną szerokość 1024 piksele jak to oczywiście zmniejszymy
do jakiejś mniejszej rozdzielczości i uruchomimy to ponownie.
To będzie mecz w Polsce i to możemy użyć w
dowolnym framework aby tę wartość dynamicznie pobierać
i wyświetlać na przykład inne komponenty w zależności od
rozmiaru elementu bądź zmieniać ich opcje tak by miały się poprawnie.
I naprawdę zachęcam do eksportowa wartości
przynajmniej dla projektantów z CSS a do Java skryptu
oczywiście można też próbować w drugą stronę to robić.
Ale przede wszystkim nie możemy mieć tutaj
tego zjazdu między tym co definiujemy w naszych stylach a tym jakiej logiki
korzystamy na froncie z poziomu drzewa skryptu.
Jeśli musimy operować na danych portach.
Kod
Udostępnianie zmiennych do JS · 2 min
:export {
c-orange: $c-orange;
c-green: $c-green;
c-yellow: $c-yellow;
c-blue: $c-blue;
c-purple: $c-purple;
}webpack.config.js · 5 min
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
devServer: {
contentBase: path.join(__dirname, 'dist'),
port: 9000,
},
mode: 'development',
entry: ["./src/index.js"],
module: {
rules: [
{
test: /\.scss$/,
exclude: /\.module\.scss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: {
compileType: 'icss'
}
}
},
{
loader: 'sass-loader'
},
],
},
],
},
output: {
filename: "[name].js",
path: path.resolve(__dirname, "dist"),
publicPath: ""
},
plugins: [new HtmlWebpackPlugin({
template: 'src/index.html',
})]
};