rumah > Windows 10 > Apa preprosesor sass. Sintaks SASS. Sintaks - Sass, Scss


Apa preprosesor sass. Sintaks SASS. Sintaks - Sass, Scss




Terjemahan artikel: Panduan Mutlak Pemula untuk Sass.
Andrew Chalkley.

Apa itu SASS?

KELANCANGAN adalah singkatan dari Stylesheet yang Mengagumkan Secara Sintaktis adalah metalanguage berbasis CSS yang namanya dapat diterjemahkan sebagai "CSS dengan sintaks yang sangat baik", dirancang oleh Hampton Catlin.

Ini adalah alat untuk menyederhanakan proses pembuatan gaya CSS, yang sangat menyederhanakan tugas pengembangan dan pemeliharaan kode selanjutnya.

Pernahkah Anda, misalnya, untuk menyenangkan klien tertentu yang ragu-ragu, harus memeriksa seluruh konten file gaya untuk menemukan nilai HEX warna tertentu untuk menggantinya dengan yang lain? Atau beralih ke aplikasi kalkulator yang tidak selalu tersedia untuk menghitung lebar kolom untuk template multikolom?

SASS memiliki alat yang akan menyelamatkan Anda dari rutinitas seperti itu. Ini dapat dikaitkan variabel, mixin, bersarang Dan pewarisan pemilih.

Pada prinsipnya, kode SASS mirip dengan CSS, tetapi fitur pembeda utama yang langsung menarik perhatian Anda adalah tidak adanya titik koma setelah setiap pasangan nilai properti dan kurung kurawal.

Mari ambil cuplikan kode CSS berikut sebagai contoh:

#iklan_pencakar langit
{
tampilan: blok;
lebar: 120px
tinggi: 600px;
}

#leaderboard_ad
{
tampilan: blok;
lebar: 728px;
tinggi: 90px;
}

Yang setara dengan SASS ini:

#iklan_pencakar langit
tampilan: blok
lebar: 120px
tinggi: 600px

#leaderboard_ad
tampilan: blok
lebar: 728px
tinggi: 90px

Di SASS, untuk menunjukkan kumpulan fragmen kode, interval (inden di awal baris berikutnya) sama dengan dua spasi digunakan. ( *Di cuplikan terakhir, untuk kejelasan, saya menyorot ruang-ruang ini dengan latar belakang merah.)

Sekarang setelah kita memiliki gambaran tentang bagaimana kode SASS dibuat, mari kita lihat masalah yang membuatnya demikian. bagus sekali.

Variabel.

Di SASS, untuk mendeklarasikan variabel, Anda harus mengawali namanya dengan simbol dolar $ . Dan jika nama variabel Anda, misalnya, adalah red , maka setelah titik dua kita dapat menentukan nilai berikut yang sesuai dengannya:

SASS menyediakan fungsi bawaan seperti darken dan lighten yang dapat digunakan untuk mengubah nilai dari jenis variabel ini.

Jadi, pada contoh berikut, warna font pada paragraf juga akan berwarna merah, tetapi lebih gelap dari yang digunakan pada heading h1:

$merah: #FF4848
$fontsize: 12px
h1
warna: $merah

P
warna: gelap ($merah, 10%)

Anda dapat melakukan operasi aritmatika, seperti penjumlahan dan pengurangan, pada variabel, selama nilai yang digunakan untuk ini memiliki tipe data yang sama. Jika, misalnya, kita perlu menerapkan warna yang lebih gelap, maka yang perlu kita lakukan hanyalah mengurangi nilai warna yang sudah digunakan dalam kode yang disimpan dalam variabel, nilai HEX heksadesimal kecil yang sama dengan, katakanlah, #101 . Hal yang sama berlaku untuk kasus ketika perlu mengubah nilai ukuran font, misalnya, menambahnya 10 piksel, untuk ini kami cukup menambahkan piksel yang hilang:

p.penambahan_dan_pengurangan
warna: $merah - #101
ukuran font: $fontsize + 10px

Bersarang.

Ada dua jenis nesting di SASS.

Sarang pemilih.

Ini adalah tipe nesting pertama, yang mirip dengan apa yang digunakan untuk menyusun kode HTML:

$fontsize: 12px

pembicara
.nama
jenis huruf:
berat: tebal
ukuran: $fontsize + 10px
.posisi
jenis huruf:
ukuran: $fontsize

Jika Anda melihat kode CSS yang dihasilkan, komentar apa pun akan menjadi berlebihan. Dengan menyarangkan kelas .name di dalam kelas .speaker ( *dengan cara yang sama - menggunakan dua spasi di awal baris berikutnya) pemilih CSS .speaker.name dibuat. Hal yang sama berlaku untuk nama kelas .position berikut, setelah deklarasi properti untuk pemilih pertama, yang bersarang untuk membentuk pemilih .speaker.position kedua:

Nama pembicara(
font-berat: tebal;
ukuran font: 22px; )
.speaker.posisi(
ukuran font: 12px; )

Properti bersarang.

Jenis penyatuan kedua memungkinkan Anda menyusun properti dengan awalan tunggal (* font-family , font-size , font-weight , atau border-style , border-color , border-radius , dll.):

$fontsize: 12px

pembicara
.nama
jenis huruf:
berat: tebal
ukuran: $fontsize + 10px
.posisi
jenis huruf:
ukuran: $fontsize

Pada contoh di atas, kami menggunakan deklarasi induk, properti generik font: , dan kemudian pada baris baru, setelah indentasi dua spasi, kami menentukan bagian kedua dari properti, yang biasanya setelah tanda hubung.

Artinya, jika kita menentukan properti font:, pada baris berikutnya, setelah dua spasi, properti weight:, maka hasilnya akan setara dengan properti font-weight yang terkenal.

Nama pembicara(
font-berat: tebal;
ukuran font: 22px; )
.speaker.posisi(
ukuran font: 12px; )

Modul ini menyediakan dukungan untuk semua properti yang mengandung tanda hubung.

Bersarang seperti ini adalah cara yang bagus untuk mengatur dan menyusun kode CSS Anda dan menghindari pengulangan yang tidak perlu. ( *KERING- "Jangan Ulangi Sendiri" - "Jangan ulangi sendiri." Situasi di mana CSS memformat elemen tertentu berulang dan/atau mengganti gayanya di tempat lain, membuat kode lebih sulit untuk dibaca dan dipelihara).

Mixin.

Fitur hebat lainnya dari SASS adalah mixin.

Mixin memungkinkan Anda untuk menggunakan kembali seluruh potongan kode SASS dan bahkan memberikan argumen kepada mereka jika perlu. Dan yang terpenting, Anda juga dapat menentukan nilai awalnya.

Untuk menentukan mixin, gunakan kata kunci @mixin, yang secara khusus dicadangkan di SASS, diikuti dengan nama mixin pilihan Anda. Jika ada kebutuhan untuk argumen, maka cantumkan dalam tanda kurung. Nilai yang ditetapkan untuk argumen default ditentukan saat mixin ditentukan, dipisahkan oleh titik dua. ( *Dengan kata lain, mixin adalah fitur CSS.)

Prosedur untuk menggunakan mixin sangat sederhana - setelah kata kunci @include, tentukan nama mixin yang diinginkan dan cantumkan parameter yang diperlukan dalam tanda kurung, jika ada.

Lihatlah contoh berikut:

@mixin border-radius($amount: 5px) /* menentukan mixin */
-moz-border-radius: $jumlah
-webkit-border-radius: $jumlah
border-radius: $jumlah

h1 /* gunakan mixin */
@sertakan border-radius(2px)

pembicara
@sertakan radius batas

SASS ini akan dikonversi ke CSS berikut setelah dikompilasi:

h1(
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
batas-radius: 2x )

pembicara (
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px )

Untuk judul h1, kami secara eksplisit menetapkan nilai radius sudut perbatasan, tetapi untuk elemen dengan nama kelas .speaker kami tidak melakukannya, jadi nilai default diambil 5px.

Warisan pemilih.

Lain bagus sekali fitur sintaks SASS adalah kemampuan penyeleksi untuk mewarisi semua gaya yang ditentukan untuk penyeleksi lain. Untuk memanfaatkan fitur ini, Anda perlu menggunakan kata kunci @extend diikuti oleh pemilih yang propertinya ingin Anda warisi:

h1
perbatasan: 4px solid #ff9aa9

pembicara
@ perpanjang h1
lebar batas: 2px

Apa yang akan dikompilasi ke:

h1,.pembicara(
batas: 4px solid #ff9aa9; )

pembicara (
lebar batas: 2px; )

(*Perhatikan batas deklarasi: 4px solid #ff9aa9; tidak diulang dalam aturan dengan pemilih .speaker, melainkan pemilih kedua ditambahkan ke aturan pertama. Dengan kata lain, tidak ada duplikasi kode.)

Coba SASS beraksi.

On line.

Anda dapat berkenalan dengan SASS online tanpa menginstal modul terlebih dahulu di komputer lokal Anda.

Namun sebelum Anda mulai bereksperimen, pilih opsi di bagian bawah halaman "Indentasi Sintaks".

Diinstal di PC.

SASS sendiri merupakan aplikasi (gem) dari platform Ruby. Oleh karena itu, untuk menginstalnya, Anda tidak dapat melakukannya tanpa terlebih dahulu menginstal platform itu sendiri dan pengelola paket dari bahasa pemrograman RubyGems ini. Setelah berhasil menginstal platform itu sendiri dan manajernya, jalankan perintah berikut di konsol:

instal permata sass

Modul SASS dapat digunakan sebagai alat baris perintah untuk mengonversi file SASS Anda menjadi file CSS.

Ini dapat dilakukan, misalnya, dengan mengetikkan perintah berikut:

sass --tonton sass_folder:stylesheets_folder

Di mana sass_folder adalah jalur ke folder yang berisi file SASS (yaitu, dengan ekstensi .sass), dan stylesheets_folder adalah jalur ke folder tempat file CSS yang dihasilkan akan disimpan setelah kompilasi. Perintah --watch memberi tahu modul bahwa ia harus mengawasi ( watch ) untuk setiap perubahan dalam folder yang ditentukan dan, jika ada, setelah menyimpannya, ubah file .sass asli menjadi file .css yang setara.

Balikkan konversi CSS ke SASS.

Anda dapat mulai menggunakan SASS dengan mengonversi gaya yang digunakan dalam proyek Anda yang sudah ada ke format ini menggunakan utilitas "sass-convert".

Untuk melakukan ini, di baris perintah, masukkan jalur ke folder yang isinya ingin Anda konversi ( *yaitu, cukup buka direktori yang diinginkan di mana file sumber berada). Kemudian jalankan utilitas yang disebutkan di atas dan berikan parameter berikut:

sass-convert --dari css --ke sass –R.

Di mana flag -R menentukan cara rekursif untuk melakukan operasi. Dan titik berikutnya. berarti file .sass yang dihasilkan akan disimpan di direktori saat ini. ( *Jika perlu, alih-alih titik, Anda dapat menentukan jalur ke folder tempat Anda ingin menyimpan file yang dihasilkan.)

Halo teman teman!

Ini adalah panduan terperinci untuk preprocessor Kelancangan untuk pemula. Di sini kita akan mengenal preprosesor Sass, kelebihannya, sintaksisnya, dan mempertimbangkan kemungkinan penggunaannya dengan contoh.

Dingin

Sematkan

Anda dapat mengunduh semua contoh dan proyek yang disesuaikan untuk pelajaran ini dari situs web kami.

Kelancangan adalah salah satu preprosesor CSS yang paling maju dan stabil, serta salah satu preprosesor paling populer di kalangan profesional.

Manfaat Sas

  • Kompatibilitas dengan berbagai versi CSS, berkat itu Anda dapat menggunakan pustaka CSS apa pun dalam proyek Anda;
  • Sejumlah besar berbagai fungsi untuk setiap kesempatan hidup. Beberapa praprosesor CSS dapat membanggakan fungsionalitas yang begitu kaya;
  • Sass adalah salah satu praprosesor CSS tertua, yang telah menyerap banyak pengalaman selama bertahun-tahun keberadaannya;
  • Peluang besar untuk menggunakan kerangka kerja Sass yang membuat hidup lebih mudah bagi pengembang. Salah satu kerangka ini adalah Bourbon, yang kami gunakan di beberapa edisi tata letak Jedi saat menulis Sass;
  • Sintaksis. Anda dapat memilih salah satu dari dua sintaks yang paling cocok untuk Anda - disederhanakan (SASS) dan diperluas seperti CSS (SCSS).

Ketika saya pertama kali berkenalan dengan preprosesor CSS, saya, seperti banyak pengembang web pemula lainnya, tidak sepenuhnya memahami ide penggunaan preprosesor CSS. Mengapa membuat lapisan tambahan, menggunakan beberapa alat, mempersulit CSS, pikir saya. Namun seiring waktu, saya mulai memahami bahwa menulis CSS setiap hari menjadi siksaan, rutinitas abu-abu, banyak tindakan harus diulang, penyeleksi, properti, dan bahkan seluruh blok kode CSS disalin untuk mencapai hasil yang diinginkan. Hari ini, dengan menggunakan contoh, saya akan menunjukkan kepada Anda bagaimana Anda dapat menyederhanakan pekerjaan Anda menggunakan praprosesor Sass, mendiversifikasi pengembangan Anda, dan bahkan bersenang-senang menulis beberapa fungsi yang kurang lebih kompleks.

Pengaturan lingkungan

Sebagai lingkungan untuk bekerja dengan Sass dalam tutorial ini, seperti dalam tutorial kami yang lain, kami akan menggunakan pengelola tugas Gulp versi Sass ( gulp-sass). Untuk menggunakan versi Ruby asli atau mengkompilasi Sass dengan perangkat lunak khusus, Anda dapat membaca petunjuknya di. situs web. Pelajaran ini sebagian besar praktis, jadi kami tidak akan memikirkan opsi yang memungkinkan untuk menghubungkan ke proyek, kami akan menghubungkan Sass dengan cara yang paling populer menggunakan Gulp.

Pastikan Anda menginstal Node.js dan Gulp versi terbaru. Jika Node.js belum diinstal, unduh dan instal. Setelah menginstal Node.js, instal gulp dengan perintah "npm i -g teguk"(Jendela) atau "sudo npm i -g menelan"(Linux,OS X). Membaca: .

npm i --save-dev gulp gulp-sass

Var gulp = membutuhkan("gulp"), // Sertakan Gulp sass = membutuhkan("gulp-sass"); // Sertakan paket Sass gulp.task("sass", function() ( // Buat tugas "sass" return gulp.src(["sass/**/*.sass", "sass/**/*.scss "]) // Dapatkan source.pipe(sass((outputStyle: "expanded")).on("error", sass.logError)) // Konversikan Sass ke CSS dengan gulp-sass .pipe(gulp.dest(" css")) // Unggah hasilnya ke folder css )); gulp.task("watch", function() ( gulp.watch(["sass/**/*.sass", "sass/**/*.scss"], ["sass"]); // Menonton di belakang file sass di folder sass)); gulp.task("default", ["watch"]);

Perhatikan baris 6 - di sini kami menggunakan salah satu gaya keluaran di file yang dihasilkan: bersarang- bersarang, secara default; diperluas- dikerahkan; kompak- kompak, ketika pemilih dan propertinya dalam kurung kurawal ditampilkan dalam satu baris; terkompresi- terkompresi. Selain itu, karena pengolahan .on("kesalahan", sass.logError) jika terjadi kesalahan, kita tidak perlu memuat ulang perintah jalankan Gulpfile dan kita akan melihat baris mana dari file Sass yang memiliki kesalahan. Dalam contoh, saya akan menggunakan gaya keluaran diperluas untuk kejelasan.

Anda harus memiliki struktur proyek berikut di sistem file Anda:

  • proyek saya/
    • css/
      • umum.css
    • kelancangan/
      • umum.sass
    • node_modules/
    • gulpfile.js
    • package.json

Kami memulai eksekusi Gulpfile dengan perintah meneguk di terminal folder proyek.

Di sini kami mengambil semua file Sass dari direktori kelancangan/ proyek Anda dan unggah hasil CSS yang sudah selesai ke folder css/. Selain itu, di sini kami membuat observasi jam tangan untuk perubahan pada file Sass dan kompilasi otomatis ke CSS, jika perubahan tersebut terjadi. File css yang dihasilkan disertakan dalam tata letak.

Jika ada sesuatu yang Anda tidak mengerti tentang pengaturan paket Gulp dalam contoh ini, baca manual Gulp.

Setelah lingkungan kita diatur dan Sass berhasil dikonversi ke CSS saat menyimpan file *.sass di direktori kelancangan/, Anda dapat melanjutkan belajar dengan aman dan mengikuti contoh yang akan kami analisis hari ini dalam praktik.

Sintaks Sass

Ada 2 cara untuk menulis Sass, 2 sintaks: SASS dan SCSS. Ejaan tertua dari Sass adalah sintaks lekukan. Ini adalah ejaan yang akan kita gunakan dalam pelajaran kita. Ekstensi file untuk sintaks tersebut adalah *.kelancangan. Opsi kedua adalah sintaks, memperluas sintaks CSS, CSS yang lancang. SCSS ditulis seperti CSS biasa, tetapi diperluas dengan fitur Sass tambahan. Ekstensi file dengan sintaks SCSS - *.scss.

Sangat penting! Sintaks indentasi mengharuskan properti bersarang untuk diindentasi dengan sangat hati-hati, dan jika Anda mendapatkan kesalahan saat menjalankan Gulp atau kesalahan implisit tanpa menentukan baris di konsol, kemungkinan besar kesalahan ada di indentasi yang salah. Detail penting lainnya - jika Anda menggunakan tab sebagai indentasi, kompiler akan memberikan kesalahan saat mencoba mengonversi Sass, yang selain tab, juga menggunakan spasi sebagai indentasi. Entah Anda hanya menggunakan tab atau spasi saja.

Sintaks SASS dan SCSS:

SASS - Sintaks Indentasi SCSS - sintaks ekstensi
$font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color $font-stack: Helvetica, sans-serif; $warna primer: #333; tubuh ( font: 100% $font-stack; color: $primary-color; )

Selain aturan ejaan dasar (kurung kurawal, titik koma di akhir baris), SASS dan SCSS juga berbeda dalam penulisan beberapa fungsi. Jadi berhati-hatilah saat menggunakan contoh apa pun dari Internet, periksa sintaks mana yang digunakan. Jika contoh yang cukup besar dari Internet dalam gaya SCSS, dan proyek Anda ditulis dalam SASS, Anda dapat mengimpornya ke file utama tanpa mengubah sintaks dan ekstensi file menggunakan arahan @impor, misalnya, jika Anda mengunduh file carousel.scss, lalu Anda dapat menghubungkannya ke main.sass rangkaian @import "korsel". Anda juga dapat melakukan sebaliknya saat Anda perlu mengimpor file *.sass ke dalam file main.scss. Dalam contoh Github kami, kami mengimpor semuanya _x.x.sass file menjadi satu umum.sass, di mana x.x adalah nomor judul contoh dari artikel ini.

Kami akan menggunakan sintaks indentasi.

1. Perluas CSS dengan Sass

1.1 Aturan bersarang

Sass memberi pengembang peluang besar untuk menyusun aturan CSS di dalam yang lain, sehingga mengurangi waktu untuk menulis/menyalin penyeleksi panjang dan membuat kode lebih terstruktur, dengan hierarki yang jelas.

1.2 Mengikat pemilih induk

Jika Anda ingin memperluas pemilih tanpa membuat aturan baru, Anda dapat mengikat pemilih tambahan ke pemilih yang dibuat sebelumnya menggunakan tanda & . Secara lahiriah, ini terlihat seperti membuat pemilih anak dalam hierarki, tetapi menggunakan & , kami memperluas pemilih induk, bukan membuat pemilih turunan.

Perhatikan aturannya tubuh.firefox &, yang memungkinkan kita mendapatkan rantai baru dari elemen apa pun ke elemen saat ini, jika disetel di bagian akhir & .

Selain itu, pengikatan induk dapat digunakan untuk membuat pemilih majemuk:

1.3 Properti terlampir

Untuk kenyamanan, Anda dapat membagi sufiks namespace properti menjadi lampiran. Misalnya, batas atas, batas-dasar, batas-kiri, batas-kanan memiliki batang yang sama batas dan dapat dipecah menjadi sarang sebagai berikut:

1.4 Pemilih pola

Kadang-kadang muncul situasi ketika beberapa elemen pada halaman menggunakan basis CSS yang sama, kumpulan properti yang sama yang hanya dikhususkan untuk mereka. Aturan dasar CSS ini dapat diformat sebagai pemilih wildcard untuk digunakan di banyak tempat di Sass. Pemilih template disimpulkan menggunakan direktif @memperpanjang.

2.SassScript

SassScript memungkinkan Anda memperluas kemampuan Sass secara signifikan melalui penggunaan variabel pengguna, aritmatika, dan fungsi lainnya. SassScript dapat digunakan untuk secara otomatis menghasilkan pemilih dan properti baru.

2.1 Variabel dalam Sass

Sangat keren untuk dapat menentukan variabel yang dapat digunakan di mana saja di file Sass Anda. Warna, nilai default, satuan, semua ini dapat dimasukkan ke dalam variabel dan digunakan di masa mendatang. Variabel didefinisikan seperti ini: $nama: nilai.

2.2 Operasi dengan angka dan string + interpolasi

Sass memungkinkan untuk menggunakan operasi aritmatika standar pada angka, seperti penjumlahan (+), pengurangan (-), pembagian (/), dan modulo (%). operator perbandingan (<, >, <=, >=, ==, !=) juga didukung untuk angka.

Selain itu, Sass memiliki kemampuan untuk menggabungkan (join) string.

Seperti yang kita lihat dari contoh $jumlah: 10 + 20/2, prioritas diamati dalam kinerja operasi aritmatika - pembagian pertama, lalu penjumlahan. Tanda kurung dapat digunakan untuk menentukan urutan operasi, seperti dalam matematika. Perhatikan bahwa saat menambahkan 12px + 8px, kita akan mendapatkan 20px.

Perhatikan juga baris 2 dan 9, di sini kita menggunakan interpolasi untuk menempatkan nilai dinamis di mana saja di file Sass, termasuk di mana kita memiliki nama properti, nama pemilih, atau baris apa pun.

Interpolasi mendapatkan nilai baru menggunakan yang lain.

Penggunaan interpolasi yang paling umum di Sass adalah untuk mendapatkan nilai baru untuk suatu variabel dengan "mengintegrasikan" ke dalam nilai variabel lain, melalui konstruk #{} , Misalnya:

Anda tidak bisa begitu saja mengambil dan menempelkan variabel ke dalam string tanpa menggunakan interpolasi, seperti yang dapat Anda lakukan di PHP, misalnya, dalam tanda kutip ganda. Pastikan untuk menggunakan interpolasi ke variabel.

2.3 Operasi dengan warna

Warna dalam Sass dapat ditambahkan, dikurangi, dibagi, dan dikalikan. Semua operasi aritmatika dilakukan untuk setiap warna secara terpisah: merah, hijau, dan biru.


Harap perhatikan bahwa saat menambahkan warna rgba, parameter opasitas terakhir 0,75 tidak boleh berbeda dari yang lain dalam ekspresi, jika tidak, kesalahan penambahan akan terjadi. Sebagai gantinya, Anda dapat menyesuaikan saluran alfa rgba menggunakan mengaburkan Dan transparan atau kontrol opasitas warna HEX, melalui fungsi rgba.

3. Arahan dan aturan

3.1 @impor

Anda dapat mengimpor file Sass Anda kelancangan, scss Dan css file menggunakan direktif @impor, sementara semua mixin dan variabel akan berfungsi di file utama tempat impor dilakukan.

@import akan berfungsi seperti CSS normal @import jika:

  • hadir di jalur file http://;
  • file tersebut dipanggil melalui url();
  • atau ada parameter media yang di impor.

Agar file lain dapat diimpor sepenuhnya ke file Sass utama, ekstensi file harus *.kelancangan, *.scss atau *.css.

Mari kita lihat beberapa contoh.

File-file berikut diimpor tidak akan:

File-file berikut akan impor:

Perhatian! Dalam versi baru gulp-sass untuk mengimpor file CSS ke Sass, Anda harus menentukan ekstensi .css

Dimungkinkan untuk mengimpor beberapa file, dipisahkan dengan koma: @import "tajuk", "media".

File yang dimulai dengan garis bawah disebut fragmen dan tidak memerlukan garis bawah dan perluasan saat mengimpor. Misalnya file _header.sass dapat diimpor seperti ini: @import "tajuk".

Perhatikan bahwa impor terjadi pada titik di mana Anda menentukan arahan @impor. Oleh karena itu, dimungkinkan untuk melakukan impor bersarang di tempat yang diperlukan:
#main @import "contoh"

3.2 @at-root

Pengarahan @at-root memunculkan aturan yang terkandung di dalamnya ke root, membatalkan rantai dari induknya. Semuanya sederhana di sini:

Kami belum mempertimbangkan semua arahan yang ada di Sass, tetapi hanya yang paling banyak digunakan dalam praktik. Jika Anda tertarik untuk mempelajari lebih lanjut tentang arahan Sass, lihat dokumentasinya.

4. Ekspresi

Sass mendukung penggunaan ekspresi dan fungsi untuk berbagai kondisi, mengimplementasikan loop, dan sebagainya.

4.1 Arahan @if()

Pengarahan @jika() memungkinkan Anda untuk mengeksekusi SassScript dengan kondisi tertentu dan memiliki sintaks berikut:

4.2 Arahan @for

@untuk merender blok dengan gaya beberapa kali. Anda dapat mengatur variabel penghitung saat dijalankan.

Anda dapat menentukan melalui alih-alih ke jika Anda ingin beralih dari 1 ke 11 inklusif, dan bukan hanya hingga 10, seperti pada contoh.

4.3 Arahan @each

Jika Anda ingin mengulangi daftar nilai, bukan hanya angka, Anda dapat menggunakan arahan @setiap:

4.4 Direktif @while

@ketika siklus melalui blok gaya sementara ekspresi adalah BENAR.

5. Campuran

Mixin- blok kode Sass (atau mixins-templates) yang dapat mengambil argumen (opsional) dan memungkinkan Anda memperluas kemungkinan gaya penulisan secara signifikan dan mengurangi waktu yang dihabiskan untuk menerapkan jenis aturan yang sama dan bahkan seluruh blok CSS. Ini seperti fungsi yang dapat mengambil argumen, melakukan banyak pekerjaan, dan menghasilkan hasil tergantung pada parameter masukan.

Mixin dideklarasikan dengan direktif @mixin, setelah deklarasi harus ditentukan Nama mixin. Dipanggil oleh arahan mixin @termasuk, yang mengambil nama mixin dan argumen yang akan diteruskan, jika ada.

Teman-teman, kami telah meninjau fitur-fitur utama Sass, yang cukup untuk pekerjaan yang bermanfaat dengan gaya situs CSS. Beberapa arahan dan fitur tidak disertakan dalam panduan ini, tetapi jika Anda tertarik mempelajari semua fitur Sass, ini akan berguna.

Saya akan segera menjawab pertanyaan - bagaimana cara bekerja dengan gaya Sass di situs yang sudah jadi, apakah Anda benar-benar perlu mengedit CSS yang sudah jadi dan mengunggahnya melalui FTP? Tidak, Anda tidak bisa melakukan itu. Anda harus memiliki salinan lokal dari gaya Sass Anda atau bahkan seluruh situs dan menyebarkan (mengunggah) melalui gaya siap pakai FTP setelah menyelesaikan pekerjaan. Untuk ini, Anda bisa menggunakan paket Gulp vinil-ftp. Atau atur lingkungan Sass di server Anda untuk mengompilasi file yang diunggah melalui FTP/sFTP.

Halo semua! Seberapa cepat waktu berlalu. Saya bahkan tidak memperhatikan bagaimana saya beralih dari gaya penulisan dari Css biasa ke preprosesor Sass. Tapi saya tidak mengerti sebelumnya - Sass macam apa itu, untuk apa, ini mungkin untuk pro tata letak yang sangat canggih. Ya, penggunaan preprosesor adalah langkah ke level baru dalam pengembangan web, tetapi tidak ada yang mengerikan dan sulit di sini, dan Anda akan melihatnya sendiri dengan membaca artikel ini sampai akhir.

Jadi, apa kelebihan preprocessor dan khususnya Sass? Saya akan langsung mengatakan bahwa ada yang lain, seperti Less, Stylus, dll. Semuanya bekerja dengan prinsip yang sama, tetapi masing-masing memiliki karakteristiknya sendiri. Sass telah mendapatkan popularitas besar di kalangan profesional, akibatnya pembelajaran menjadi sangat disederhanakan. Hanya saja, semakin populer teknologinya, semakin besar komunitasnya dan semakin luas dokumentasinya.

Preprosesor dirancang untuk menyelamatkan pengembang dari sebagian besar tugas rutin saat menulis kode, sehingga meningkatkan kecepatan dan kualitas pekerjaan. Selain preprosesor CSS, ada juga preprosesor HTML, seperti Pug (Jade).

Struktur artikel

Dokumentasi

Pengembang Sass adalah orang Prancis Hugo Giraudel, yang telah tinggal di Jerman sejak waktu tertentu. Secara alami, dokumentasinya dalam bahasa Inggris, tetapi saya pribadi memiliki pemahaman yang baik tentangnya (penting untuk mengetahui bahasa Inggris teknis). Tapi ada juga terjemahan ke dalam bahasa Rusia. Saya tetap akan merekomendasikan versi bahasa Inggris, ini untuk membiasakan diri dan belajar bahasa Inggris lebih dalam. Tapi bahasa Rusia juga tidak lebih buruk.

  • Dokumentasi bahasa Inggris: http://www.sass-lang.com
  • Dokumentasi Rusia: https://sass-scss.ru

Mengkompilasi Sass ke CSS

Sebagai software untuk mengkompilasi Sass ke Css, saya menggunakan plugin Sass task manager. Secara umum Sass adalah aplikasi (Gem) dari bahasa Ruby. Oleh karena itu, jika Anda ingin melakukannya tanpa Gulp, maka untuk mengkompilasi ke Css, Anda perlu menginstal platform bahasa pemrograman Ruby. Saya tidak akan menunjukkan bagaimana ini dilakukan sekarang, Anda dapat membacanya di situs resminya.

Sintaks - Sass, Scss

Saya langsung mencatat bahwa ada 2 sintaks untuk menulis kode: Sass dan Scss.

Sintaks Sass sedikit berbeda dari Scss. Scss lebih mirip kode Css biasa, dan Sass menghilangkan kurung kurawal dan titik koma di antara aturan. Ada juga perbedaan dalam cara beberapa fungsi ditulis, dan Anda harus berhati-hati dengan sintaks yang Anda pilih. Ekstensi file untuk Sass - *.kelancangan dan untuk Scss - *.scss. Sintaks Sass lebih tua dan Scss datang kemudian untuk membuatnya lebih mudah dipelajari bagi pemula. Saya sendiri mulai mempelajari preprocessor ini di Scss, jadi lebih mudah untuk memahaminya. Sekarang saya sudah beralih ke Sass, bagi saya lebih nyaman.

Jika kita berbicara tentang Sass, maka struktur kodenya dibangun berdasarkan lekukan (karena tidak ada kurung kurawal di dalamnya) dan Anda harus berhati-hati di sini, karena tab (TAB - 4 spasi) dan spasi biasa (biasanya adalah spasi ganda). Saya selalu menggunakan tab.

Ingat! Jika Anda menggunakan tab stop sebagai indentasi, maka spasi harus dikecualikan agar sama di mana-mana. Dan sebaliknya - jika Anda menggunakan spasi, tab harus dikecualikan. Jika tidak, kompiler akan membuat kesalahan.

Kelancangan

.maincontent .main-title font-size: 30px font-weight: 700 margin: 0 0 30px .description margin-bottom: 30px p color: #444444 font-size: 16px line-height: 22px

Scss

.maincontent ( .main-title ( font-size: 30px; font-weight: 700; margin: 0 0 30px; ) .description ( margin-bottom: 30px; p ( color: #444444; font-size: 16px; line -tinggi: 22px; ) ) )

Sebagian besar editor kode (Sublime Text misalnya) memiliki lekukan garis agar kita tidak bingung. Pada contoh di bawah ini, saya akan menggunakan sintaks Sass.

Membuat hidup lebih mudah dengan Sass

Bersarang aturan

Itulah yang saya sukai dari Sass sejak awal, itu hanya aturan css yang bersarang satu sama lain. Ini menghemat banyak waktu, dan kodenya terstruktur dan mudah dibaca. Misalnya, jika kita ingin menata elemen wadah induk tertentu, maka kita perlu menentukan kelas induk di Css setiap saat, misalnya seperti ini:

Main .title ( font-size: 30px; color: #444; ) .main .subtitle ( font-size: 20px; ) .main .description ( font-size: 14px; margin-bottom: 30px; )

Artinya, kami menentukan kelas induk .main di mana-mana, dan ini, pada gilirannya, sangat tidak nyaman. Menggunakan Sass, dapat ditulis seperti ini:

Scss

.main ( .title ( font-size: 30px; color: #444; ) .subtitle ( font-size: 20px; ) .description ( font-size: 14px; margin-bottom: 30px; ) )

Kelancangan

.main .title ukuran font: 30px warna: #444 .subtitle ukuran font: 20px .deskripsi ukuran font: 14px margin-bottom: 30px

Setuju, cara ini terlihat jauh lebih rapi, dan Anda dapat menulis kode lebih cepat, karena kami menulis kelas induk .main hanya sekali. Jika Anda ingin mengikuti saya tanpa menginstal Ruby dan semua perangkat lunak itu, Anda dapat menggunakan kompiler online untuk mendemonstrasikannya.

Properti terlampir

Selain aturan bersarang di Sass, ada kemungkinan properti bersarang. Misalnya, berikut cara menulis nilai margin:

Kelancangan

.main .title margin: atas: 10px kanan: 15px bawah: 10px kiri: 15px

css

.main .title ( margin-atas: 10px; margin-kanan: 15px; margin-bawah: 10px; margin-kiri: 15px; )

Mengikat ke pemilih atau penggabungan - tanda &

Kita dapat mempercepat penulisan kode kita dan membuatnya lebih ringkas dengan menerapkan concatenation (koneksi) menggunakan simbol − & . Bagaimana itu bekerja? Misalnya, kami memiliki kelas seperti: .main-title , .main-subtitle , .main-description . Di Sass, kelas-kelas ini dapat ditulis sebagai berikut:

Utama &-judul ukuran-font: 30px warna: #444 &-subjudul ukuran-font: 20px &-deskripsi ukuran-font: 14px margin-bottom: 30px

Judul utama ( ukuran font: 30px; warna: #444; ) .subjudul utama ( ukuran font: 20px; ) .deskripsi utama ( ukuran font: 14px; margin-bottom: 30px; )

Dengan simbol & kami terhubung ke kelas root, jadi dalam hal ini tidak perlu mengulang root.main terus-menerus. Pada saat yang sama, perlu diingat bahwa kita belum membuat elemen turunan.

/* Referensi */ a ( color: red; ) a:hover ( color: blue; ) /* Pseudo-elements */ .main::before ( content: ""; display: block; font-size: 20px; ) .main ::setelah ( konten: ""; tampilan: blok; ukuran font: 30px; )

Terkadang Anda perlu menghubungkan pemilih ke elemen saat ini. Tentu saja bisa dibawa ke root, tapi agar tidak melanggar nesting bisa ditulis sebagai berikut:

.container utama & lebar: 700px

Wadah .main ( lebar: 700px )

Dengan bergerak & setelah pemilih, kami mengubah urutan dok, yaitu kelas .container dalam hal ini adalah induknya.

Mengikat ke pemilih induk, tetapi satu tingkat di atas

Di atas, misalnya, saya mendemonstrasikan kode Sass:

Utama &-judul ukuran-font: 30px warna: #444 &-subjudul ukuran-font: 20px &-deskripsi ukuran-font: 14px margin-bottom: 30px

Sekarang bayangkan ada satu elemen lagi di blok .main-title yang perlu ditata secara eksplisit menggunakan seluruh rantai induk. Untuk waktu yang lama, saya hanya menentukan nama root (dalam hal ini, .main), tetapi ini sangat tidak nyaman. Saya mulai melihat-lihat dokumentasi Sass dan menemukan solusinya. Faktanya, semuanya sederhana - kita perlu mendeklarasikan referensi ke induk dan menggunakannya jika perlu.

Ini adalah bagaimana saya melakukannya sebelumnya:

Main &-title font-size: 30px color: #444 .main__icon // tentukan root dari .main, jika tidak, jika Anda menggunakan &, ia akan merapat ke .main-title color: #444 width: 20px &-subtitle font -ukuran: 20px & -deskripsi ukuran font: 14px margin-bawah: 30px

Dan sekarang Anda dapat melakukan ini:

Utama $self: & // link ke parent &-title font-size: 30px color: #444 #($self)__icon // alih-alih & gunakan link ke parent color: #444 width: 20px &-subtitle font-size : 20px &-deskripsi font-size: 14px margin-bottom: 30px

Jika Anda perhatikan, kami telah mendeklarasikan referensi ke parent - $self: & . Bagi saya, ini agak mengingatkan pada referensi ke objek (ini) yang menyebabkan peristiwa di javaScript. Sekarang, di tempat yang tepat, kita cukup menyebutnya #($self) . Ternyata betapa sederhananya semuanya, tetapi saya memutar otak dan berpikir bahwa tidak ada solusi untuk masalah ini di Sass.

Main-title ( font-size: 30px; color: #444; ) .main-title .main__icon ( color: #444; width: 20px; ) .main-subtitle ( font-size: 20px; ) .main-description ( ukuran font: 14px; margin-bawah: 30px; )

Templat Kosong

Seringkali beberapa elemen memiliki basis gaya yang sama, tetapi berbeda satu sama lain hanya dalam beberapa aturan. Mari kita ambil tombol misalnya. Jika kita mengambil ukuran tombol yang sama, maka hanya warnanya yang berbeda: merah, hijau, abu-abu, dll. Jika Anda menggunakan Css murni, Anda harus menentukan semua warna tombol dalam gaya dasar, dipisahkan dengan koma, atau membuat kelas dasar. Tapi di Sass jauh lebih mudah:

%button background-color: #666 border: 1px solid #666 padding: 0 20px font-size: 15px line-height: 40px height: 40px .button-green @extend %button background-color: hijau border-color: green . button-red @extend %button background-color: red border-color: red

Tombol-hijau, .tombol-merah ( background-color: #666; border: 1px solid #666; padding: 0 20px; font-size: 15px; line-height: 40px; height: 40px; ) .button-green ( background-color: green; border-color: green; ) .button-red ( background-color: red; border-color: red; )

Dalam hal ini, tombol %pemilih bertindak sebagai templat (ditandai dengan tanda -%). Ini nyaman karena pemilih template itu sendiri tidak berpartisipasi di mana pun, dan gayanya diwarisi oleh penyeleksi lain melalui direktif − @memperpanjang. Template ini dapat digunakan sebanyak yang Anda inginkan, sehingga mengurangi jumlah kode.

SassScript

Di Sass, seperti dalam bahasa pemrograman, ada fitur seperti: membuat variabel, operasi aritmatika (penjumlahan, pengurangan, pembagian, perkalian, dll.), Iterasi (loop), fungsi (mixin), dan banyak lagi. Artinya, Sass adalah sejenis bahasa pemrograman, yang sekali lagi dirancang untuk menyederhanakan penulisan kode dan mempercepat pekerjaan.

Variabel

Variabel di Sass dimulai dengan tanda $ , dan namanya ditulis dalam bahasa Latin, misalnya: $color . Perlu dicatat bahwa tanda-tandanya: — " Dan " _ » dapat dipertukarkan. Misalnya, jika $color-red dipanggil, maka $color_red juga bisa dipanggil. Variabel didefinisikan sebagai berikut: $nama: nilai, misalnya: $color: #f6f6f6 .

Variabel yang dideklarasikan di luar level bersarang apa pun tersedia secara global, mis. dapat digunakan di mana-mana. Jika Anda telah menentukan variabel pada tingkat sarang pemilih mana pun, variabel itu hanya akan tersedia pada tingkat itu. Agar berfungsi secara global di seluruh dokumen, Anda harus menentukan kata kunci !global.

Judul $font-size: 10px !global font-size: $font-size .subtitle font-size: $font-size

Secara umum, variabel adalah hal yang luar biasa, ada baiknya mendeklarasikan dan memasukkan nilai, lalu Anda dapat menggunakannya sesuka Anda dan di mana saja. Misalnya, kita dapat menentukan warna dengan memberi mereka nama tertentu, ukuran font, jenis font, dan sebagainya. dan secara umum nilai apapun.

arahan

@memperpanjang

Kami menyentuh arahan ini di atas ketika kami mempelajari template-blank. Mari perkuat ilmu kita. Dengan menggunakan @memperpanjang kita dapat menyalin aturan pemilih mana pun. Misalnya, saat menata, mungkin saja elemen " A"dan elemen" B' mungkin mirip dalam penampilan. Dalam hal ini, Anda dapat menulis aturan untuk elemen "A", dan untuk "B" cukup salin gaya elemen "A", dengan sedikit mendefinisikan ulang properti yang diinginkan.

Block_a background-color: #cccccc border: 5px solid #999999 padding: 20px ukuran font: 30px tinggi: 150px lebar: 150px .block_b @extend .block_a padding: 15px

Block_a, .block_b ( background-color: #cccccc; border: 5px solid #999999; padding: 20px; font-size: 30px; height: 150px; width: 150px; ) .block_b ( padding: 15px; )

Dalam contoh ini, kami membuat 2 kotak identik. Untuk persegi "B", kami hanya mengganti padding: 15px . Inilah cara kerja @extend. Saya cukup sering menggunakan arahan ini.

@impor

Arahan ini memungkinkan Anda menggabungkan beberapa file gaya menjadi satu. Ini sangat nyaman, terutama jika proyeknya besar. Jangan bingung dengan arahan yang ada di Css − @impor. Di Css, atribut yang diperlukan adalah − url().

Nyatanya, lebih mudah untuk menulis gaya di file yang berbeda dan masing-masing memiliki tujuannya sendiri. Misalnya, seluruh bingkai halaman dapat dibagi menjadi wilayah: header.sass, sidebar.sass, footer.sass. Anda dapat mengumpulkan semuanya di file main.sass utama, cukup menggunakan @import. File wilayah juga dapat ditentukan dengan garis bawah di awal nama file, misalnya: _header.sass, _sidebar.sass, _footer.sass. File semacam itu disebut fragmen. Saat mengimpor fragmen, tidak perlu menentukan ekstensi file.

Impor Sederhana

@import "header.sass" @import "sidebar.sass" @import "footer.sass"

Impor cuplikan

@import "header" @import "sidebar" @import "footer"

File fragmen dapat dengan ekstensi: *.kelancangan, *.scss atau *.css. Misalnya, file utama mungkin memiliki ekstensi *.kelancangan, dan tajuk situs, misalnya dengan ekstensi *.scss. Artinya, tidak masalah ekstensi apa dari file utama yang Anda miliki. Perlu dicatat bahwa saat mengimpor, semua variabel dan mixin (kami akan membicarakannya di bawah) ditransfer ke file utama tempat impor dilakukan.

Selain itu, Anda dapat menentukan impor beberapa file yang dipisahkan dengan koma: @import "header", "sidebar", "footer".

Ingatlah bahwa impor terjadi di tempat Anda menentukan arahan @impor. Ini biasanya dilakukan di awal dokumen.

@at-root

Pengarahan @at-root berbicara sendiri dan jika diterjemahkan ke dalam bahasa Rusia, akan terdengar seperti ini - "dari akar". Dengan kata lain, kami memindahkan pemilih ke root, membatalkan rantai pemilih induk. Di sini, tentu saja, Anda dapat mengajukan pertanyaan - "Mengapa kami memerlukan arahan ini jika Anda dapat mentransfer pemilih ke root secara manual?". Jawabannya sederhana - kemudahan menulis kode tanpa merusak strukturnya. Saat Anda mempelajari cara bekerja dengan Sass secara maksimal, Anda akan memahami ini.

Utama &-judul ukuran font: 30px warna: #444 @at-root .main__icon warna: #444 lebar: 20px

Judul utama ( ukuran font: 30px; warna: #444; ) .main_icon ( warna: #444; lebar: 20px; )

Mengontrol arahan dan ekspresi

@jika direktif

Arahan ini mengeksekusi gaya jika ekspresi yang disertakan di dalamnya mengembalikan nilai apa pun selain PALSU Dan batal.

$color: hijau .header @if $color == hijau background-color: hijau @else if $color == biru background-color: biru @else background-color: #f6f6f6

Tajuk ( warna latar belakang: hijau; )

Mereka yang setidaknya sudah mengenal dasar-dasar bahasa pemrograman (misalnya javaScript atau Php) tidak akan sulit untuk memahaminya. Di sini intinya sama, yang utama adalah mengetahui sintaks penulisan kode.

@untuk arahan

Dalam bahasa pemrograman (sekali lagi dalam Javascript atau Php) dengan Untuk siklus dapat diatur. Di Sass, direktif ini melakukan hal yang sama - ini membuat loop. Untuk setiap iterasi (pengulangan), digunakan variabel penghitung yang mengubah data keluaran.

Directive memiliki 2 bentuk penulisan: 1. @for $var from<начало>melalui<конец>dan 2. @untuk $var dari<начало>ke<конец>. Jika Anda ingin digit terakhir dimasukkan ke dalam loop, gunakan " melalui". Mari kita lihat sebuah contoh:

@untuk $i dari 1 sampai 6 .elem-item-#($i) background-image: url("images/image-#($i).jpg")

elem-item-1 ( background-image: url("images/image-1.jpg"); ) .elem-item-2 ( background-image: url("images/image-2.jpg"); ) . elem-item-3 ( background-image: url("images/image-3.jpg"); ) .elem-item-4 ( background-image: url("images/image-4.jpg"); ) . elem-item-5 ( background-image: url("gambar/gambar-5.jpg"); )

Untuk menentukan nilai akhir, saya menggunakan kata kunci " ke". Dalam skenario ini, siklus berakhir pada angka - 5 . Perhatikan betapa padatnya tampilan kode Sass.

@setiap arahan

Pengarahan @setiap seperti @for, ini menampilkan nilai dalam satu lingkaran dan nyaman karena, selain angka, Anda dapat mengulangi nilai tertentu. Mari ambil loop di atas dan ubah ke beberapa nilai.

@setiap $bgItem di hewan, danau, laut, lanskap, alam .elem-item-#($bgItem) background-image: url("images/image-#($bgItem).jpg")

Elem-item-animal ( background-image: url("images/image-animal.jpg"); ) .elem-item-lake ( background-image: url("images/image-lake.jpg"); ) . elem-item-sea ( background-image: url("images/image-sea.jpg"); ) .elem-item-landscape ( background-image: url("images/image-landscape.jpg"); ) . elem-item-nature ( background-image: url("images/image-nature.jpg"); )

Dalam hal ini, tidak ada variabel penghitung yang dibuat, dan jumlah iterasi bergantung pada jumlah nilai yang dibuat setelah kata kunci " di dalam". Nilai ditampilkan melalui variabel (dalam contoh ini, $bgItem), yang namanya bisa berubah-ubah.

Mixin (fitur)

Mixin (mixin) adalah sejenis fitur, seperti dalam bahasa pemrograman, yang dirancang untuk menghilangkan kode berulang. Mixin dapat berisi seluruh cuplikan gaya yang diizinkan di Sass. Mari kita lihat contoh agar lebih jelas.

@mixin align-center position: absolute top: 50% left: 50% transform: translate(-50%, -50%) .container @include align-center

Mixin dibuat menggunakan direktif @mixin, diikuti dengan nama mixin yang dipisahkan oleh spasi, serta parameter yang diteruskan secara opsional. Perhatikan bahwa karakter tanda hubung (-) dan garis bawah (_) dalam nama mixin dapat dipertukarkan. Mixin tidak hanya berisi aturan, tetapi juga penyeleksi. Di atas, saya memberikan contoh mixin elementer tanpa parameter.

Mixin dipanggil dengan direktif @include dan kemudian, dipisahkan oleh spasi, tentukan nama mixin yang dibuat. Dalam contoh di atas, ini memusatkan blok pada sumbu X dan sumbu Y menggunakan pemosisian absolut. Jika Anda harus sering menggunakan ini, maka Anda akan setuju bahwa lebih mudah memanggil mixin saja daripada menulis gaya pemusatan berulang kali.

Sekarang mari kita lihat mixin dengan parameter (argumen).

@mixin border($width, $color) border: lebar: $width style: solid color: $color .square @include border(2px, #ccc)

Kotak ( border-width: 2px; border-style: solid; border-color: #ccc; )

Seperti yang Anda lihat, setelah nama mixin dalam tanda kurung, kami menetapkan argumen, dalam hal ini adalah lebar dan warna batas. Ini adalah mixin paling sederhana yang saya berikan untuk kejelasan. Dalam praktiknya, Anda dapat menemukan mixin yang lebih kompleks menggunakan kondisi dan variabel yang berbeda. Tapi jangan memperumit masalah sekarang, kita harus selalu mulai dengan sesuatu yang kecil dan sederhana, dan kemudian bergerak ke atas saat kita bergerak ke atas.

Ini menyimpulkan ulasan singkat saya tentang preprosesor Sass. Mengapa kecil? Ya, karena ini tidak semua yang saya katakan. Secara umum, dengan menggunakan hal di atas, Anda dapat dengan aman mulai menggunakan Sass daripada Css sekarang. Anda dapat mempelajari lebih lanjut tentang Sass dengan merujuk pada dokumentasi yang saya berikan di atas.

Sekian, terima kasih atas perhatiannya! Seperti biasa, kami mengajukan pertanyaan di komentar dan berlangganan saluran telegram atau buletin email (formulir di sidebar sebelah kanan) agar tidak ketinggalan sesuatu yang menarik.

Sampai jumpa di postingan saya yang lain...

Artikel "SASS untuk desainer dan bukan hanya" untuk 21-02-2013 diganti namanya menjadi " Sintaks SASS" dan diperbarui (2014-02-17)

Kelancangan adalah bahasa praprosesor; preprosesor mengkompilasi kode CSS yang kita tulis dalam bahasa prosesor (SASS) menjadi kode CSS murni.

Dokumentasi SASS lebih berorientasi pada pemrogram, sehingga desainer tidak selalu ingin memulai dengan SASS. Selain itu, manfaat menggunakan SASS dari sudut pandang desainer tidak selalu ditunjukkan dengan jelas.

Pada artikel ini, saya ingin membahas beberapa prinsip sederhana. Saya bukan ahli SASS, tetapi saya harus mengatakan bahwa menggunakan sass adalah keputusan yang bijaksana.

Jadi apa manfaat ini? Anda akan dapat menyusun kode Anda secara logis, sehingga mempercepat proses penulisan kode; jumlah pengulangan akan berkurang secara signifikan (variabel akan membantu kita dalam hal ini), kode akan menjadi lebih mudah dipertahankan. Bahasa SASS memudahkan untuk mengerjakan proyek, tidak peduli apakah Anda seorang programmer atau desainer. Benar-benar.

Variabel

Atas nama SASS variabel dimulai dengan tanda dolar ($). Nilai variabel identik dengan nilai properti CSS.

Mari kita mulai dengan dasar-dasarnya, yaitu variabel. Pertimbangkan variabel berdasarkan contoh berikut. Kami cenderung menggunakan banyak warna dalam dokumen. Akibatnya, Anda harus berulang kali menulis nilai warna dalam format hex atau rgb. Jika kami ingin mengubah warna apa pun, kami harus mengganti seluruh dokumen secara otomatis. Pada saat yang sama, kami tidak dapat memastikan bahwa kami tidak akan mendapatkan nilai yang tidak perlu.

A (warna: #822733;) .ringkasan (warna: #822733;) .copyright (warna: #822733;)

Misalnya, Anda dapat memiliki beberapa aturan yang menentukan warna merah tua untuk pemilih yang diinginkan. Bahasa SASS memungkinkan kita untuk melakukan hal berikut: di awal dokumen, kita dapat mendefinisikan variabel yang disebut $brand-color dan kemudian di dalam dokumen, alih-alih nilainya sendiri, cantumkan nama variabel. Kemudian, jika kita perlu mengubah warna, yang perlu kita lakukan hanyalah mengubah nilai variabel $brand-color dan itu akan mengubah warna semua aturan yang menggunakan variabel $brand-color.

// Pustaka warna SASS saya $merek-warna: #822733; a (warna: $merek-warna;) .summary (warna: $merek-warna;) .copyright (warna: $merek-warna;)

Nilai numerik untuk variabel

Variabel tidak hanya berisi string, tetapi juga angka yang dapat Anda manipulasi. Jika Anda menggunakan kisi atau skala tata letak Anda berdasarkan nilai tertentu, Anda mungkin menggunakan nilai ini di seluruh lembar gaya Anda. Misalnya, jika Anda terus-menerus menggunakan nilai 10px , maka Anda dapat menentukan variabel seperti $unit = 10px . Variabel ini dapat digunakan berkali-kali dalam kode Anda. Alih-alih nama variabel, seperti biasa, nilai (10px) akan diganti.

Tetapi bagaimana jika Anda perlu menggandakan nilai suatu variabel? Misalnya, Anda ingin menggandakan margin bawah suatu elemen. Menggunakan SASS Anda dapat menambahkan beberapa matematika sederhana (+ , - , * , / , %), misalnya dalam kasus kami:

$unit = 10px; h1, h2, h3 ( margin-bottom: $unit;) p ( margin-bottom: $unit;) samping ( margin-bottom: $unit*2; /* 20px */) footer( margin-top: $unit* 4; /* 40 piksel */)

kotoran

campuran dapat dibandingkan dengan blok deklarasi berulang dalam kode. Ini adalah bagian dari kode yang dapat Anda gunakan di manapun dalam dokumen. Anda tidak hanya akan menghilangkan pengulangan yang tidak perlu, tetapi Anda juga akan membuat kode Anda lebih bersih, karena Anda akan menghilangkan kebutuhan untuk menggunakan kelas yang sama untuk elemen yang berbeda.

Misalnya, Anda memiliki pemisah di situs yang cukup sering Anda gunakan. Misalnya, Anda dapat menggunakannya untuk memecah blok utama (misalnya artikel dan tajuk) atau bahkan paragraf. Pembagi memiliki padding bawah, margin bawah, batas, dan bayangan.

Untuk membuat pemisah, Anda bisa menambahkan kelas .shadow-border ke sebuah elemen. Tapi ini secara signifikan akan mencemari file html dan css Anda.

Batas bayangan ( batas bawah: 1px padat #a4a4a4; -webkit-kotak-bayangan: 0px 2px 5px 0px rgba(200, 200, 200, 0,6); bayangan kotak: 0px 2px 5px 0px rgba(200, 200, 200 , 0,6); padding-bawah: 20px; margin-bawah: 40px; )

Jika Anda menginginkan struktur yang benar dalam file css Anda dan membersihkan markup html, Anda perlu menambahkan aturan di atas ke elemen html yang sesuai. Perlu dicatat bahwa jika ada banyak elemen dengan pemisah, ini akan "merusak" file gaya secara signifikan, yang akan mempersulit pemeliharaan file gaya.

Header, artikel, p.intro ( border-bottom: 1px solid #a4a4a4; -webkit-box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); box-shadow: 0px 2px 5px 0px rgba(200 , 200, 200, 0.6); padding-bottom: 20px; margin-bottom: 40px; )

Menggunakan @mixin, Anda dapat menentukan nama untuk blok iklan. Nama ini tidak boleh terkait dengan HTML Anda.

@mixin shadow-border ( border-bottom: 1px solid #a4a4a4; -webkit-box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); box-shadow: 0px 2px 5px 0px rgba(200, 200 , 200, 0.6); padding-bottom: 20px; margin-bottom: 40px;)

Kemudian, untuk menyertakan mixin pada suatu elemen, Anda hanya perlu menyertakan nama mixin: @include shadow-border;

@mixin shadow-border ( border-bottom: 1px solid #a4a4a4; -webkit-box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); box-shadow: 0px 2px 5px 0px rgba(200, 200 , 200, 0.6); padding-bottom: 20px; margin-bottom: 40px;) artikel ( @include shadow-border;) header ( @include shadow-border;) p.intro ( @include shadow-border;)

Kelihatan bagus.

Parameter untuk pengotor

Parameter untuk mixin diberikan dalam tanda kurung setelah nama mixin; konten mixin ditempatkan dalam kurung kurawal.

@mixin border-radius($radius: 1px) ( -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; ) /* USE */ .example-class( background-color: #900; @include border-radius(20px); )

Menanamkan kotoran

Terkadang sangat nyaman untuk dapat menumpuk satu ketidakmurnian ke yang lain. Misalnya, kita perlu menambahkan mixin ke mixin yang sudah ada:

$batas-warna: #a4a4a4; $unit: 10px; @mixin bayangan-halus ( -webkit-kotak-bayangan: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); bayangan kotak: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); ) @mixin shadow-border ( @include bayangan-halus; border-bottom: $unit/10 solid $border-color; padding-bottom: $unit*2; margin-bottom: $unit*4;) artikel ( @include shadow-border ;) header ( @include shadow-border;) p.intro ( @include shadow-border;)

Lampiran

Mixin bukan satu-satunya hal yang dapat Anda masukkan ke dalam pemilih CSS (atau lebih khusus lagi, dalam blok deklarasi dalam file sass). Di SASS Anda bisa elemen sarang di dalam satu sama lain. Ini akan menghilangkan pemilih duplikat dan membuat kode lebih mudah dibaca.

/* CSS biasa */ .module h3 ( font-weight: bold;) .module p ( padding-bottom: 10px;)

/* menulis dalam SASS */ .module ( h3( font-weight: bold;) p ( padding-bottom: 10px;) )

Lampiran dan permintaan @media

Lampiran menjadi sangat berguna saat bekerja dengan kueri media. Biasanya, saat Anda bekerja dengan kueri media, Anda harus membuat gaya tambahan untuk resolusi layar yang berbeda, dan terkadang bahkan membuat file gaya terpisah.

/* area pandang - apa pun, termasuk browser yang tidak mendukung @media */ artikel ( ukuran font: 14px; tinggi garis: 25px;) artikel h2 ( ukuran font: 18px; padding-bottom: 15px;) /* untuk 300px viewports dan lebih luas (mobile pertama) */ @media hanya layar dan (min-width: 300px) ( artikel (line-height: 20px;width: 90%;) artikel h2 ( padding-bottom: 10px;) ) / * untuk area pandang 600px dan lebih lebar */ @media hanya layar dan (min-width: 600px) ( artikel (line-height: 25px;width: 80%;) artikel h2 ( padding-bottom: 15px;) ) /* untuk 900px viewports dan lebih lebar */ @media hanya layar dan (min-width: 900px) ( article (width: 60%;) ) /* untuk 1200px viewports dan lebih lebar */ @media only screen dan (min-width: 1200px ) ( artikel ( ukuran font: 16px; tinggi garis: 30px; lebar: 50%;) artikel h2 ( ukuran font: 21px; tinggi garis: 35px; padding-bottom: 20px;) )

SASS, di sisi lain, memungkinkan Anda untuk menyarangkan semua kueri media tepat di dalam elemen. Ini akan memudahkan untuk menemukan dan mengedit gaya yang memengaruhi tata letak responsif.

Artikel ( font-size: 14px; line-height: 25px; h2 ( font-size: 18px; padding-bottom: 15px; ) @media hanya layar dan (min-width: 300px) ( line-height: 20px; width: 90%; h2 ( padding-bottom: 10px; ) ) @media hanya layar dan (min-width: 600px) ( line-height: 25px; width: 80%; h2 ( padding-bottom: 15px;) ) @media saja layar dan (min-width: 900px) ( width: 60%; ) @media hanya layar dan (min-width: 1200px) ( font-size: 16px; line-height: 30px; width: 50%; h2 ( font- ukuran: 21px; line-height: 35px; padding-bottom: 20px; ) ) )

Mengimpor, pernyataan @import di SASS

pernyataan @import
memungkinkan Anda untuk memasukkan konten file CSS(SCSS) pihak ketiga ke dalam file CSS(SCSS) saat ini.
@import tidak boleh dimasukkan setelah deklarasi apa pun selain @charset atau @import lainnya.

Untuk memasukkan konten, misalnya _style_two.scss , Anda perlu menulis seperti ini:

@import "style_two.scss"; /* terhubung tanpa garis bawah */

Penting: jika Anda menghubungkan bukan file tertentu, tetapi folder, maka file css tidak akan dibuat untuk file yang dimulai _ .
Misalnya, memiliki file style.scss akan menghasilkan style.css dibuat, tetapi memiliki file _some.scss tidak. Dengan demikian, garis bawah berarti bahwa file tersebut bukan style sheet mandiri dan hanya dapat diimpor ke style sheet lain.

Siklus di SASS

Sintaks untuk pernyataan pengulangan (masing-masing) adalah sebagai berikut: $var in . $var adalah nama variabel, dan daftar nilai $var .
$var diganti dengan nilai dari , maka konten siklus ditampilkan dalam file gaya (berdasarkan jumlah nilai ).
Misalnya:

SCSS

@setiap $animal di puma, sea-slug, egret, salamander ( .#($animal)-icon ( background-image: url("/images/#($animal).png"); ) )

Dikompilasi ke:

css

.puma-icon ( background-image: url("/images/puma.png"); ) .sea-slug-icon ( background-image: url("/images/sea-slug.png"); ) .egret -icon ( background-image: url("/images/egret.png"); ) .salamander-icon ( background-image: url("/images/salamander.png"); )

@perpanjang pernyataan

Sering ada situasi di mana satu kelas harus memiliki semua gaya kelas lain selain gayanya sendiri. Solusi paling umum adalah dengan menggunakan dua kelas; yang pertama berisi gaya umum, yang kedua berisi gaya khusus.

Pernyataan @extend menghindari masalah ini dengan mengizinkan satu pemilih mewarisi gaya dari pemilih lain. Misalnya:

SCSS

.error ( border: 1px #f00; background-color: #fdd; ) .error.intrusion ( background-image: url("/image/hacked.png"); ) .seriousError ( @extend .error; border-width :3px; )

Dikompilasi ke:

css

.error, .seriousError ( border: 1px #f00; background-color: #fdd; ) .error.intrusion, .seriousError.intrusion ( background-image: url("/image/hacked.png"); ) .seriousError ( lebar batas: 3px; )

Sudah banyak artikel tentang SASS (SCSS), Lebih sedikit tentang habrahabr, tapi menurut saya tidak cukup satu di mana akan ada praktik nyata. Saya akan mencoba mengisi celah ini. Sekitar setahun yang lalu, salah satu artikel SASS "memikat" saya, dan sejak itu saya sangat jatuh cinta dengan teknologi ini sehingga mengetik kode CSS biasa secara manual sepertinya membuang-buang waktu bagi saya. Artikel ini didedikasikan untuk para desainer tata letak (atau pemrogram web) yang belum pernah mendengar tentang SCSS, atau belum mencobanya. Kawan-kawan yang lebih berpengalaman, saya yakin, tidak ada yang menarik di dalamnya.

Apa itu SCSS

SCSS adalah "dialek" dari bahasa SASS. Apa itu SASS? SASS adalah bahasa yang mirip dengan HAML (mesin templating yang sangat ringkas) tetapi dirancang untuk menyederhanakan pembuatan kode CSS. Sederhananya, SASS adalah bahasa yang kodenya diterjemahkan ke dalam kode CSS biasa oleh program ruby ​​\u200b\u200bkhusus. Sintaks bahasa ini sangat fleksibel, memperhitungkan banyak hal kecil yang sangat diinginkan dalam CSS. Selain itu, ia bahkan memiliki logika (@jika, masing-masing), matematika (Anda dapat menambahkan angka, string, dan warna). Mungkin beberapa fitur SCSS akan tampak berlebihan bagi Anda, tetapi, menurut saya, fitur tersebut tidak akan berlebihan, fitur tersebut akan tetap "dicadangkan".

Perbedaan antara SCSS dan SASS adalah SCSS lebih seperti kode CSS biasa. Contoh kode SASS:

$blue: #3bbfce $margin: 16px .content-navigation border-color: $blue color: darken($blue, 9%) .border padding: $margin / 2 margin: $margin / 2 border-color: $blue
Dan hal yang sama untuk SCSS:

$biru: #3bbfce; $margin: 16px; .content-navigation ( border-color: $blue; color: darken($blue, 9%); ) .border ( padding: $margin / 2; margin: $margin / 2; border-color: $blue; )
Saya memilih SCSS karena lebih mudah dipahami bagi rekan-rekan yang belum mengenalnya. Perlu juga dicatat bahwa kode CSS biasa sangat cocok dengan sintaks SCSS.

Instalasi dan penggunaan

Pertama, Anda perlu menginstal ruby ​​​​. Maka Anda perlu menginstal sass-gem (gem install sass di konsol). Jika semuanya berjalan lancar, program sass console sekarang tersedia untuk Anda. Anda dapat membaca tentang semua nuansa penggunaannya di sini - sass --help . Saya hanya akan membahas dua fitur dasar:

--jam tangan

Jika Anda menjalankan sass dengan tombol --watch, program akan melihat file yang Anda tentukan. Jika mereka berubah, itu akan secara otomatis membangun kembali semua file css yang diperlukan (tidak semuanya, tetapi hanya yang terkait dengan yang diubah).

Anggaplah Anda memiliki struktur proyek berikut:

css ---- scss ------ gaya.scss ---- gaya.css
Sass perlu melacak semua perubahan di css/scss/* dan menyimpan hasilnya di css/*.css . Dalam hal ini, kami menjalankan sass seperti ini - sass --watch css/scss:css/. . Itu. sass --watch [apa]:[di mana] .

--memperbarui

Jika Anda perlu memperbarui file css satu kali, gunakan --update alih-alih --watch . Tidak akan ada pengawasan, serta pemeriksaan kebutuhan pembaruan.

Perlu dicatat bahwa, tidak seperti Less , SASS tidak dapat mengkompilasi kodenya langsung di browser. Menurut pendapat saya, pendekatan ini (kompilasi pada server atau perancang tata letak PC) adalah satu-satunya yang benar.

Praktik

Jadi, kita sampai pada hal yang paling penting. Mari kita mulai dengan @import .

@impor

Awalnya, sebelum menggunakan SCSS, semua kode CSS dari mesin yang harus saya gunakan untuk bekerja ada dalam 1 file style.css yang sangat besar. IDE saya (Netbeans (omong-omong, ini adalah plugin untuk penyorotan sintaks)) bekerja dengannya dengan rem yang signifikan. Tidak ada yang ingin membaginya menjadi banyak file yang lebih kecil, dan, jika perlu, rekatkan menjadi 1. SCSS memecahkan masalah ini secara otomatis.

Perlu diperhatikan 1 nuansa. Jika Anda memberi makan sass bukan file sumber tertentu, tetapi direktori, maka file css tidak akan dibuat untuk file yang dimulai dengan _ . Itu. memiliki file style.scss akan menghasilkan style.css , tetapi memiliki file _some.scss tidak.

Jadi, untuk memasukkan konten file _template.scss atau template.scss, kami menulis

@import "templat"; // template
Pada akhirnya, alih-alih 1 file style.css besar, saya mendapatkan lebih dari seratus file scss kecil. Sekilas, jumlah tersebut mungkin terlihat terlalu besar dan akan menyebabkan siksaan yang mengerikan. Namun, saya menemukan file yang saya perlukan segera berdasarkan struktur direktori yang nyaman. Selain itu, saya yakin karena caching, "skema" seperti itu lebih efektif.

@ bersarang

Salah satu fitur yang paling diinginkan dalam CSS adalah pemilih bersarang. Contoh:

#beberapa ( perbatasan: 1px padat merah; .beberapa ( latar belakang: putih; ) ) /* => */ #beberapa ( perbatasan: 1px padat merah; ) #beberapa .beberapa ( latar belakang: putih; )
Contoh lain:

Masukan ( batas: 1px abu-abu padat; latar belakang: putih; & ( warna: hitam; ) &.some_class ( tampilan: tidak ada; ) ) /* => */ masukan ( batas: 1px abu-abu padat; latar belakang: putih; ) masukan ( warna: hitam; ) input.some_class ( tampilan: tidak ada; )
Karakter & setara dengan pemilih induk. Mari beri tag kita memiliki kelas ie_7, jika kita memiliki Internet Explorer 7 sebagai browser. Kode berikut memungkinkan Anda menyingkirkan semua "peretasan" dan komentar khusus:

$IE_7: "body.ie_7"; //... .some ( display: inline-block; #($IE_7) & ( zoom: 1; display: inline; ) ) /* => */ .some ( display: inline-block; ) body.ie_7 .beberapa ( zoom: 1; tampilan: sebaris; )

$variabel

Variabel adalah hal yang berguna. Mereka didefinisikan seperti ini:

$beberapa: merah;
Variabel bukanlah konstanta, mereka dapat diubah sepanjang jalan :) Salah satu pemikiran pertama saya menghasilkan file _const.scss, yang berisi semua warna dasar, ukuran font, dll.

$tautan: #15157d; $tautan_bawah: $tautan; $input_font_size: 13px; $konten_bg: #F1F1F1; $input_color: #4E4D4D; $input_color_placeholder: #959595; $teks_warna: hitam ...
Warna tautan di situs diasumsikan $link .

A ( warna: $tautan; ) span.link ( warna: $tautan; dekorasi teks: garis bawah; )
Jika nanti ternyata warna tautan telah berubah, cukup mengubah 1 variabel (dalam kasus CSS, perlu melalui penggantian otomatis melalui file, bahkan mungkin secara selektif). Misalkan, tiba-tiba, ternyata di beberapa modul kontak, warna tautannya berbeda. Setidaknya ada dua solusi.

$contacts_link: oranye; // kode modul menggunakan $contacts_link bukan $link
Kedua

$__tautan: $tautan; $tautan:oranye; // kode modul $link: $__link;
Variabel kami tidak diketik, sehingga dapat berisi string, angka, dan warna dengan kesuksesan yang sama.

@matematika

Mari kita bagi matematika menjadi 2 kategori - warna dan angka. Mari kita mulai dengan angka. Contoh sederhana:

Blokir ( $block_width: 500px; padding: 5px; batas: 1px hitam pekat; lebar: $block_width - (5px * 2) - (1px * 2); )
Jika diinginkan, Anda juga dapat mengatur padding dengan border ke variabel. Itu semua tergantung pada kompleksitas tata letak.

Contoh lain:

Blokir ( $count: 10; $margin_left: 5px; $all_width: 1000px; width: $all_width; .sub_element ( width: ($all_width / $count) - $margin_left; margin: 0 0 0 $margin_left; ) )
Saya ingin mencatat bahwa manipulasi semacam ini sangat sering digunakan. Tanpa mereka, aku seperti tanpa kaki.

Dan sekarang warnanya. Warna dapat ditambahkan, dikalikan:

Beberapa ( $color: #010203; color: $color; border-color: $color - #010101; &:hover ( color: #010203 * 2; ) ) /* => */ .some ( color: #010203; border-color: #000102; ) .some:hover ( color: #020406; )
Hal yang cukup berguna ketika terlalu malas untuk memilih warna. Fungsi seperti opacify dan transparentize juga tersedia (selengkapnya