CSS Modern dengan SASS

Bahasa: Jerman

CSS modern dengan Sass - Tutorial Praktis

Kamu selalu kesal karena tidak ada variabel dan perulangan di CSS? Hentikan saja! Pra-pemrosesan CSS seperti Sass menyediakan hal-hal seperti itu. Ini memungkinkan pembuatan kode CSS yang efisien. Selain Sass, tutorial ini juga akan membahas framework Compass yang populer, yang mengambil penggunaan Sass ke level yang lain. Pelajari dalam tiga jam kemungkinan yang disediakan oleh Sass dan Compass.

Berpikirlah menjadi master Sass dengan video latihan selama tiga jam ini yang dipandu oleh pengembang web Daniel Koch.
Tentukan variabel, buatlah mixin sendiri, bereksperimen dengan warna dan angka, dan gunakan Compass untuk membungkusnya.
Pelajari cara membuat CSS dengan efisien dan terapkan pengetahuan baru Anda untuk proyek-proyek di masa depan.

Langkah demi langkah menuju pengembangan CSS yang profesional. Jika CSS, maka modern dan dengan Sass - Daniel Koch akan menunjukkannya padamu!

detail

Dapat digunakan dengan:
Isi: 3 h Pelatihan video
Lisensi: pribadi dan komersial Hak penggunaan

Kategori

Desain web, CMS, & pengembangan

Dibuat dengan cinta:

Daniel Koch

CSS modern dengan Sass.

Gratis

CSS modern dengan Sass - 01 Pengenalan

Berkat pra-pemrosesan CSS, CSS dapat ditulis dengan lebih efektif. Apa itu pra-pemrosesan, jenis-jenisnya, dan mengapa pilihan jatuh pada Sass dalam urutan ini, ditunjukkan dalam video ini.

CSS modern dengan Sass - 02 Instalasi

Sebelum menggunakan Sass, Anda harus menginstalnya. Dan persyaratannya adalah Ruby. Keduanya - yaitu instalasi Ruby dan Sass - ditunjukkan dalam video ini. Setelah itu, Anda dapat langsung menguji apakah instalasi Sass berhasil.

CSS modern dengan Sass - 03 Kompilasi Mahir

CSS modern dengan Sass - 03 Kompilasi Terampil

Sass harus diubah menjadi file CSS agar benar-benar dapat digunakan. Berkat perintah Watch, Anda dapat dengan mudah mendeteksi perubahan pada file individu atau seluruh direktori.

Menggabungkan File CSS Modern dengan Sass - 04 File

Menggabungkan File dalam CSS Modern dengan Sass - 04.

Dengan @import, file SCSS dapat diimpor dan digabungkan. Apa hubungannya dengan garis bawah di awal nama file adalah salah satu aspek dari video ini.

Mendeklarasikan dan menggunakan variabel dalam CSS modern dengan Sass - 05

Mendeklarasikan dan menggunakan variabel CSS modern dengan Sass - 05.

Di Sass, ada kemungkinan untuk mendeklarasikan variabel. Konsep ini tidak tersedia dalam CSS konvensional, tetapi merupakan alat yang brilian dalam pengembangan stylesheet di Sass.

CSS modern dengan Sass - 06 Prinsip Penanaman (Nesting)

CSS modern dengan Sass - 06 Prinsip Nesting

Dengan penanaman Nesting, sintaks Sass dapat dijaga lebih ringkas daripada yang biasanya dalam CSS. Penanaman ini juga membantu Anda menulis kode dengan lebih terstruktur.

CSS modern dengan Sass - 07 Pewarisan Mahir dengan Extend

Penggunaan @extend memungkinkan Anda untuk meneruskan kumpulan properti CSS dari satu selektor ke selektor lain. Ini juga membantu untuk menjaga file Sass tetap ramping.

CSS modern dengan Sass – 08 Modul dengan selector placeholder

CSS modern dengan Sass - 08 Modul dengan selektor placeholder

Selektor placeholder memungkinkan definisi modul. Modularisasi ini memungkinkan pembagian sintaks Sass ke dalam blok logis yang dapat disertakan di berbagai tempat.

Mendefinisikan mixin dalam CSS modern dengan Sass - 09 Mixins

Mixins adalah fungsi yang memungkinkan proses kerja menjadi jauh lebih sederhana, misalnya. Dalam video ini, akan ditunjukkan cara membuat dan menggunakan Mixins sendiri.

CSS modern dengan Sass - 10 Selector Elternelement

CSS modern dengan Sass - 10 Selector dari Elemen Induk

Dengan selector yang dibahas dalam video ini, Anda dapat mengakses elemen induk dari sebuah elemen. Selector ini tidak ada dalam CSS dan oleh karena itu memberikan nilai tambah yang besar.

CSS modern dengan Sass - 11 Otomatisasi dengan Perulangan For

Pemograman CSS modern dengan Sass - 11 Automatisasi dengan Loop For

Sass memungkinkan penggunaan perulangan For. Ini berfungsi dengan sangat mudah di Sass dan misalnya dapat digunakan untuk mendefinisikan sistem grid kustom.

CSS modern dengan Sass - 12 loop each dan while.

CSS modern dengan Sass - 12 putaran dan perulangan While

Selain For-, di Sass juga dapat menggunakan perulangan Each- dan While. Cara menggunakannya untuk otomatisasi ditunjukkan dalam video ini.

CSS modern dengan Sass - 13 keputusan penting dengan if dan else

CSS modern dengan Sass - 13 keputusan kasus dengan if dan else

Dalam bahasa seperti PHP dan JavaScript, ada kemungkinan untuk merespons berbagai peristiwa menggunakan if dan else. Sesuatu seperti itu juga ada dalam Sass. Bagaimana cara menggunakannya, ditunjukkan dalam video ini.

CSS modern dengan Sass - 14 Operator Matematika

Anda dapat berhitung di Sass. Ini berguna misalnya dalam menentukan ukuran font. Namun, berkat operator yang sesuai, Anda juga bisa membangun sistem grid yang sangat individual.

CSS modern dengan Sass - 15 permainan warna

Tentu saja, warna-warna dapat didefinisikan dalam Sass. Sass juga jauh lebih maju daripada CSS konvensional di bidang ini. Berkat fungsi-fungsi yang sesuai, misalnya, warna dapat dimanipulasi dengan mudah.

CSS modern dengan Sass - 16 Kompas

Framework Compass memperluas kemungkinan Sass dengan sangat signifikan. Video pertama ini akan menunjukkan bagaimana kamu dapat menginstal dan menggunakan Compass.

CSS modern dengan Sass - 17 Compass dan CSS3.

Situs web proyek Compass adalah sarana informasi utama ketika berurusan dengan kerja menggunakan framework ini. Saya akan menunjukkan kepada Anda bagaimana Anda bisa bekerja dengan dokumen menggunakan fitur CSS3 dari Compass.

CSS modern dengan Sass - 18 Compass di Aksi Bullet dan Melihat Susy

CSS modern dengan Sass - 18 aksi bullet Compass dan melihat Susy.

Sebuah contoh menunjukkan betapa mudahnya menerapkan hal-hal dengan Compass. Pada akhir seri ini, juga akan diberikan pandangan tentang kerangka Sass alternatif. Susy menyediakan sistem grid yang ramping.

Detail tentang isi

CSS secara efisien - dengan Sass: mulailah tutorial praktis
Sass telah merevolusi pengembangan CSS, karena akhirnya dapat menulis kode CSS dengan efektif. Dalam waktu tiga jam dengan 18 pelajaran, Anda akan mempelajari segala sesuatu yang penting tentang Sass dan kerangka Sass Compass.

Instalasi lingkungan pengembangan Sass

Sebelum Anda memulai perjalanan Sass dalam tutorial CSS, langkah pertama adalah instalasi. Namun jangan khawatir - ini sangat mudah. Ruby dan beberapa perintah di baris perintah sudah cukup, dan Anda akan menjadi pemilik lingkungan pengembangan Sass yang bangga. Bagi siapa saja yang selama ini ragu untuk menginstal Sass, akan dipandu langkah demi langkah melalui instalasi di sini. Tes pertama akan menunjukkan versi Sass yang diinstal.

Langkah-langkah pertama dengan struktur proyek yang khas

Selanjutnya, langkah berikutnya adalah langkah-langkah pertama: Mari kita mulai dengan Sass! Setelah melihat sintaksis secara sekilas, langkah-langkah bahasa dasar akan diikuti. Anda akan belajar mengenai variabel, melihat struktur proyek yang khas, dan dengan cepat memahami Sass.

Pengembangan: Loop & Statements If

Dengan persiapan ini, Anda kemudian melanjutkan ke pengembangan profesional: Yang membuat Sass begitu istimewa adalah hal-hal yang hampir mirip dengan bahasa skrip sejati seperti JavaScript. Karena di Sass juga dapat mendefinisikan loop dan menggunakan pernyataan If. Hal-hal ini adalah prasyarat bagi penguasaan Mixins di Sass - yang merupakan fungsi kuat yang secara signifikan memudahkan pekerjaan Anda dengan Sass, akhirnya dengan CSS.

Compass: Meringankan pekerjaan dengan CSS

Puncak dari pelatihan ini adalah Compass. Ini mengangkat pengembangan Sass ke level yang berbeda, karena kerangka kerja Sass ini menawarkan berbagai alat dan fungsi yang secara signifikan memudahkan pekerjaan dengan CSS sekali lagi.

Yang Anda Pelajari dalam Tutorial CSS dan Sass

Anda akan belajar secara bertahap tentang fungsi-fungsi Sass, dari awal hingga alat profesional, hingga bekerja dengan Compass. Dengan demikian, Anda akan mendapatkan apa yang saat ini dimungkinkan dan dapat segera menerapkan pengetahuan Anda. Menulis CSS tidak pernah begitu efisien sebelumnya!