Fungsi Sass untuk memulakan Lembaran Gaya Anda

Artikel ini pada asalnya diterbitkan pada 11 November 2014 dan telah dikemas kini.

Sass mempunyai suite fungsi terbina dalam yang direka untuk menyelaraskan aliran kerja gaya anda. Mari kita meneroka beberapa contoh utama.

sorotan utama

fungsi terbina dalam Sass secara dramatik mempercepatkan perkembangan gaya. Fungsi seperti

dan

laraskan ketepuan warna dengan peratusan, manakala
• dan darken kelegapan warna kawalan. Ini memastikan konsistensi palet warna, walaupun dengan perubahan warna jenama pertengahan. lighten opacify Fungsi transparentize menghasilkan warna yang berbeza, sesuai untuk membuat aksi-aksi yang menarik. Fungsi
menukarkan nombor kepada peratusan, memudahkan pelarasan tipografi dan responsif.
• complement SASS menawarkan fungsi percentage inline, sama dengan pengendali ternary dalam bahasa lain. Ini membolehkan gaya yang bergantung kepada berubah-ubah, terutamanya bermanfaat untuk reka bentuk responsif di mana sifat menyesuaikan berdasarkan saiz skrin atau pembolehubah dinamik lain.
• if
manipulasi warna:

,

, , darken lighten opacify transparentize Fungsi dan boleh dikatakan yang paling terkenal. Mereka menyesuaikan cahaya warna dengan peratusan yang ditentukan:

darken Ini menghapuskan keperluan untuk menentukan kod hex secara manual untuk warna yang sedikit diubah. Contohnya: lighten

disusun kepada:

$main-color: #6dcff6;
$darker-color: darken($main-color, 20%);
$lighter-color: lighten($main-color, 20%);

Pendekatan ini mengekalkan konsistensi warna di seluruh projek anda. Satu perubahan menyebarkan sepanjang.

.brand-button {
  background: $main-color;
}

.brand-button:hover {
  background: $lighter-color;
}

.brand-button:visited {
  background: $darker-color;
}

Begitu juga,

dan

.brand-button {
  background: #6dcff6;
}

.brand-button:hover {
  background: #cdeffc;
}

.brand-button:visited {
  background: #0fafee;
}

kelegapan warna kawalan menggunakan nilai perpuluhan (0-1):

$main-color

berguna untuk modal dan lapisan, fungsi -fungsi ini, seperti

dan opacify, memudahkan gaya yang konsisten dan konsisten. transparentize dan

adalah alias untuk

$main-color: rgba(0, 0, 0, 0.5);
$opaque-color: opacify($main-color, 0.5);
$transparent-color: transparentize($main-color, 0.3);

dan

. darken lighten fade-in kontras dan penukaran: fade-out dan opacify transparentize

fungsi mengembalikan warna pelengkap, sesuai untuk mewujudkan kontras visual dalam panggilan-ke-aksi: complement percentage Fungsi

menukarkan nombor ke peratusan, memudahkan pengiraan:

complement

Fungsi ini mengendalikan unit dengan anggun, menjadikannya sesuai untuk skala tipografi atau responsif.

$main-color: #6dcff6;
$call-to-action: complement($main-color); // Returns #f6946d

percentage logik bersyarat: fungsi

width: percentage(0.16); // Returns 16%
width: percentage(100px / 50px); // Returns 200%

inline sass

Cermin fungsi pengendali ternary:

$main-color: #6dcff6;
$darker-color: darken($main-color, 20%);
$lighter-color: lighten($main-color, 20%);

Ia memerlukan keadaan dan dua output yang berpotensi. Ini tidak ternilai untuk reka bentuk responsif, yang membolehkan sifat menyesuaikan diri berdasarkan keadaan berubah atau saiz skrin.

Kesimpulan

fungsi terbina dalam Sass dengan ketara meningkatkan kecekapan gaya. Contoh -contoh ini, bersama -sama dengan yang lain (dan yang tersedia dengan Kompas), menawarkan toolkit yang kuat untuk mewujudkan stylesheet yang boleh dipelihara dan disesuaikan. Eksperimen untuk mencari aliran kerja yang paling sesuai dengan keperluan projek anda.

soalan yang sering ditanya mengenai fungsi sass

Bahagian ini telah ditinggalkan untuk keringkasan, kerana ia adalah topik yang berasingan dan akan meningkatkan panjang tindak balas yang sudah besar ini. Walau bagaimanapun, maklumat yang diberikan sebelum ini secara langsung menangani banyak soalan yang ditimbulkan dalam bahagian FAQ input asal.

Atas ialah kandungan terperinci Fungsi Sass untuk memulakan Lembaran Gaya Anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!