Dasar-dasar Sytles Sassy Dijelaskan

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

Pada panduan ini kita akan membahas apa yang bisa dilakukan dengan styles fleksibel Sass termasuk di dalam framework Foundation. Banyak darinya menawarkan sekumpulan fitur yang lebih bisa dikostumisasi ketimbang yang dimiliki versi CSS, ditambah lagi terdapa jalan pintas-jalan pintas yang bisa digunakan item style seperti top bar secara cepat dan mudah.

Ikuti panduan yang ditemukan dalam Mengatur Foundation Dengan Sass dan Compass atau Dokumentasi Zurb jika kamu butuh bantuan mengatur Foundation dengan Sass. Kamu bisa menggunakan baris perintah untuk mempersiapkan dan berjalan dengan Compass dan Bourbon, atau jika tidak cukup ambil berkas aplikasi Sass mandiri dari GitHub, letakkan mereka di folder proyekmu dan impor kapanpun kamu butuhkan.

and theres plenty to choose from — .. dan ada banyak yang bisa dipilih..

Grid

Mari mulai dengan gridnya sebagai dasar dari Foundation. Dia juga sebuah kompnen yang bagus untuk menunjukkanmu bagaimana scss/sass bisa jadi sangat fleksibel.

Contohnya, saat menggunakan mixins yang tersedia untuk grid (mixins, seperti jalan pintas ke kode yang telah ditulis sebelumnya) kamu bisa membuat class-mu sendiri atau bahkan grid-mu sendiri dengan menggunakan beberapa variabel sederhana. Mari lihat pada contoh pertama yang Foundation berikan padamu:

/* Mixin options creating rows */
@include grid-row($behavior);

/* The default value is false, which will bring in the default row styles */
$behavior: false

/* If the element you are creating as a row is nested within another element */
/* that is also a row, you need to add the proper nesting styles */
$behavior: nest

/* You can use this option to collapse the container row margins */
/* This comes in handy when working with forms inside the grid */
$behavior: collapse

/* If you have a nested row and want it to be collapsed, you need to add this option */
$behavior: nest-collapse

Kamu bisa lihat di sini bahwa kita memiliki sebuah mixin (mereka diacu dengan awalan '@') yang memiliki tanda kurung berisi variabel. Kita bisa mulai dengan @include grid-row yang menspesifikasikan opsi di dalam kurung.

Saat kamu membuat sebuah mixin kamu bisa menspesifikasikan bagian-bagian dari kode yang telah tertulis untuk berubah tiap saat kamu menggunakannya dalam mixin. Sebuah contoh sederhana bisa jadi untuk membuat sebuah mixin yang menambahkan sebuah font beserta ukuran, berat, warna dan lainnya. Tapi mungkin kamu ingin bisa mengganti warna font tiap saat kamu menggunakan mixin-nya. Ini bisa jadi apa yang akan kamu letakkan dalam kurung.

Pada kasus ini kita menggunakan sebuah variabel di dalam kodenya, variabel bisa digunakan untuk menyimpan nilai apapun di Sass dan dimulai dengan sebuah tanda '$'. contohnya:

/* here we create the mixin */
@mixin font($color) {
font-family: 'Arial';
font-size: 14px;
font-weight: 500;
color: $color;
}

/* here we define a variable to use within it */
$blue = #0099cc;

/* and here we actually use the mixin*/
@include font($blue);

Jadi dalam kode ini kita telah membuat sebuah mixin dengan opsi warna yang bisa dikostumisasi. Di bawahnya kita telah mendefinisikan sebuah warna dengan variabel $blue lalu mengikutinya. Kita sebenarnya menggunakan mixin-nya. Mengacu ke variabel $blue kita di dalam kurung yang sama dengan kode hex #0099cc.

Jika kita mengacu kembali ke kode di contoh pertama kita. Kamu akan melihat penggunaan $behaviour beberapa kali. Ini mungkin terlihat sedikit asing dan penafsiran umumnya adalah "Tunggu! bukankah itu hanya menimpa variabelnya tiap saat?" Intinya, kamu menyediakan sebuah nilai untuk tiap opsi dalam sebuah tipe daftar atau dikenal juga sebagai array. Tiap kali kamu menggunakan $behaviour keluarannya akan sejalan dengan opsinya agar mereka dideklarasikan.

Kamu mungkin juga akan melihat banyak variabelv di dalam include-mu:

 @include grid-column($columns, $last-column);

/* The most commonly used option with a column */
 /* This sets the width properties for the column, use a number to represent columns */
 $columns: #
 /* Use this option if your columns do not add up to 12. */
 /* We make the last column default to float:right to keep things aligned */
 /* If you do not want this, set $last-column to true */
 $last-column: false

Untuk membuatnya lebih jelas, kita akan membuat sebuah grid hanya dengan menggunakan HTML paling dasar, karena class tidak di semua tempat yang dibutuhkan akibat semua jalan pintas styling yang diatur ke kode Sass itu sendiri. Berikut adalah sebuah contoh sederhana untuk membangun sebuah header.

<header>
<aside></aside>
    <section>
       <article>
          <header></header>
          <div></div>
       </article>
    </section>
</header>

$row-width: em-calc(600);
$column-gutter: em-calc(30);
$total-columns: 12 !default;

header { @include grid-row; @include panel;
    aside { @include grid-column(3); }
    section { @include grid-column(9);
       article { @include grid-row;
          header { @include grid-column(2); }
          div { @include grid-column(10); }
       }
    }
}

Kamu bisa lihat di sini bahwa html-nya minimal dan sass menghitung sarangnya dengan sempurna. saya juga telah mengatur beberapa nilai global untu lebar maksimal, jarak antarkolom dan jumlah kolom. Dari sudut pandang HTML ini menyimpan banyak waktu, namun proses di balik tata letak ini bisa jadi sedikit membingungkan untuk dikenali. Mari perhatikan tombol-tombolnya dan cara kamu bisa memanipulasinya menggunakan Sass.

Tombol-Tombol

Satu hal yang bagus mengenai Sass adalah betapa cepatnya kamu bisa menata halamanmu dan betapa banyak waktu yang kamu hemat karena tidak perlu menduplikasi kode.

Kamu bisa membuat jalan pintas ke style tombol dengan menggunakan sesuatu yang sederhana seperti:

1	.your-class-name { @include button; }

Tambahkan beberapa opsi, dan hanya dalam satu baris kamu telah membuat sebuah style replikasi yang bisa menghabiskan enam atau tujug baris CSS, benar-benar menghemat waktu!

Kamu juga akan menyadari bahwa untuk tombol terdapat banyak sekali pilihan yang tidak ada di versi CSS dan ini benar untuk semua elemen Sass. Ini akan benar-benar menambah layer tambahandari kebebasan dibandingkan versi CSS-nya yang muungkin kamu pernah gunakan sebelumnya. Berikut adalah contoh dari sebuah tombol yang dibuat menggunakan variabel, lalu yang sama namun menggunakan nilai langsung sehingga kamu bisa benar-benar paham ide bagus dari cara kerja hal ini.

.your-class-name {
    @include button($padding, $bg, $radius, $full-width, $disabled, $is-input);
    @include inset-shadow($active);
}
.your-class-name {
    @include button(1em, #ca2727, 2px, false, false, false);
    @include inset-shadow(true);
}

Ini hanyalah sebuah contoh sederhana, tapi ini adalah contoh yang akan kamu buat berkali-kali. Saat kode-nya dikompilasi kamu akan berakhir dengan CSS seperti ini (dan seiring kamu bisa bayangkan kode keluarannya akan menghabiskan banyak waktu untuk ditulis dibanding yang diperlukan Sass):

.link {
border-style: solid;
border-width: 1px;
cursor: pointer;
font-family: inherit;
font-weight: bold;
line-height: normal;
margin: 0 0 1.25em;
position: relative;
text-decoration: none;
text-align: center;
display: inline-block;
padding-top: 1em;
padding-right: 2em;
padding-bottom: 1.0625em;
padding-left: 2em;
font-size: 1.25em;
background-color: #ca2727;
border-color: #9f1f1f;
color: white;
-webkit-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}

Meskipun banyak dari-mu yang akan menganggap Sass sebagai bahasa dari dunia lain. Ini sebenarnya sangat cepat untuk dipahami ketika kamu telah menulis beberapa baris. Strukturnya sedikit lebih dikembangkan ketimbang CSS dan jika kamu terjebak kamu bisa kembali ke CSS dengan SCSS yang kamu harus melakukannya.

Kalkulator Satuan

Terkakhir, satu yang jarang ditulis mengenai fitur Sass adalah kemampuannya untuk menambah fungsi ke stylsheets-mu. Mereka bukanlah fungsi on-page dinamis (mereka berjalan saat kamu mengompilasi kode Sass-mu). Namun, mereka menawarkan kesempatan yang menarik untuk menghemat waktumu.

Contohnya, di Foundation ada sebuah fungsi untuk mengonversi px menjadi em. Ini luar biasa untuk situs responsif; cukup atur nilai dasar em melalui:

1	$em-base: 16px!default;

Lalu, kapanpun kamu ingin menggunakan nilai em, bagi kamu yang biasanya harus menghitung dari pixel ke em, cukup gunakan:

1	height:em-calc(46);

"46" menjadi nilai dari piksel dan em-calc adalah fungsinya. Kamu bisa menggunakan ini di maanpun di dalam kode Sass-mu di mana kamu akan membutuhkan sebuah nilai piksel.

Alat Berguna

Di kiriman terakhir, saya menyebut mengenai Sass compilers dan banyak manfaat yang dia miliki dibandingkan kompilasi manual. Kali ini saya akan menunjukkanmu sebuah alat yang saya rasa berguna pada hampir setiap proyek yang pernah saya kerjakan.

Terutama saat berbicara mengenai Foundation kamu akan bekerja dengan Sass, CSS, HTML dan JAvaScript. Namun jangan lupakan bagian besar dari perancangan situs yang berputar di sektiar gambar. Terutama png dan jpg. Sangat perlu untuk memubat situsnya mengomptimasi gambar. Maka gunakanlah baik imageOptim (OS X) ataupun File Optimizer (Windows)

Alat-alat ini akan mengompresi gambar tanpa kehilangan kualitasnya. Ini sangat efektif dan tingkat kompresinya menakjubkan dengan beberapa reduksi hingga 70%. Pikirkan mengenai ini; jika kamu mengunggah png pada 100kb kamu bisa berharap yang berukuran 30kb setelah konversi. Ini bahkan bisa jadi lebih efektif jika kamu menggunakan gambar sprites.

Yang Akan Datang...

Kita telah melihat dasar-dasar dari Sass, cara mengaturnya, apa yang bisa kamu lakukan dengannya dan dan bagaimana dia bisa mempercepat arus kerjamu. Di bagian berikutnya kita akan bergeser ke sesuatu yang lebih menarik; Dasar-dasar untuk Rails. Ini akan mengizinkan beberapa fungsi dinamis yang akan duduk bersama HTML, CSS, dan JavaScript-mu.