Cara Menulis Sass Cantik

Kod yang bersih dan indah harus menjadi matlamat dalam setiap projek. Jika pemaju lain perlu membuat perubahan, mereka harus dapat membaca apa yang ada dan memahaminya. Kod yang boleh dibaca adalah teras pemeliharaan, dan langkah pertama ke arah kod yang boleh dibaca adalah linter yang baik. Seperti pemeriksa ejaan yang baik, Linter harus menangkap semua kesilapan kecil dan kesilapan kecil anda, jadi ia tidak ditinggalkan kepada orang lain untuk berbuat demikian. Ia adalah barisan pertahanan pertama sebelum semakan kod yang baik dengan pemaju lain.

Terdapat beberapa linter hebat untuk sass: scss-lint adalah permata ruby, dan sasslint dan stylelint yang lebih baru, yang merupakan pakej npm untuk nod. Kedua -duanya membolehkan anda mengkonfigurasi peraturan linting untuk projek anda, seperti tahap bersarang maksimum, nol utama pada perpuluhan, dan organisasi sifat dalam blok. Anda juga boleh membuat peraturan anda sendiri seperti yang diperlukan.

Tonton Atoz: Sass Belajar surat sass mengikut surat

Tonton kursus ini Tonton kursus ini Garis panduan SASS berguna untuk menganjurkan projek anda, menubuhkan linter anda, mewujudkan konvensyen penamaan, dan sebagainya. Ditulis oleh Hugo, ia adalah styleguide yang dipertimbangkan untuk kod anda; Ia mungkin tidak semua berfungsi untuk anda, tetapi ia adalah tempat yang bagus untuk bermula.

Jika anda menggunakan pembolehubah sass, fungsi, dan campuran, disarankan agar anda mendokumenkan bagaimana ia berfungsi. Penulis Toolkit akan mendapati ia sangat penting, tetapi sesiapa yang mempunyai alat yang luas yang dibina dalam projek mereka juga harus mempertimbangkan dokumentasi untuk pasukan mereka. Satu lagi alat hebat dari Hugo ialah Sassdoc, pakej NPM yang mengepam komen SASS anda dan menghasilkan tapak statik yang indah dengan dokumentasi anda.

Berikut adalah komen SASSDOC untuk fungsi Tint (..) kami dalam warna-warna. Ia bermula dengan penerangan umum, dan kemudian secara jelas dokumen setiap parameter dan pulangan yang diharapkan:

 <span>/// Mix a color with `white` to get a lighter tint.
</span><span>///
</span><span>/// @param {String | list} $color -
</span><span>///   The name of a color in your palette,
</span><span>///   with optional adjustments in the form of `(<function-name>:<args>)`.
</span><span>/// @param {Percentage} $percentage -
</span><span>///   The percentage of white to mix in.
</span><span>///   Higher percentages will result in a lighter tint.
</span><span>///
</span><span>/// @return {Color} -
</span><span>///   A calculated css-ready color-value based on your global color palette.
</span><span>@function tint(
</span>  <span>$color,
</span>  <span>$percentage
</span><span>) {
</span>  <span>/* … */
</span><span>}
</span>

Menggunakan tema lalai (dari mana terdapat beberapa untuk dipilih, atau anda boleh merancang sendiri), Sassdoc menukar komen itu ke laman web statik, seperti yang ditunjukkan di bawah.

Ujian juga penting jika anda melakukan sesuatu yang kompleks dengan fungsi atau campuran. Ini cara yang baik untuk memastikan kod anda tidak akan memecahkan bila -bila masa anda membuat penyesuaian, tetapi ia juga boleh membantu dalam membangunkan ciri -ciri baru. Jika anda menulis ujian terlebih dahulu, anda akan tahu dengan tepat jika ciri berfungsi dengan betul apabila ujian anda lulus!

TRUE adalah toolkit pengujian unit dari anda benar-benar, yang ditulis dalam sass tulen supaya ia berfungsi di mana sahaja Sass disusun. Ujian teras berlaku dalam fungsi pernyataan: menegaskan-sama (..), menegaskan-nunqual (..), menegaskan-benar (..), dan menegaskan-false (..). Ini dianjurkan ke dalam ujian, dan boleh dikumpulkan dalam modul ujian. Berikut adalah contoh ujian sebenar kami Tint (..) Fungsi:

 <span>/// Mix a color with `white` to get a lighter tint.
</span><span>///
</span><span>/// @param {String | list} $color -
</span><span>///   The name of a color in your palette,
</span><span>///   with optional adjustments in the form of `(<function-name>:<args>)`.
</span><span>/// @param {Percentage} $percentage -
</span><span>///   The percentage of white to mix in.
</span><span>///   Higher percentages will result in a lighter tint.
</span><span>///
</span><span>/// @return {Color} -
</span><span>///   A calculated css-ready color-value based on your global color palette.
</span><span>@function tint(
</span>  <span>$color,
</span>  <span>$percentage
</span><span>) {
</span>  <span>/* … */
</span><span>}
</span>

Apabila disusun, benar akan mengeluarkan komen CSS dengan hasil terperinci, dan memberi amaran kepada anda dalam konsol jika sebarang ujian gagal:

<span>@include test-module('Tint [function]') {
</span>  <span>@include test('Adjusts the tint of a color') {
</span>    <span>@include assert-equal(
</span>      <span>tint('primary', 25%),
</span>      <span>mix(#fff, color('primary'), 25%),
</span>      <span>'Returns a color mixed with white at a given weight.');
</span>  <span>}
</span><span>}
</span>

Apa maksudnya bahawa dua ujian adalah "output ke CSS" dalam contoh ini? Ujian tersebut tidak ditunjukkan, tetapi mereka menguji output mixin. Menggunakan CSS tulen, benar hanya boleh mengesahkan keputusan ujian fungsi, jadi ujian mixin hanya output ke CSS di mana ia boleh dibandingkan secara manual (kasar) atau dengan parser CSS (lebih baik!). Untuk menjadikannya mudah, benar disatukan dengan pelari ujian JavaScript seperti Mocha, dan mempunyai antara muka baris perintah Ruby yang ditulis oleh Scott Davis. Sama ada seseorang akan menghuraikan output CSS sepenuhnya, termasuk output dari mixins, dan memberi anda hasil penuh untuk kedua -dua fungsi dan ujian mixin:

/* # Module: Tint [function] */
/* ------------------------- */
/* Test: Adjusts the tint of a color */
/*   ✔ Returns a color mixed with white at a given weight. */

/* … */

/* # SUMMARY ---------- */
/* 16 Tests: */
/*  - 14 Passed */
/*  - 0 Failed */
/*  - 2 Output to CSS */
/* -------------------- */

soalan yang sering ditanya mengenai menulis sass yang indah

Bagaimana saya boleh menggunakan sass untuk membuat peraturan bersarang?

sass menyediakan ciri unik yang membolehkan anda untuk sarang pemilih CSS anda dengan cara yang mengikuti hierarki visual yang sama dari HTML anda. Untuk membuat peraturan bersarang, anda hanya meletakkan satu pemilih di dalam yang lain. Pemilih dalaman kemudiannya digunakan di mana ia bersarang dalam pemilih luar. Ini boleh menjadikan kod anda lebih bersih dan lebih mudah difahami. Contohnya:

nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}

li li {paparan: inline-block; }

a { paparan: blok;
padding: 6px 12px;
teks-decoration: none; }
}

Manfaat Menggunakan Pembolehubah SASS?

Pembolehubah SASS membolehkan anda menyimpan maklumat yang anda ingin guna semula sepanjang stylesheet anda. Anda boleh menyimpan perkara seperti warna, susunan fon, atau mana -mana nilai CSS yang anda fikir anda akan mahu menggunakan semula. SASS menggunakan simbol $ untuk membuat sesuatu yang berubah -ubah. Berikut adalah contoh:

$ font-stack: Helvetica, sans-serif;

$ warna primer: #333;

body {
font: 100% $ font- stack;
warna: $ warna primer; }

Bagaimana saya boleh menggunakan sass untuk organisasi kod yang lebih baik?

boleh sangat berguna untuk organisasi kod. Anda boleh membuat fail SASS separa yang memegang segmen kod CSS anda. Fail -fail ini bermula dengan garis bawah dan boleh diimport ke dalam fail SASS yang lain. Ini membolehkan anda memodulasi CSS anda dan membantu menjaga perkara yang lebih mudah untuk dikekalkan.

Bagaimana saya boleh menggunakan SASS untuk membuat fungsi kompleks? Anda juga boleh menentukan fungsi anda sendiri menggunakan arahan @function. Berikut adalah contoh fungsi mudah:

@function double ($ number) {
@return $ number * 2;
}

.box {width: double (5px ); }

bagaimana saya boleh menggunakan sass untuk membuat mixins?

. Mereka ditakrifkan menggunakan arahan @mixin. Berikut adalah contoh:

@mixin transform ($ property) {

-webkit -transform: $ property;
-ms -transform: $ property;
transform: $ property;
}

.box {@include transform (berputar (30deg)); }
Bagaimana saya boleh menggunakan sass untuk membuat lanjutan/warisan? Berikut adalah contoh:

.message {

sempadan: 1px pepejal #ccc;

padding: 10px;

warna: #333; { @extend .message;

border-color: green; }

Bagaimana saya boleh menggunakan sass untuk membuat pengendali? -, *, /, dan %. Ini boleh menjadi sangat berguna apabila bekerja dengan saiz dan warna. Berikut adalah contoh:

.container {width: 100%; }

.article { float: left;
lebar: 600px / 960px * 100%;
}

.aside {
float: kanan; 🎜> Lebar: 300px / 960px * 100%; }

Bagaimana saya boleh menggunakan sass untuk membuat arahan kawalan? , @each, dan @while. Ini boleh digunakan untuk mewujudkan gaya kompleks dengan kurang kod. Berikut adalah contoh:

@for $ i dari 1 hingga 3 {
.item-#{$ i} {width: 2em * $ i; }
}

Bagaimana saya boleh menggunakan sass untuk membuat komen?

SASS menyokong dua jenis komen. Komen / * * / gaya dipelihara dalam output CSS di mana komen sebagai // gaya tidak termasuk dalam output CSS. Berikut adalah contoh:

/ * Komen ini
* beberapa baris panjang.
* Oleh kerana ia menggunakan sintaks CSS Comment,
* ia akan muncul dalam output CSS. */
body {color: Black; }

// Komen -komen ini tidak akan muncul dalam output CSS.

// Mereka sangat berguna untuk dokumentasi kod.

a {color: Green; }

Bagaimana saya boleh menggunakan sass untuk membuat interpolasi?

Interpolasi dalam SASS membolehkan anda memasukkan nilai pembolehubah ke dalam rentetan. Ia dilakukan dengan menggunakan sintaks #{}. Berikut adalah contoh:

$ name: foo;

$ attr: border;

p. #{$ Name} {

#{$ attr} -color: blue;
}

Atas ialah kandungan terperinci Cara Menulis Sass Cantik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!