În acest curs, veți învăța elementele de bază ale Sass. Vom începe cu o scurtă prezentare generală a ceea ce este Sass, împreună cu ceea ce este necesar pentru a încorpora Sass în mediul dumneavoastră. De asemenea, vom configura un compilator Sass în Visual Studio Code. Veți afla despre variabilele, hărțile, imbricarea, funcțiile, mixurile, extinderea și operațiunile Sass.
În cele din urmă, vom începe de la zero cu un proiect din lumea reală (site-ul Portofoliu) folosind Sass. Vom parcurge pas cu pas fiecare parte, iar la final, vom implementa site-ul.
🔗 Cod proiect: https://github.com/codeSTACKr/portfolio-sass
🎥 Tutorial de la codeSTACKr. Urmăriți canalul lor de YouTube: https://www.youtube.com/codeSTACKr
⭐️ Conținutul cursului ⭐️
⌨️ (0:00:00) Introducere
⌨️ (0:00:58) Ce este Sass?
⌨️ (0:01:24) Cerințe
⌨️ (0:02:15) Instalați/Configurați extensia Live Sass Compiler VS Code
⌨️ (0:04:02) Structura folderului / Sintaxa Sass
⌨️ (0:08:06) Variabile
⌨️ (0:10:03) Hărți
⌨️ (0:03:00) Cuibărire
⌨️ (0:16:54) Parțiale
⌨️ (0:19:40) Funcții
⌨️ (0:21:30) Mixin Exemplul 1
⌨️ (0:24:26) Mixin Exemplul 2
⌨️ (0:28:00) Mixin Exemplul 3
⌨️ (0:30:20) Extindeți
⌨️ (0:32:05) Operații matematice
⌨️ (0:33:49) Cum să aflați mai multe (Documentare)
⌨️ (0:34:02) Exemplu din lumea reală de la zero (site de portofoliu)
⌨️ (0:34:38) index.html
⌨️ (0:40:35) Configurare minunată a fontului
⌨️ (0:41:29) main.scss / _config.scss
⌨️ (0:48:18) _home.scss
⌨️ (0:52:55) Transition Ease Mixin
⌨️ (0:54:24) Funcția de culoare a textului
⌨️ (0:57:10) _menu.scss
⌨️ (1:02:38) main.js
⌨️ (1:06:08) Meniu cont.
⌨️ (1:19:38) despre.html
⌨️ (1:23:51) _despre.scss
⌨️ (1:30:37) projects.html
⌨️ (1:35:05) _projects.scss
⌨️ (1:43:57) contact.html
⌨️ (1:47:09) _contact.scss
⌨️ (1:49:56) _responsive.scss
⌨️ (2:01:35) Implementați pe paginile Github
✔️ codeSTACKr pe Twitter: https://twitter.com/codeSTACKr
✔️ codeSTACKr pe Instagram: https://instagram.com/codeSTACKr
✔️ site-ul web codeSTACKr: http://codeSTACKr.com
—
Învățați să codificați gratuit și obțineți un job de dezvoltator: https://www.freecodecamp.org
Citiți sute de articole despre programare: https://medium.freecodecamp.org
Cursuri interesante:
- Învață Bootstrap creând o temă de administrare personalizată – Tutorial intermediar
- Tutorial aplicație web – JavaScript, Mobile First, Accesibilitate, Date persistente, Sass
- Curs rapid MATLAB pentru începători
- Învață Bootstrap 5 și SASS prin construirea unui site web de portofoliu – Curs complet
- Learn Webpack – Tutorial complet pentru începători
- Construiește un site simplu cu HTML, CSS, JavaScript – Curs pentru începători
- Python Django Web Framework – Curs complet pentru începători
- Arhitectură bazată pe evenimente cu React și FastAPI – Curs complet
- Învață Supabase (Firebase Alternative) – Tutorial complet pentru începători
- CSS Анимация display block • Директива starting-style и свойство transition-behavior