Proses Pengembangan WordPress Menggunakan Sass dan Compass

() translation by (you can also view the original English article)

Pada artikel ini, kita akan melihat bagaimana menggunakan Sass dan Compass dalam proses pengembangan tema WordPress kita. Kita akan menyusun stylesheet tema kita dalam mode SMACSS dan akan memanfaatkan kekuatan Compass untuk menghasilkan sprite gambar untuk perangkat retina dan non-retina.

Perhatikan bahwa artikel ini bukan pengantar Sass; bagaimanapun, jika Anda seorang pemula, jangan ragu untuk ikut serta.

Persyaratan

Sebelum kita masuk, pastikan Anda menginstal Sass dan Compass pada mesin Anda. Jika Anda belum menginstalnya, ikuti petunjuknya di:

Ada beberapa aplikasi Sass dan Compass berbasis GUI, tapi saya akan menggunakan Terminal (jika Anda menggunakan Windows, maka Anda bisa menggunakan Command Prompt). Jangan ragu untuk menggunakan alat yang paling Anda sukai.

Setup Proyek

Mari kita mulai dengan membuat folder untuk proyek kita. Buat folder baru di Desktop Anda dan namakan tutsplus. Di dalamnya ada dua folder baru: sass dan images. Folder sass akan berisi file Sass kita yang akan membentuk stylesheet tema kita, style.css.

Buka folder images dan buat dua direktori baru untuk ikon tema kita. Namakan direktorinya icons dan icons@2x. Nantinya, kita akan menggunakan gambar di folder ini untuk membuat gambar sprite untuk tema kita. Pada titik ini struktur folder Anda seharusnya terlihat seperti berikut ini:

Figure 1 The Folders structure — Struktur Folder

Konfigurasi Compass

Kita akan menggunakan Compass untuk watch perubahan file di dalam folder sass dan, ketika terjadi perubahan, ia akan menggunakan Sass untuk mengkompilasi stylesheet kita. Setiap kali kita meluncurkan Compass, ia akan mencari file konfigurasi di direktori saat ini. File itu disebut config.rb.

Untuk membuat file konfigurasi buka terminal/command prompt Anda dan arahkan ke folder tutsplus Anda di desktop Anda:

1	cd /Desktop/tutsplus/

Berikutnya panggil perintah compass config config.rb. Perintah ini menghasilkan pengisian file konfigurasi untuk Anda. Buka file di editor teks favorit Anda dan buat perubahan berikut:

Ubah css_dir = "stylesheet" ke: css_dir = "/". Ini akan memberitahu Compass untuk menampilkan file CSS yang dihasilkan di dalam folder root tema kita, karena ini adalah tempat WordPress akan mencari style.css tema kita.
Tetapkan gaya keluaran pilihan Anda untuk CSS yang dihasilkan. Di sini, saya akan mengaturnya ke gaya diperluas dengan mengetikkan pada baris 12 output_style =: expanded.
Hilangkan komentar baris 14 dan 17 dengan menghapus simbol hash di awal sehingga baris berikut terlihat seperti relative_assets = true dan line_comments = false.

Simpan perubahan Anda Sekarang file config.rb Anda akan terlihat seperti gambar di bawah ini:

# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "/"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
output_style = :expanded

# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false

# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

Memantau Perubahan

Baiklah! Sekarang kita memiliki file konfigurasi, inilah saatnya membuat file Sass pertama kita. Buat file baru di dalam folder sass dan namakan style.scss. Selanjutnya, luncurkan Terminal Anda dan arahkan ke direktori /Desktop/tutsplus/.

Jalankan perintah compass watch. Perintah ini akan memulai proses yang akan terus mencari perubahan file Sass di dalam folder sass kita. Ini akan menemukan file style.scss kita dan menampilkan representasi CSS-nya sebagai style.css di dalam direktori tutsplus kita.

Perhatikan bahwa semua file di dalam folder sass kita yang namanya tidak dimulai dengan underscore akan diproses dan dikeluarkan di folder tutsplus. Inilah yang kita inginkan untuk file style.scss.

Yang penting untuk diingat: Jangan membuat perubahan langsung di dalam file CSS yang dihasilkan, karena perubahan Anda akan hilang begitu Anda mengkompilasi kembali file Sass Anda.

Decompose

Kita akan memisahkan style.scss kita menjadi komponen kecil dengan menggunakan panduan gaya yang didefinisikan di SMACSS (Scalable and Modular Architecture for CSS). Penulis SMACSS adalah Jonathan Snook dan dia telah menerbitkan sebuah buku tentang topik ini yang saya sarankan untuk Anda baca. Jika Anda adalah anggota Tuts+, Anda bisa mendownload salinannya dari sini.

SMACSS mengkategorikan aturan CSS Anda menjadi lima kelompok:

Base
Layout
Module
State
Theme

Mari buat folder untuk masing-masing kategori di dalam folder sass kita. Gunakan nama berikut: base, layouts, modules, states dan themes.

Figure 2 Our SMACSS folder structure — Struktur folder SMACSS kita

Base

Di folder base Anda, letakkan semua stylesheet Anda yang sesuai dengan SMACSS Base Style Rules. Stylesheet tersebut harus menerapkan gaya hanya pada penyeleksi elemen. Ini juga tempat yang bagus untuk meletakkan CSS reset browser Anda.

Compass dilengkapi dengan reset browser berdasarkan stylesheet reset Eric Meyer. Untuk proyek ini, saya akan menggunakan normalize.css. Download file normalize.css dan letakkan di dalam direktori base, lalu ganti namanya menjadi _normalize.scss. Pastikan untuk mengubah ekstensi file-nya dari css menjadi scss.

Selanjutnya, kita perlu mengimpor stylesheet normalize dalam style.scss kita. Untuk melakukan ini buka style.scss dan tambahkan:

1	// Base
2	@import "base/normalize";

Seperti yang Anda lihat, kita mengabaikan underscore pada nama file dan ekstensi file-nya. Preprocessor Sass cukup pintar untuk mengimpor file yang kita inginkan.

Layouts

Di sini, letakkan gaya tata letak tema Anda. Misalnya, ini akan mencakup header, sidebar, footer, dan tata letak halaman Anda sebagai _header.scss, _sidebar.scss, _footer.scss dan _page.scss.

Anda bisa menggunakan awalan l- untuk nama kelas tata letak Anda:

// _header.scss
.l-main-header {
    margin: 30px;
    padding: 20px;
    font-size: 16px;
}

// _navigation.scss
.l-main-nav {
    position: relative;
}

Ini juga merupakan tempat yang baik untuk stylesheet grid Anda. Anda juga bisa membaca lebih banyak tentang peraturan tata letak SMACSS.

Modules

Modules adalah elemen konten yang dapat digunakan kembali. Misalnya, posting blog adalah modul karena peraturannya digunakan kembali pada banyak instance modul yang sama. Widget, shortcode, dan ikon juga merupakan jenis dari modul.

Modul dapat berisi sub modul. Berikut adalah contoh modul widget dan submodul judulnya:

1	<li class="widget">
2	<h4 class="widget__title">Recent Posts</h4>
3	</li>

.widget {
    padding: 10px;
}

.widget__title {
    font-size: 15px;
}

Di sini kita menggunakan konvensi penamaan kelas BEM (Block Element Modifier).

States

Tempatkan di sini stylesheet Anda yang mengendalikan penampilan elemen Anda tergantung pada beberapa status. Jika Anda membangun tema responsif tempatkan di sini stylesheet media query Anda.

Mari membuatnya sekarang juga.

Buat file baru di editor teks Anda dan simpan sebagai _media_queries.scss di folder /sass/states/. Paste aturan ukuran layar umum ini di dalam file:

1	/*! =Media Queries
2	-------------------------------------------------------------- */
3
4	/* 956-768px */
5	@media only screen and (min-width: 768px) and (max-width: 959px) {
6
7	}
8
9	/* 767-480px */
10	@media only screen and (min-width: 480px) and (max-width: 767px) {
11
12	}
13
14	/* 479px */
15	@media only screen and (max-width: 479px) {
16
17	}

Jangan lupa mengimpor stylesheet baru kita di file style.scss kita:

// Base 
@import "base/normalize";

// States 
@import "states/media_queries"

Jika Anda memiliki misalnya menu navigasi off-screen, di sini Anda dapat meletakkan gaya yang akan mengendalikan tampilan saat navigasi Anda .is-open atau .is-closed, namun, dalam kebanyakan kasus, Anda akan memasukkannya ke dalam file tata letak atau modul untuk navigasi off-canvas.

Themes

Ini adalah tempat yang bagus untuk menempatkan gaya plugin WordPress kustom Anda. Misalnya, di sini Anda bisa memasukkan gaya kustom Anda untuk, katakanlah, plugin Contact Form 7.

Info Tema

Setiap file style.css tema WordPress harus berisi informasi meta tentang tema seperti nama tema, penulis, versi dan lainnya. Kita dapat memanfaatkan variabel Sass untuk mengubah informasi tersebut untuk setiap tema yang kita buat.

Pertama buat file baru yang disebut _vars.scss dan simpan di dalam folder sass. Dalam file ini kita akan memasukkan semua variabel kita. Jika Anda mendapati bahwa file ini tumbuh terlalu besar, pisahkan isinya ke file-file yang lebih kecil.

Buka file yang baru dibuat dan masukkan variabel berikut ini:

// Theme Information
//--------------------------------------------//
$theme_name: "My Theme";
$theme_uri: "#";
$theme_description: "My WordPress Theme";
$theme_version: "1.0";
$theme_author: "my name";
$theme_author_uri: "#";
$theme_license: "GPL";
$theme_tags: "responsive-layout, post-formats";

Sekarang kita perlu membuat file yang akan menggunakan variabel di atas. Dengan menggunakan editor teks pilihan Anda, buat file baru yang disebut _theme_info.scss dan simpan di folder sass. Isi _theme_info.scss dengan konten berikut:

/*!

Theme Name: #{ $theme_name }
Theme URI: #{ $theme_uri }
Description: #{ $theme_description }
Version: #{ $theme_version }
Author: #{ $theme_author }
Author URI: #{ $theme_author_uri }
License: #{ $theme_license }
License URI: License.txt
Tags: #{ $theme_tags }

*/

Langkah terakhir adalah mengimpor file yang baru kita buat di dalam style.scss, mari kita juga mengimpor komponen Compass:

@import "compass";

@import "vars";
@import "theme_info";

// Base 
@import "base/normalize";

// States 
@import "states/media_queries";

Sekarang jika Anda membuka file style.css yang diproses maka akan berisi blok komentar informasi tema WordPress dengan nilai variabel yang Anda tetapkan di file _vars.scss.

Pembantu

Ini adalah praktik yang baik untuk menggunakan kelas CSS generik yang lebih kecil lagi untuk memberi gaya elemen daripada menggunakan penyeleksi yang terlalu spesifik. Ikuti prinsip DRY - Don't Repeat Yourself. Kita bisa membuat stylesheet untuk kelas pembantu kecil kita. Sebagai contoh, saya akan mendefinisikan beberapa pembantu tata letak dan tipografi.

Buat file baru yang disebut _helpers.scss dan simpan di dalam folder sass. Sekali lagi, seperti pada file variabel, jika file pembantu Anda terlalu besar untuk dipelihara, pertimbangkan untuk membelahnya menjadi file yang lebih kecil.

Buka file yang baru dibuat dan paste:

/*! =Helpers
-------------------------------------------------------------- */

// Layout
//--------------------------------------------//
.left {
    float: left;
}

.right {
    float: right;
}

.clear {
    clear: both;
}

.hide {
    display: none;
}

.hidden {
    opacity: 0;
    visibility: hidden;
}

.clearfix {

    &:before,
    &:after {
        content: " ";
        display: table;
    }

    &:after {
        clear: both;
    }
}

.center-block {
    display: block;
    margin: 0 auto;
}

// Typography
//--------------------------------------------//
.f-normal {
    font-weight: normal;
}

.f-bold {
    font-weight: bold;
}

.f-italic {
    font-style: italic;
}

.t-strike {
    text-decoration: line-through;
}

.t-overline {
    text-decoration: overline;
}

.t-underline {
    text-decoration: underline;
}

.t-left {
    text-align: left;
}

.t-right {
    text-align: right;
}

.t-center {
    text-align: center;
}

Seperti yang dapat Anda lihat di sini kita menggunakan awalan f- untuk kelas yang berhubungan dengan font dan t- untuk yang berhubungan dengan teks. Simpan file Anda dan impor di dalam style.scss:

@import "compass";

@import "vars";
@import "theme_info";

// Base 
@import "base/normalize";

// Helpers 
@import "helpers";

// States 
@import "states/media_queries";

Menghasilkan Sprite

Compass dilengkapi dengan metode praktis untuk menghasilkan sprite gambar. Kita akan menempatkan ikon kita di dalam folder icons dan icons@2x kita, dimana yang terakhir berisi ikon yang sama namun berukuran dua kali lipat untuk perangkat dengan tampilan retina.

Untuk contoh ini, saya akan memasukkan dua file icon: checkmark.png dan star.png yang bisa Anda temukan di paket download yang terkait dengan postingan ini.

Untuk setiap ikon, kita akan membuat kelas CSS terpisah menggunakan daftar Sass dengan semua nama file ikon. Buka file _vars.scss dan tambahkan kode berikut:

// Icons
//--------------------------------------------//
// map *.png icon files
$icons_sprite: sprite-map( "icons/*.png" ); 
$icons_sprite2x: sprite-map( "icons@2x/*.png" );

// generate the icons sprites
$sprites_file: sprite-url( $icons_sprite );
$sprites2x_file: sprties-url( $icons_sprite2x );

$sprites_url: url( "images/" + sprite-path( $icons_sprite ) );
$sprites2x_url: url( "images/" + sprite-path( $icons_sprite2x ) );

// list with theme icons file names (found in icons and icons@2x folders)
$theme_icons: ( "checkmark", "star" );

Compass akan menemukan semua file gambar *.png di dalam folder icons kita dan akan menghasilkan dua gambar sprite di folder images. Sekarang kita akan menghasilkan kelas CSS untuk gambar-gambar tersebut.

Untuk menemukan posisi ikon di dalam gambar sprite, kita akan membuat dua mixins pembantu. Untuk melakukannya, buat file baru dan namakan _mixins.scss lalu buka dan paste kode berikut:

// Icons
//--------------------------------------------//
@mixin sprite_icon( $name, $sprite ) {
    
    @include sprite-dimensions( $sprite, $name );
    background-position: sprite-position( $sprite, $name );
}

@mixin retina_sprite_icon( $name, $sprite ) {
    
    $pos: sprite-position( $sprite, $name );
    background-position: nth( $pos, 1 ) nth( $pos, 2 ) / 2;
    @include background-size( ceil( image-width( sprite-path( $sprite ) ) / 2 ) auto );
}

Kedua mixins tersebut menerima nama ikon plus peta sprite sebagai argumen. Mixins tersebut akan mengatur width, height dan background position untuk ikon di dalam gambar sprite yang dihasilkan. retina_sprite_icon juga akan mengatur ukuran latar belakang yang sesuai untuk ikon retina.

Sekarang saatnya untuk menghasilkan kelas ikon kita. Buat file baru yang disebut _icons.scss dan simpan di dalam folder /sass/modules/. Selanjutnya, paste di dalam konten berikut:

/*! =Icons 
-------------------------------------------------------------- */
@if ( length( $theme_icons ) > 0 ) {

    .icon {
        display: inline-block;
        background: $sprites_url no-repeat;
    }
                
    @each $icon in $theme_icons {
        
        .#{ "icon--" + $icon } {
            
            @include sprite_icon( $icon, $icons_sprite );
        }
    }

    @media
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (   min--moz-device-pixel-ratio: 2),
    only screen and (     -o-min-device-pixel-ratio: 2/1),
    only screen and (        min-device-pixel-ratio: 2),
    only screen and (                min-resolution: 192dpi),
    only screen and (                min-resolution: 2dppx) {

        .icon {
            background: $sprites2x_url;
        }

        @each $icon in $theme_icons {
            
            .#{ "icon--" + $icon } {

                @include retina_sprite_icon( $icon, $icons_sprite2x );
            }
        }
    }

}

Di sini, kita loop melalui daftar nama ikon kita yang diidentifikasi oleh $theme_icons dan menghasilkan aturan gaya retina dan non retina menggunakan mixins ikon kita. Dari situlah, kita menghasilkan sebuah kelas yang disebut .icon yang akan menjadi modul dasar untuk ikon kita dan kemudian kelas pengubah modul untuk setiap ikon dalam daftar.

Dalam contoh ini, akan menghasilkan kelas .icon--checkmark dan .icon--star. Berikut adalah contoh penggunaan ikon bintang:

1	<i class="icon icon--star"></i>

Akhirnya mari kita mengimpor modul mixin dan ikon kita di dalam file style.scss:

@import "compass";

@import "vars";
@import "mixins";
@import "theme_info";

// Base 
@import "base/normalize";

// Helpers 
@import "helpers";

// Modules
@import "modules/icons";

// States
@import "states/media_queries";

Kesimpulan

Sass dan Compass adalah utilitas yang sangat kuat dan dapat memperbaiki pengembangan WordPress dan pengembangan plugin WordPress Anda. Panduan ini bertujuan untuk membuat Anda di perjalanan untuk menciptakan proses yang lebih berseni untuk bekerja dengan WordPress.

Bagi yang penasaran dan ingin membaca lebih lanjut tentang beberapa informasi yang tercakup dalam tutorial ini, silahkan tinjau artikel berikut ini: