diff options
| -rw-r--r-- | ms-my/sass-my.html.markdown | 232 |
1 files changed, 232 insertions, 0 deletions
diff --git a/ms-my/sass-my.html.markdown b/ms-my/sass-my.html.markdown new file mode 100644 index 00000000..68ce4ab3 --- /dev/null +++ b/ms-my/sass-my.html.markdown @@ -0,0 +1,232 @@ +--- +language: sass +filename: learnsass-ms.scss +contributors: + - ["Laura Kyle", "https://github.com/LauraNK"] +translators: + - ["hack1m", "https://github.com/hack1m"] +lang: ms-my +--- + +Sass ialah bahasa sambungan CSS yang menambah ciri-ciri seperti pembolehubah, bersarang, mixins dan banyak lagi. +Sass (dan prapemproses lain, seperti [Less](http://lesscss.org/)) membantu pembangun untuk menulis kod mampu diselenggara dan DRY (Don't Repeat Yourself). + +Sass mempunyai dua perbezaan pilihan sintaks untuk dipilih. SCSS, yang mana mempunyai sintaks yang sama seperti CSS tetapi dengan ditambah ciri-ciri Sass. Atau Sass (sintaks asal), yang menggunakan indentasi bukannya tanda kurung dakap dan semikolon. +Tutorial ini ditulis menggunakan SCSS. + +```scss + +//Komen baris tunggal dikeluarkan apabila Sass dikompil ke CSS. + +/*Komen multi dikekalkan. */ + + + +/*Pembolehubah +==============================*/ + + + +/* Anda boleh menyimpan nilai CSS (seperti warna) dalam pembolehubah. +Guna simbol '$' untuk membuat pembolehubah. */ + +$primary-color: #A3A4FF; +$secondary-color: #51527F; +$body-font: 'Roboto', sans-serif; + +/* Anda boleh mengguna pembolehubah diseluruh lembaran gaya anda. +Kini jika anda ingin mengubah warna, anda hanya perlu membuat perubahan sekali.*/ + +body { + background-color: $primary-color; + color: $secondary-color; + font-family: $body-font; +} + +/* Ia akan dikompil kepada: */ +body { + background-color: #A3A4FF; + color: #51527F; + font-family: 'Roboto', sans-serif; +} + + +/* Ini jauh lebih mampu diselenggara daripada perlu menukar warna +setiap yang ada diseluruh lembaran gaya anda. */ + + + +/*Mixins +==============================*/ + + + +/* Jika anda jumpa yang anda menulis kod yang sama pada lebih dari satu +elemen, anda mungkin ingin menyimpan kod itu di dalam mixin. + +Guna arahan '@mixin', tambah dengan nama untuk mixin anda.*/ + +@mixin center { + display: block; + margin-left: auto; + margin-right: auto; + left: 0; + right: 0; +} + +/* Anda boleh guna mixin bersama '@include' dan nama mixin. */ + +div { + @include center; + background-color: $primary-color; +} + +/*Ia akan dikompil kepada: */ +div { + display: block; + margin-left: auto; + margin-right: auto; + left: 0; + right: 0; + background-color: #A3A4FF; +} + + +/* Anda boleh guna mixins untuk membuat singkatan property. */ + +@mixin size($width, $height) { + width: $width; + height: $height; +} + +/*Yang mana anda boleh seru dengan memberi argumen lebar dan tinggi. */ + +.rectangle { + @include size(100px, 60px); +} + +.square { + @include size(40px, 40px); +} + +/* Ia dikompil kepada: */ +.rectangle { + width: 100px; + height: 60px; +} + +.square { + width: 40px; + height: 40px; +} + + + + +/*Extend (Inheritance) +==============================*/ + + + +/*Extend ialah jalan untuk berkongsi sifat dengan satu pemilih dengan yang lain. */ + +.display { + @include size(5em, 5em); + border: 5px solid $secondary-color; +} + +.display-success { + @extend .display; + border-color: #22df56; +} + +/* Dikompil kepada: */ +.display, .display-success { + width: 5em; + height: 5em; + border: 5px solid #51527F; +} + +.display-success { + border-color: #22df56; +} + + + + +/*Bersarang +==============================*/ + + + +/*Sass membenarkan anda untuk sarangkan pemilih dengan pemilih */ + +ul { + list-style-type: none; + margin-top: 2em; + + li { + background-color: #FF0000; + } +} + +/* '&' akan digantikan dengan pemilih induk. */ +/* Anda juga boleh sarangkan kelas-pseudo. */ +/* Perlu diingat terlebih bersarang akan membuat kod anda kurang mampu diselenggara. +Sebagai contoh: */ + +ul { + list-style-type: none; + margin-top: 2em; + + li { + background-color: red; + + &:hover { + background-color: blue; + } + + a { + color: white; + } + } +} + +/* Dikompil kepada: */ + +ul { + list-style-type: none; + margin-top: 2em; +} + +ul li { + background-color: red; +} + +ul li:hover { + background-color: blue; +} + +ul li a { + color: white; +} + + + + +``` + + + +## SASS atau Sass? +Adakah anda tertanya-tanya sama ada Sass adalah akronim atau tidak? Anda mungkin tidak perlu, tetapi saya akan memberitahu. Nama bahasa ini adalah perkataan, "Sass", dan tidak akronim. +Kerana orang sentiasa menulis ia sebagai "Sass", pencipta bahasa bergurau memanggilnya "Syntactically Awesome StyleSheets". + +## Berlatih Sass +Jika anda ingin bermain dengan Sass di pelayar anda, lihat [SassMeister](http://sassmeister.com/). +Anda boleh guna salah satu sintaks, hanya pergi ke tetapan dan pilih sama ada Sass atau SCSS. + + +## Bacaan lanjut +* [Dokumentasi Rasmi](http://sass-lang.com/documentation/file.SASS_REFERENCE.html) +* [The Sass Way](http://thesassway.com/) menyediakan tutorial (asas-lanjutan) dan artikel. |