8 petua untuk membantu anda mendapatkan yang terbaik daripada sass

sass, preprocessor CSS, menjanjikan stylesheets sintaktik yang mengagumkan. Digunakan dengan betul, ia memupuk berskala dan kering (jangan mengulangi diri anda) CSS. Walau bagaimanapun, penyalahgunaan boleh menyebabkan fail yang lebih besar dan kod berlebihan. Panduan ini menawarkan petua untuk memaksimumkan potensi SASS.

Takeaways utama:

• Struktur Projek: Susun projek SASS anda dengan berkesan dari awal lagi. Gunakan sebahagian untuk memodulasi CSS anda dan mengimportnya melalui fail SASS Master.
• Penggunaan Variabel: Mewujudkan konvensyen penamaan yang konsisten untuk pembolehubah SASS untuk meningkatkan kebolehbacaan dan kebolehgunaan semula.
• Mixin Moderation: Elakkan overusing mixins, yang boleh menduplikasi kod dan mengembung CSS anda. Rizab Mixin untuk situasi yang memerlukan argumen untuk menghasilkan variasi dalam gaya.
• Kuasa tempat letak: Gunakan tempat letak untuk gaya berulang tanpa duplikasi kod, mempromosikan CSS kering.

1. Menstrukturkan projek sass anda:

Struktur projek yang betul adalah penting. Separa (fail yang diawali dengan garis bawah "_") memecahkan CSS ke dalam ketulan yang boleh diurus, meningkatkan keupayaan. Fail Sass Master (mis.,

) mengimport sebahagiannya. global.scss

Contoh Struktur Folder:

<code>vendor/
base/
|
|-- _variables.scss
|-- _mixins.scss
|-- _placeholders.scss

framework/
modules/
global.scss</code>

Contoh:

global.scss

<code>/* VENDOR - External files and default fallbacks */
@import 'vendor/_normalize.scss';

/* BASE - Variables, mixins, and placeholders */
@import 'base/_variables.scss';
@import 'base/_mixins.scss';
@import 'base/_placeholders.scss';

/* FRAMEWORK - Layout and structure */
@import 'framework/_grid.scss';
@import 'framework/_breakpoints.scss';
@import 'framework/_layout.scss';

/* MODULES - Reusable components */
@import 'modules/_buttons.scss';
@import 'modules/_lists.scss';
@import 'modules/_tabs.scss';</code>

2. Penggunaan pembolehubah SASS yang berkesan:

Walaupun mudah, pembolehubah sering disalahgunakan. Konvensyen penamaan di seluruh tapak adalah kunci untuk memahami dan menggunakan semula.

Elakkan kekeliruan
• dalam nama berubah.
mematuhi konvensyen penamaan
• (mis., BEM, OOCSS).
Justifikasi Penggunaan Variabel.
Contoh yang baik:

Contoh buruk:

<code>$orange: #ffa600;
$grey: #f3f3f3;
$blue: #82d2e5;

$link-primary: $orange;
$link-secondary: $blue;
$link-tertiary: $grey;

$radius-button: 5px;
$radius-tab: 5px;</code>

<code>$link: #ffa600;
$listStyle: none;
$radius: 5px;</code>

3. Meminimumkan penggunaan mixin:

Mixins berkuasa untuk penggunaan semula kod, tetapi terlalu banyak membawa kepada kod pendua dan CSS kembung. Gunakan mixins hanya apabila hujah diperlukan untuk membuat variasi.

Contoh yang baik:

Contoh buruk: (lebih baik sebagai pemegang tempat)

<code>@mixin rounded-corner($arc) {
    -moz-border-radius: $arc;
    -webkit-border-radius: $arc;
    border-radius: $arc;
}</code>

<code>@mixin cta-button {
    padding: 10px;
    // ...other styles...
}</code>

4. Memanfaatkan tempat letak:

ruang letak () menawarkan kebolehgunaan semula yang lebih baik berbanding dengan campuran, menghasilkan CSS kering tanpa duplikasi kod.

Contoh: %name

5. Fungsi untuk pengiraan:

<code>%bg-image {
    width: 100%;
    // ...other styles...
}

.image-one { @extend %bg-image; background-image: url(/img/image-one.jpg); }
.image-two { @extend %bg-image; background-image: url(/img/image-two.jpg); }</code>

Fungsi SASS melakukan pengiraan dan nilai pulangan, berguna untuk perhitungan di seluruh tapak. Sebagai contoh, mengira lebar peratusan:

6. Kod yang dianjurkan:

<code>@function calculate-width($col-span) {
    @return 100% / $col-span;
}</code>

Mixins kumpulan, fungsi, ruang letak, dan pembolehubah dalam fail separa masing -masing. Simpan unsur-unsur di seluruh tapak (pembolehubah, dan lain-lain) dalam folder .

base 7. Mengehadkan bersarang:

bersarang yang berlebihan boleh menyebabkan CSS yang kompleks dan khusus. Simpan bersarang ke maksimum tiga tahap.

8. Kesederhanaan:

mengutamakan kesederhanaan. SASS perlu bertambah baik, tidak merumitkan, CSS. Elakkan pembolehubah, fungsi, atau campuran yang tidak perlu.

Kesimpulan:

Petua ini mempromosikan SASS yang cekap dan boleh dipelihara. Ingat, amalan terbaik berkembang, jadi pembelajaran berterusan adalah kunci.

Soalan-soalan yang sering ditanya (Soalan Lazim): (Ini sudah diliputi dengan baik dalam teks asal, jadi saya akan menghilangkannya untuk mengelakkan kelebihan. Soalan Lazim asalnya sangat baik.)

Atas ialah kandungan terperinci 8 petua untuk membantu anda mendapatkan yang terbaik daripada sass. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!