informasi kontak saya
Surat[email protected]
2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
Daftar isi
Perbandingan antara scss dan css
Bedakan antara variabel global dan variabel lokal
Referensi pemilih induk bertingkat (&)
Keuntungan dan skenario yang dapat diterapkan
Keuntungan dan skenario yang dapat diterapkan
SCSS menggunakan pernyataan kondisional
Bersarangnya pernyataan bersyarat
SCSS (Sassy CSS) adalah bahasa praprosesor untuk CSS. Ini memberikan lebih banyak fungsi dan fleksibilitas berdasarkan CSS, membuat penulisan dan pengelolaan style sheet lebih efisien dan nyaman.
Berikut beberapa kelebihan SCSS:
Singkatnya, SCSS tidak hanya mempertahankan semua fungsi CSS, tetapi juga memperkenalkan fitur-fitur canggih seperti variabel, bersarang, mencampur, mengimpor, dll. Fungsi-fungsi ini memungkinkan pengembang untuk menulis dan mengelola style sheet dengan lebih efisien dan umumnya digunakan di front-end modern. pengembangan akhir.
tata bahasa:
Keterbacaan dan pemeliharaan:
Ekstensi fungsi:
kesesuaian:
kurva belajar:
Singkatnya, dibandingkan dengan CSS biasa, SCSS menyediakan lebih banyak alat dan fitur untuk menyederhanakan penulisan dan pemeliharaan style sheet, dan sangat cocok untuk pengembangan proyek besar dan kompleks. Namun, untuk proyek kecil atau kebutuhan penataan gaya sederhana, CSS biasa mungkin lebih mudah dan nyaman.
Sebelum mempelajari scss, instal dulu dua plug-in di vscode untuk mengubah scss menjadi file CSS biasa untuk pembelajaran selanjutnya!
Cari sass di toko plugin, unduh dua plugin berikut dan mulai ulang vscode!
Mendeklarasikan variabel di SCSS sangat sederhana, Anda dapat menggunakan simbol $ untuk mendefinisikan variabel.
Berikut adalah contoh sederhana yang menunjukkan cara mendeklarasikan dan menggunakan variabel di SCSS:
- // 定义变量
- $primary-color: #3498db;
- $secondary-color: #2ecc71;
-
- // 使用变量
- body {
- background-color: $primary-color;
- }
-
- a {
- color: $secondary-color;
- }
Dalam contoh di atas, kita mendefinisikan dua variabel $warna primer dan $warna sekunder untuk masing-masing menyimpan warna primer dan warna sekunder. Kita kemudian dapat menggunakan variabel-variabel ini dalam aturan gaya untuk menjaga konsistensi warna dan mudah dimodifikasi di seluruh lembar gaya.
Ketika file SCSS dikompilasi menjadi file CSS normal, semua variabel akan diganti dengan nilai yang sesuai, sehingga file CSS akhir yang dihasilkan tidak akan berisi deklarasi variabel apa pun.
Di SCSS, Anda dapat menggunakan variabel default untuk memastikan bahwa suatu variabel memiliki nilai alternatif jika tidak ditentukan. Ini sangat berguna ketika bekerja dengan tema atau mengonfigurasi gaya.
Berikut ini contoh cara mendeklarasikan dan menggunakan variabel default:
- // 声明变量，并设置默认值
- $primary-color: #3498db !default;
- $secondary-color: #2ecc71 !default;
-
- // 使用变量
- body {
- background-color: $primary-color;
- }
-
- a {
- color: $secondary-color;
- }
Dalam contoh di atas, kami menggunakan tag !default untuk menentukan nilai default. Ini berarti bahwa jika $warna primer atau $warna sekunder tidak ditentukan di tempat lain sebelum dimasukkan ke dalam file SCSS tersebut, mereka akan menggunakan nilai default yang ditentukan (#3498db dan #2ecc71). Jika variabel-variabel ini telah ditentukan sebelum mengimpor file, nilai defaultnya akan diabaikan.
Keuntungan menggunakan variabel default adalah memungkinkan Anda memberikan nilai alternatif untuk variabel tanpa menimpa variabel yang sudah ditentukan. Ini sangat berguna untuk membuat tema atau berbagi variabel di beberapa file gaya.
Catatan: variabel lokal menggantikan variabel global
Ketika variabel dengan nama yang sama dengan variabel global dideklarasikan ulang dalam lingkup lokal, variabel lokal akan menimpa nilai variabel global. Hal ini memungkinkan nilai variabel yang berbeda ditentukan untuk pemilih atau mixer tertentu tanpa mempengaruhi situasi global.
Gunakan kata kunci !global untuk mengubah variabel lokal menjadi variabel global
SCSS menyediakan kata kunci !global untuk mendeklarasikan variabel lokal secara eksplisit sebagai variabel global. Hal ini menyebabkan nilai variabel lokal dipromosikan ke lingkup global tempat ia dideklarasikan, menimpa variabel global yang ada dengan nama yang sama.
Contoh:
- // 全局变量
- $primary-color: #3498db;
-
- .button {
- // 局部变量，覆盖全局变量
- $primary-color: #cc582e;
- background-color: $primary-color; // 使用局部变量值
- }
-
- // 使用 !global 将局部变量变为全局变量
- $primary-color: #cddb34;
-
- .button {
- // 使用 !global 将局部变量变为全局变量
- $primary-color: #2ecc71 !global;
- }
-
- body {
- background-color: $primary-color; // 这里使用的是已变为全局的 $primary-color
- }
Pada contoh pertama, variabel lokal $warna primer di dalam pemilih .button menggantikan nilai variabel global. Pada contoh kedua, dengan menggunakan kata kunci !global, variabel lokal di dalam pemilih .button diubah menjadi variabel global, sehingga mempengaruhi nilai variabel dalam lingkup global.
Penyarangan pemilih memungkinkan aturan gaya untuk penyeleksi anak disarangkan di dalam penyeleksi induk, misalnya:
- // SCSS代码
- .navbar {
- background-color: #333;
- padding: 10px;
-
- ul {
- list-style: none;
- margin: 0;
- padding: 0;
-
- li {
- display: inline-block;
- margin-right: 10px;
-
- a {
- text-decoration: none;
- color: #fff;
-
- &:hover {
- text-decoration: underline;
- }
- }
- }
- }
- }
Dalam kode di atas, pemilih .navbar berisi ul, li, dan sub-selektor yang disarangkan. Struktur bertingkat ini membuat aturan gaya lebih jelas dan mudah dikelola.
Di SCSS, simbol & digunakan untuk merujuk ke pemilih induk, terutama berguna dalam kasus kelas semu atau elemen semu. Misalnya, gunakan &:hover untuk mereferensikan pemilih induk pemilih saat ini dan menambahkan gaya status :hover.
- .button {
- background-color: #3498db;
- color: #fff;
- padding: 8px 16px;
- border: none;
- text-align: center;
- text-decoration: none;
- display: inline-block;
-
- &:hover {
- background-color: #2980b9;
- }
- }
SCSS memungkinkan beberapa tingkatan pemilih bersarang, misalnya:
- .container {
- .row {
- .col {
- width: 100%;
- }
- }
- }
Di SCSS, selain selector nesting, juga terdapat fitur atribut nesting, yaitu fitur lain yang membuat stylesheet lebih bersih dan mudah dikelola. Penyarangan properti memungkinkan properti terkait diatur bersama, mirip dengan bentuk objek.
Pengumpulan properti dapat digunakan untuk menempatkan properti terkait dalam satu blok kode, misalnya:
- .navbar {
- font: {
- family: Arial, sans-serif;
- size: 16px;
- weight: bold;
- }
- margin: {
- top: 10px;
- bottom: 15px;
- }
- padding: {
- left: 20px;
- right: 20px;
- }
- }
Dalam contoh di atas, blok font, margin, dan padding berisi atribut terkait. Organisasi ini membuat properti dalam setiap blok lebih jelas dan lebih mudah untuk dimodifikasi dan dipelihara.
Di SCSS, pewarisan (Extend) adalah fitur yang sangat berguna yang memungkinkan satu pemilih mewarisi aturan gaya pemilih lainnya. Fitur ini mengurangi duplikat kode CSS dan membuat stylesheet lebih modular dan mudah dipelihara.
Warisan pemilih dapat dicapai dengan menggunakan kata kunci @extend. Misalnya:
- %message-shared {
- border: 1px solid #ccc;
- padding: 10px;
- color: #333;
- }
-
- .success-message {
- @extend %message-shared;
- background-color: lightgreen;
- }
-
- .error-message {
- @extend %message-shared;
- background-color: lightcoral;
- }
Dalam contoh di atas, %message-shared adalah pemilih placeholder yang mendefinisikan serangkaian gaya umum. .success-message dan .error-message masing-masing mewarisi gaya %message-shared dan menambahkan warna latar belakangnya sendiri.
Warisan sangat cocok untuk penyeleksi dengan karakteristik umum, seperti komponen tombol, kotak pesan, dll. Melalui pewarisan, Anda dapat menggunakan kembali aturan gaya yang sama dalam skenario berbeda sambil menjaga kode Anda tetap bersih dan terpelihara.
Singkatnya, pewarisan di SCSS adalah alat yang ampuh yang dapat membantu Anda menghindari duplikasi gaya dan menjaga modularitas dan kejelasan kode Anda, namun saat menggunakannya, Anda perlu memperhatikan urutan dan posisi penyeleksi, dan kewajaran penggunaan placeholder untuk memaksimalkan efeknya.
Placeholder % adalah pemilih khusus di SCSS yang sering digunakan untuk menentukan aturan gaya yang dapat diwarisi tetapi tidak menghasilkan keluaran CSS sebenarnya. Secara khusus:
- %placeholder-selector {
- // 样式规则
- }
Dalam contoh di atas, %placeholder-selector adalah pemilih placeholder yang dimulai dengan %. Ini mendefinisikan seperangkat aturan gaya, tetapi nama pemilih yang sesuai tidak akan muncul di CSS yang dikompilasi.
- .some-class {
- @extend %placeholder-selector;
- // 可选的额外样式
- }
Menggunakan kata kunci @extend memungkinkan .some-class mewarisi gaya %placeholder-selector. Artinya .some-class akan menerapkan semua aturan gaya yang ditentukan dalam %placeholder-selector dan menghasilkan keluaran CSS yang sesuai.
Singkatnya, pemilih placeholder% adalah alat yang ampuh di SCSS yang dapat membantu pengembang meningkatkan penggunaan kembali dan pemeliharaan style sheet sekaligus mengurangi redundansi CSS yang tidak perlu.
Mixin adalah fitur lain yang sangat kuat di SCSS yang memungkinkan seperangkat aturan gaya dienkapsulasi dalam blok kode yang dapat digunakan kembali dan kemudian direferensikan dimanapun diperlukan. Berbeda dengan pemilih placeholder %, mixin dapat langsung menghasilkan keluaran CSS, sehingga cocok untuk situasi di mana gaya yang sama perlu digunakan di banyak tempat.
- @mixin mixin-name($parameter1, $parameter2, ...) {
- // 样式规则使用参数
- }
Dalam contoh di atas, kata kunci @mixin mendefinisikan mixin yang disebut mixin-name yang dapat menerima banyak argumen (jika diperlukan) dan mendefinisikan serangkaian aturan gaya di dalamnya.
- .some-class {
- @include mixin-name(value1, value2, ...);
- // 可选的额外样式
- }
Gunakan kata kunci @include untuk memanggil mixin di pemilih dan meneruskan parameter ke sana. Dengan cara ini, .some-class akan menerapkan aturan gaya yang ditentukan dalam mixin dan menerapkan nilai parameter yang diteruskan ke variabel parameter terkait.
- @mixin button-style($background-color, $text-color) {
- display: inline-block;
- padding: 10px 20px;
- border: none;
- border-radius: 4px;
- background-color: $background-color;
- color: $text-color;
- text-align: center;
- text-decoration: none;
- font-size: 16px;
- cursor: pointer;
- transition: background-color 0.3s ease;
-
- &:hover {
- background-color: darken($background-color, 10%);
- }
- }
- .button-primary {
- @include button-style(#3498db, #fff);
- }
-
- .button-secondary {
- @include button-style(#2ecc71, #fff);
- }
Singkatnya, mix @mixin adalah alat yang ampuh untuk merangkum dan menggunakan kembali aturan gaya di SCSS. Ini dapat secara signifikan meningkatkan pemeliharaan dan fleksibilitas CSS dan cocok untuk berbagai persyaratan gaya yang kompleks dan berulang.
Di SCSS, pernyataan kondisional memungkinkan gaya CSS dihasilkan secara dinamis berdasarkan kondisi tertentu. Pernyataan kondisional di SCSS mirip dengan pernyataan kondisional dalam bahasa pemrograman lain, termasuk @if, @else if, dan @else.
Pernyataan @if memungkinkan gaya dihasilkan berdasarkan suatu kondisi. Sintaksnya adalah sebagai berikut:
- $use-rounded-corners: true;
-
- .button {
- @if $use-rounded-corners {
- border-radius: 4px;
- }
- }
Dalam contoh di atas, jika nilai variabel $use-rounded-corners benar, gaya kelas .button akan dihasilkan, termasuk radius batas: 4px;. Jika kondisinya salah, bagian gaya ini tidak akan dihasilkan.
Selain @if, Anda juga dapat menggunakan @else if dan @else untuk menambahkan lebih banyak cabang bersyarat.
- $button-size: medium;
-
- .button {
- @if $button-size == small {
- padding: 5px 10px;
- } @else if $button-size == medium {
- padding: 10px 25px;
- } @else if $button-size == large {
- padding: 15px 30px;
- } @else {
- padding: 10px 20px; // 默认值
- }
- }
Dalam contoh ini, bergantung pada nilai variabel $button-size, nilai padding yang berbeda dipilih untuk diterapkan ke kelas .button. Jika tidak ada kondisi yang cocok, blok kode di @else akan dieksekusi.
Pernyataan kondisional juga dapat disarangkan untuk menangani logika yang lebih kompleks.
- $button-style: flat;
- $button-size: medium;
-
- .button {
- @if $button-style == flat {
- background-color: transparent;
- color: #333;
- border: 1px solid #333;
-
- @if $button-size == small {
- padding: 5px 10px;
- } @else if $button-size == medium {
- padding: 10px 25px;
- } @else if $button-size == large {
- padding: 15px 30px;
- } @else {
- padding: 10px 20px; // 默认值
- }
- } @else if $button-style == raised {
- background-color: #3498db;
- color: #fff;
- padding: 10px 20px;
- border-radius: 4px;
- } @else {
- // 默认样式
- background-color: #db6334;
- color: #fff;
- padding: 10px 20px;
- }
- }
Dalam contoh ini, gaya berbeda dipilih untuk diterapkan berdasarkan nilai $button-style dan $button-size. Pendekatan bertingkat ini memungkinkan pembuatan aturan gaya kompleks berdasarkan berbagai kondisi.
Dengan menggunakan pernyataan kondisional, Anda dapat mencapai definisi gaya yang lebih fleksibel dan dinamis di SCSS, dan menghasilkan aturan CSS yang berbeda berdasarkan kondisi yang berbeda, sehingga meningkatkan pemeliharaan dan skalabilitas style sheet.
Di SCSS, ada tiga konstruksi perulangan utama yang dapat digunakan untuk menghasilkan aturan CSS berulang: @for, @each, dan @ while.
Perulangan @for digunakan untuk menghasilkan gaya berulang kali sesuai dengan langkah dan kondisi tertentu.
tata bahasa dasar：
- @for $i from <start> through <end> {
- // 循环体
- }
Contoh：
- @for $i from 1 through 3 {
- .item-#{$i} {
- width: 100px * $i;
- }
- }
Dalam contoh di atas, tiga kelas .item-1, .item-2, dan .item-3 dihasilkan, dengan lebar masing-masing diatur ke 100px, 200px, dan 300px.
Perulangan @each digunakan untuk menelusuri data tipe daftar atau peta dan menghasilkan gaya untuk setiap elemen.
tata bahasa dasar：
- @each $var in <list or map> {
- // 循环体
- }
Contoh：
- $colors: (red, green, blue);
-
- @each $color in $colors {
- .text-#{$color} {
- color: $color;
- }
- }
Dalam contoh ini, tiga kelas .text-red, .text-green dan .text-blue dihasilkan, dan warna teksnya diatur ke nilai warna yang sesuai.
Perulangan @ while berulang kali menghasilkan gaya berdasarkan suatu kondisi hingga kondisi tersebut tidak terpenuhi.
tata bahasa dasar：
- $i: 1;
- @while $i < 4 {
- // 循环体
- $i: $i + 1; // 更新条件
- }
Contoh：
- $i: 1;
- @while $i < 4 {
- .item-#{$i} {
- width: 100px * $i;
- }
- $i: $i + 1;
- }
Kode ini menghasilkan tiga kelas .item-1, .item-2 dan .item-3, dan menyetel lebarnya masing-masing menjadi 100px, 200px, dan 300px.
Tiga struktur perulangan SCSS @for, @each, dan @ while digunakan untuk melakukan perulangan berdasarkan indeks, melintasi daftar atau jenis data peta, dan menghasilkan gaya berdasarkan perulangan bersyarat masing-masing. Struktur loop ini membuat SCSS lebih kuat dan fleksibel, mampu menghasilkan aturan CSS yang kompleks sesuai kebutuhan.
Di SCSS, style sheet dapat ditingkatkan dengan fungsi kustom yang menerima parameter dan mengembalikan nilai yang diproses.
Di SCSS, gunakan kata kunci @function untuk mendefinisikan fungsi, yang dapat memiliki parameter dan nilai kembalian. Misalnya, kita mendefinisikan fungsi untuk menghitung total lebar model kotak suatu elemen:
- @function total-width($padding, $border, $margin, $content-width) {
- @return $padding + $border + $margin + $content-width;
- }
Dalam contoh di atas:
Setelah suatu fungsi ditentukan, fungsi tersebut dapat digunakan dalam gaya untuk menghitung dan menghasilkan nilai yang diperlukan. Misalnya:
- .element {
- width: total-width(10px, 1px, 5px, 100px);
- }
Dalam contoh ini, fungsi lebar total akan dipanggil dengan parameter 10px, 1px, 5px, dan 100px. Hasil yang dikembalikan oleh fungsi (116px) akan diterapkan ke properti lebar .element.
Gunakan SCSS untuk mengganti tema hitam putih halaman
Bahasa Indonesia
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="stylesheet" href="main.css">
- <title>黑白色主题切换</title>
- </head>
- <body>
- <div class="container">
- <button id="theme-toggle">切换主题</button>
- <div class="box">
- <div class="content">
- <p>这是一些文本内容。</p>
- <p>这是一些文本内容。</p>
- <p>这是一些文本内容。</p>
- <p>这是一些文本内容。</p>
- <p>这是一些文本内容。</p>
- <p>这是一些文本内容。</p>
- <p>这是一些文本内容。</p>
- </div>
- </div>
- </div>
-
- <script src="main.js"></script>
- </body>
- </html>
scss
- // 定义轻主题的样式变量
- $light-theme: (
- background-color: white,
- text-color: black,
- highlight-color: #f0f0f0
- );
-
- // 定义暗主题的样式变量
- $dark-theme: (
- background-color: black,
- text-color: white,
- highlight-color: #333333
- );
-
- // 定义一个混合（mixin）来应用主题样式
- // 参数 $theme: 要应用的主题，是一个包含背景色、文本颜色和高亮颜色的映射（map）
- @mixin theme($theme) {
- background-color: map-get($theme, background-color);
- color: map-get($theme, text-color);
-
- // 为 .box 类应用主题的高亮颜色
- .box {
- background-color: map-get($theme, highlight-color);
- }
- }
-
- // 应用轻主题样式到 body 元素，并添加过渡效果
- body {
- @include theme($light-theme);
- transition: all 0.3s ease;
- }
-
- // 为 body 的 dark 类应用暗主题样式
- body.dark {
- @include theme($dark-theme);
- }
-
- // 设置容器的文本居中和顶部间距
- .container {
- text-align: center;
- margin-top: 20px;
- }
-
- // 配置主题切换按钮的样式
- #theme-toggle {
- padding: 10px 20px;
- cursor: pointer;
- border: none;
- outline: none;
- background-color: #007bff;
- color: white;
- font-size: 16px;
- border-radius: 5px;
- }
-
- // 鼠标悬停在主题切换按钮上时改变背景色
- #theme-toggle:hover {
- background-color: #0056b3;
- }
-
- // 定义 .box 类的基本样式和过渡效果
- .box {
- margin: 20px auto;
- padding: 20px;
- width: 50%;
- border: 1px solid #ccc;
- transition: all 0.3s ease;
-
- // 内容区域的样式配置
- .content {
- p {
- margin: 10px 0;
- }
- }
- }
Bahasa Inggris
- /**
- * 为主题切换按钮添加点击事件监听器
- * 当按钮被点击时，切换文档主体的黑暗主题样式
- *
- * 该函数通过toggle方法动态切换body元素的'dark'类，从而实现主题的切换。
- * 如果body已经应用了'dark'类，那么点击按钮将移除这个类，反之亦然。
- * 这种方式允许用户在黑暗主题和默认主题之间自由切换。
- */
- document.getElementById('theme-toggle').addEventListener('click', () => {
- document.body.classList.toggle('dark');
- });
Ia telah mengabdikan dirinya untuk meneliti teknologi selama lebih dari 30 tahun, dan mahir dalam berbagai bahasa seperti java, linux, javascript, php, css, dll. "Saya telah memberikan banyak kontribusi di bidang dokumentasi pengembang stasiun sumber terbuka untuk berbagi beberapa masalah dalam pengembangan teknologi untuk referensi di masa mendatang. Semua orang memeriksanya
Surat[email protected]