{"id":11476,"date":"2021-06-09T00:49:12","date_gmt":"2021-06-09T00:49:12","guid":{"rendered":"https:\/\/hosteko.com\/blog\/?p=11476"},"modified":"2021-06-09T00:49:12","modified_gmt":"2021-06-09T00:49:12","slug":"pengertian-cara-kerja-dan-fitur-scss","status":"publish","type":"post","link":"https:\/\/hosteko.com\/blog\/pengertian-cara-kerja-dan-fitur-scss","title":{"rendered":"Pengertian, Cara Kerja dan Fitur SCSS"},"content":{"rendered":"

Pengertian SCSS<\/strong><\/h2>\n

SCSS atau Sassy CSS<\/strong> adalah sintaks terbaru dari SASS (Syntactically Awesome Style Sheets). SASS sendiri adalah preprocessor CSS, yaitu sebuah program untuk mengolah data menggunakan syntax tertentu dengan output CSS.<\/p>\n

SCSS banyak digunakan karena memiliki aturan penulisan yang lebih ramah bagi developer. Selain itu, banyak fitur yang ditawarkan agar coding jadi lebih efisien. Jadi tidak perlu berulang kali menulis kode yang sama seperti ketika coding dengan CSS.<\/p>\n

Cara kerja SCSS sebagai preprocessor adalah dengan melakukan coding dengan syntax SCSS, lalu menyimpan file tersebut dengan ekstensi\u00a0.scss<\/strong>. Nah, karena file .scss tidak dapat dibaca oleh browser, maka akan ada proses kompilasi (preprocessing) agar menjadi sebuah file CSS.<\/p>\n

Fitur SCSS<\/span><\/strong><\/h2>\n

Berikut ini adalah beberapa fitur SCSS yang membuat pekerjaan coding lebih mudah, yaitu :<\/p>\n

1. Nesting<\/span><\/strong><\/h3>\n

Nesting<\/strong> adalah fitur yang membantu mengurangi frekuensi penulisan selektor dengan cara mengelompokkannya dalam satu kelas yang sama.<\/p>\n

Ketika menggunakan CSS untuk\u00a0 merancang navigasi bar sebuah website, inilah contoh kode yang akan digunakan :<\/p>\n

nav {<\/span>\r\n\u00a0 background-color:#333;<\/span>\r\n\u00a0 padding:1em;<\/span>\r\n}<\/span>\r\nnav ul {<\/span>\r\n\u00a0 margin:0;<\/span>\r\n\u00a0 padding:0;<\/span>\r\n\u00a0 list-style:none;<\/span>\r\n}<\/span>\r\nnav ul li {<\/span>\r\n\u00a0 display:inline-block;<\/span><\/pre>\n
Dalam contoh itu perlu menuliskan nav dalam setiap tag. Sebab, tag adalah parent dari setiap kelas.<\/p>\n
Ketika menggunakan SCSS dengan fitur nesting, cukup menggunakan kode nav untuk setiap kelas sebagai berikut :<\/p>\n
nav {<\/span>\r\n\u00a0 background-color:#333;<\/span>\r\n\u00a0 padding:1em;<\/span>\r\n\u00a0 ul {<\/span>\r\n\u00a0 \u00a0 margin:0;<\/span>\r\n\u00a0 \u00a0 padding:0;<\/span>\r\n\u00a0 \u00a0 list-style:none;<\/span>\r\n\u00a0 \u00a0 li {<\/span>\r\n\u00a0 \u00a0 \u00a0 display:inline-block;<\/span>\r\n\u00a0 \u00a0 }<\/span>\r\n\u00a0 }<\/span>\r\n}<\/span><\/pre>\n
Dengan demikian, pekerjaan coding bisa dilakukan lebih cepat.<\/p>\n
2. Variables<\/span><\/strong><\/h3>\n
Variabel<\/strong> merupakan fitur untuk menyimpan rules yang sering digunakan. Jadi, ketika ingin mengubah rules di banyak elemen, tidak perlu mengubah rules satu-persatu. Cukup dengan sekali perubahan saja.<\/p>\n
Contohnya memiliki 20 variabel dengan nama boks. Variabel itu mewakili warna background yang berbeda tapi\u00a0 memiliki ukuran yang sama.<\/p>\n
Jika menuliskannya dalam CSS, contoh kode yang digunakan adalah seperti ini :<\/p>\n
.box-1 {<\/span>\r\n\u00a0 width: 100px;<\/span>\r\n\u00a0 height: 100px;<\/span>\r\n\u00a0 background: red;<\/span>\r\n}<\/span>\r\n.box-2 {<\/span>\r\n\u00a0 width: 100px;<\/span>\r\n\u00a0 height: 100px;<\/span>\r\n\u00a0 background: yellow;<\/span>\r\n}<\/span>\r\n\u2026<\/span>\r\n.box-20 {<\/span>\r\n\u00a0 width: 100px;<\/span>\r\n\u00a0 height: 100px;<\/span>\r\n\u00a0 background: blue;<\/span>\r\n}<\/span><\/pre>\n
Masalah yang muncul adalah jika suatu hari klien ingin mengubah ukuran semua elemen menjadi lebih besar. Tentu perlu mengganti kode ukuran width dan height satu persatu, hal ini tentu akan merepotkan.<\/p>\n
Dengan SCSS bisa menyimpan rules width dan height sebagai sebuah variabel. Contohnya seperti ini :<\/p>\n
$box-width: 100px;<\/span>\r\n$box-height: 100px;<\/span><\/pre>\n
Nantinya jika ingin merubah ukuran semua elemen box, cukup dengan menentukan ukuran variable width dan height sesuai keinginan, seperti contoh ini :<\/p>\n
$box-width: 200px; \u00a0 \u00a0 \/\/ changed from 100px to 200px<\/span>\r\n$box-height: 200px;\u00a0 \u00a0 \/\/ that\u2019s all!<\/span>\r\n.box-1 {<\/span>\r\n\u00a0 width: $box-width;\u00a0 \/\/ using variables now instead of pixels<\/span>\r\n\u00a0 height: $box-height;<\/span>\r\n\u00a0 background: red;<\/span>\r\n}<\/span>\r\n.box-2 {<\/span>\r\n\u00a0 width: $box-width;<\/span>\r\n\u00a0 height: $box-height;<\/span>\r\n\u00a0 background: yellow;<\/span>\r\n}<\/span>\r\n\u2026<\/span>\r\n.box-20 {<\/span>\r\n\u00a0 width: $box-width;<\/span>\r\n\u00a0 height: $box-height;<\/span>\r\n\u00a0 background: blue;<\/span>\r\n}<\/span><\/pre>\n
3. Mixins<\/span><\/strong><\/h3>\n
Mixins<\/strong> adalah fitur untuk mengelompokkan rules yang sering digunakan dengan nama tertentu. Jadi, ketika membutuhkan kombinasi rules tersebut, cukup mengetikkan nama mixin-nya.<\/p>\n
Fitur ini terutama diperlukan jika sering menggunakan jenis dan ukuran font tertentu untuk keperluan branding.<\/p>\n
Penerapannya Misal memiliki font rules Arial, Helvetica dan Sans Serif dengan ukuran 16 px. bisa membuat mixin dan menamainya my-font dengan mengetikkan command @mixin<\/strong> seperti ini :<\/p>\n
@mixin my-font {<\/span>\r\nfont-family: Arial, Helvetica, sans-serif;<\/span>\r\nfont-size: 16px;<\/span>\r\nfont-style: italic;<\/span>\r\n}<\/span><\/pre>\n
Ketika membutuhkan kombinasi rules tersebut cukup menggunakan @include seperti ini :<\/p>\n
p {<\/span>\r\n@include my-font;<\/span>\r\n}<\/span><\/pre>\n
4. Imports<\/span><\/strong><\/h3>\n
Imports<\/strong> adalah fitur untuk memecah file CSS yang berukuran besar dengan cara mengurangi baris kode di file CSS. Hasil pecahannya berupa file Sass yang lebih kecil. Tujuannya agar kode CSS Anda lebih mudah dan cepat dibaca oleh compiler.<\/p>\n
Begini contoh penulisan sintaksnya :<\/p>\n
\/\/ file Sass utama Anda<\/span>\r\n@import \u2018file\u2019;<\/span>\r\n@import \u2018File lain\u2019;<\/span>\r\n.class {<\/span>\r\n\/\/ kode Anda<\/span>\r\n}<\/span><\/pre>\n
5. Extend<\/span><\/strong><\/h3>\n
Extend<\/strong> adalah fitur yang digunakan untuk mewariskan kode salah satu selektor kepada selektor lain. Sehingga tidak perlu mengulang penulisan kode jika beberapa selektor memiliki properti yang sama.<\/p>\n
Misalnya memiliki kode CSS seperti ini :<\/p>\n
.contact {<\/span>\r\n\u00a0 color: #333;<\/span>\r\n\u00a0 border: 1px solid #bbb;<\/span>\r\n\u00a0 box-shadow: 1px 1px 0 #ddd;<\/span>\r\n\u00a0 margin: 0 0 10px;<\/span>\r\n\u00a0 padding: 15px;<\/span>\r\n}<\/span>\r\n\r\n.maps {<\/span>\r\n\u00a0 background-color: yellow;<\/span>\r\n\u00a0 color: #333;<\/span>\r\n\u00a0 border: 1px solid #bbb;<\/span>\r\n\u00a0 box-shadow: 1px 1px 0 #ddd;<\/span>\r\n\u00a0 margin: 0 0 10px;<\/span>\r\n\u00a0 padding: 15px;<\/span>\r\n}<\/span>\r\n\r\n.body {<\/span>\r\n\u00a0 background-color: orange;<\/span>\r\n\u00a0 color: #333;<\/span>\r\n\u00a0 border: 1px solid #bbb;<\/span>\r\n\u00a0 box-shadow: 1px 1px 0 #ddd;<\/span>\r\n\u00a0 margin: 0 0 10px;<\/span>\r\n\u00a0 padding: 15px;<\/span>\r\n}<\/span><\/pre>\n
Seperti yang dilihat, .contact<\/strong>,\u00a0.maps<\/strong>\u00a0dan\u00a0.body<\/strong> memiliki properti yang sama. Jika selektor yang ditulis semakin banyak, akan perlu waktu mengerjakannya dan coding menjadi lebih kompleks. Dengan memanfaatkan fitur extend bisa merampingkan kode menjadi seperti ini :<\/p>\n
.website {<\/span>\r\n\u00a0 color: #333;<\/span>\r\n\u00a0 border: 1px solid #bbb;<\/span>\r\n\u00a0 box-shadow: 1px 1px 0 #ddd;<\/span>\r\n\u00a0 margin: 0 0 10px;<\/span>\r\n\u00a0 padding: 15px;<\/span>\r\n}<\/span>\r\n\r\n.contact {<\/span>\r\n\u00a0 @extend .meal-box;<\/span>\r\n}<\/span>\r\n\r\n.maps {<\/span>\r\n\u00a0 @extend .meal-box;<\/span>\r\n\u00a0 background-color: yellow;<\/span>\r\n}<\/span>\r\n\r\n.body {<\/span>\r\n\u00a0 @extend .meal-box;<\/span>\r\n\u00a0 background-color: orange;<\/span>\r\n}<\/span><\/pre>\n
6. Operator<\/span><\/strong><\/h3>\n
Operator<\/strong> adalah fitur yang membantu melakukan perhitungan matematis. Misalnya, menghitung width pada kolom di sebuah kelas. Berikut ini adalah contoh penggunaannya :<\/p>\n
$columnCount: 12;<\/span>\r\n@for $i from 1 through $columnCount<\/span>\r\n{<\/span>\r\n\u00a0 \u00a0 .column-#{$i}<\/span>\r\n\u00a0 \u00a0 {<\/span>\r\n\u00a0 \u00a0 \u00a0 \u00a0 float: left;<\/span>\r\n\u00a0 \u00a0 \u00a0 \u00a0 width: percentage($i\/$column-count);<\/span>\r\n\u00a0 \u00a0 }<\/span>\r\n}<\/span><\/pre>\n
7. Conditional<\/span><\/strong><\/h3>\n
Conditional<\/strong> adalah fitur yang mengeksekusi kode CSS hanya jika suatu kondisi terpenuhi. Fitur ini ditulis dengan @if<\/strong>.<\/p>\n
Misalnya ingin memberi warna biru jika angka yang muncul di bawah 5. Begini contoh penggunaannya :<\/p>\n
$test: 3;<\/span>\r\np {<\/span>\r\n@if $test < 5 {<\/span>\r\ncolor: blue;<\/span>\r\n\u00a0 }<\/span>\r\n}<\/span><\/pre>\n
Karena kondisinya benar, yaitu 3 lebih kecil daripada 5, maka angka akan berwarna biru. Begini output CSS nya :<\/p>\n
p {<\/span>\r\ncolor : blue;<\/span>\r\n}<\/span><\/pre>\n
Bisa menambahkan lebih banyak kondisi lagi, contohnya seperti ini :<\/p>\n
$test: 3;<\/span>\r\np {<\/span>\r\n@if $test < 5 {<\/span>\r\n\u00a0 color: blue;<\/span>\r\n\u00a0 @if $test == 3 {<\/span>\r\n\u00a0 \u00a0 text-color: white;<\/span>\r\n\u00a0 \u00a0 }<\/span>\r\n\u00a0 }<\/span>\r\n}<\/span><\/pre>\n
Kemudian eksekusi kode CSS nya akan menjadi seperti ini :<\/p>\n
p {<\/span>\r\ncolor : blue; text-color: white;<\/span>\r\n}<\/span><\/pre>\n
Kondisi @if diikuti dengan\u00a0@else if<\/strong>\u00a0dan\u00a0@else<\/strong>. Else if hanya akan mengeksekusi kondisi yang benar dan mengabaikan kondisi yang salah. Contohnya seperti ini :<\/p>\n
$test: 3;<\/span>\r\np {<\/span>\r\n\u00a0 @if $test > 3 {<\/span>\r\n\u00a0 \u00a0 \u00a0 text-color: red;<\/span>\r\n} @else if $test < 3 {<\/span>\r\n\u00a0 \u00a0 \u00a0 text-color: blue;<\/span>\r\n} @else if $test == 3 {<\/span>\r\n\u00a0 \u00a0 \u00a0 text-color: white;<\/span>\r\n\u00a0 }<\/span>\r\n}<\/span><\/pre>\n
Maka, kode CSS nya seperti ini :<\/p>\n
p {<\/span>\r\ntext-color: white;<\/span>\r\n}<\/span><\/pre>\n
Sedangkan, @else akan dieksekusi jika kondisi @ if salah. Contohnya seperti ini :<\/p>\n
$test: 12;<\/span>\r\np {<\/span>\r\n\u00a0 @if $test < 3 {<\/span>\r\n\u00a0 \u00a0 text-color: red;<\/span>\r\n} @else if $test == 3 {<\/span>\r\n\u00a0 \u00a0 text-color: blue;<\/span>\r\n} @else {<\/span>\r\n\u00a0 \u00a0 text-color: white;<\/span>\r\n\u00a0 }<\/span>\r\n}<\/span><\/pre>\n
8. Loops<\/span><\/strong><\/h3>\n
Loops<\/strong> adalah fitur yang digunakan untuk mengeksekusi kode berulang kali. Loops terdiri dari @while dan @for.<\/p>\n
@while<\/strong> digunakan untuk mengeksekusi kode berulang dengan suatu kondisi yang sama. Begini contoh penggunaannya :<\/p>\n
$p: 3;<\/span>\r\n@while $p < 5 {<\/span>\r\n.item-#{$p} {<\/span>\r\ncolor: red; $p : $p + 1;<\/span>\r\n\u00a0 }<\/span>\r\n}<\/span><\/pre>\n
Output kode CSS nya seperti ini :<\/p>\n
.item-3 {<\/span>\r\ncolor: red;<\/span>\r\n}<\/span>\r\n.item-4 {<\/span>\r\ncolor: red;<\/span>\r\n}<\/span><\/pre>\n
@for<\/strong> digunakan untuk mengeksekusi kode dengan jumlah yang spesifik. Misalnya, mengeksekusi kode sebanyak 10 kali. Berikut contoh penggunaannya :<\/p>\n
@for $i from 1 through 5 {<\/span>\r\n\u00a0 \u00a0 .list-#{$i} {<\/span>\r\n\u00a0 \u00a0 \u00a0 width: 2px * $i;<\/span>\r\n\u00a0 }<\/span>\r\n}<\/span><\/pre>\n
Maka kode CSS nya akan menjadi seperti ini :<\/p>\n
.list-1 {<\/span>\r\nmargin-left: 2px;<\/span>\r\n}<\/span>\r\n.list-2 {<\/span>\r\nmargin-left: 4px;<\/span>\r\n} .list-3 {<\/span>\r\nmargin-left: 6px;<\/span>\r\n} .list-4 {<\/span>\r\nmargin-left: 8px;<\/span>\r\n} .list-5 {<\/span>\r\nmargin-left: 10px;<\/span>\r\n}<\/span><\/pre>\n
Instalasi SASS<\/span><\/strong><\/h2>\n
Untuk menggunakan SCSS tentu perlu menginstall SASS.<\/p>\n
Ada dua cara untuk menginstall SASS, yaitu dengan menggunakan aplikasi scout atau\u00a0command prompt \/ cmd<\/strong>. Dalam tutorial ini menggunakan cmd<\/strong>.<\/p>\n
Bagi yang menggunakan windows perlu menginstall Ruby terlebih dahulu. Bagi yang menggunakan Mac, cukup buka terminal.<\/p>\n
\"\"<\/p>\n
Pada Windows, klik\u00a0Start Command Prompt with Ruby.<\/strong><\/p>\n
\"\"<\/p>\n
Setelah cmd terbuka, ketikkan\u00a0gem install sass<\/strong>.\u00a0<\/strong>Proses ini membutuhkan koneksi internet.<\/p>\n
\"\"<\/p>\n
Jika instalasi sudah selesai, akan muncul tampilan seperti ini :<\/p>\n
\"\"<\/p>\n
Untuk memastikan apakah SASS sudah terinstall, silakan ketikkan sass -v\u00a0<\/strong>pada cmd atau terminal. Kemudian klik Enter<\/strong>.<\/p>\n
\"\"<\/p>\n
Jika muncul informasi versi\u00a0Ruby Sass<\/strong>, berarti instalasi SASS berhasil. Dengan begitu bisa menulis kode SCSS di aplikasi SASS tersebut.<\/p>\n
SCSS vs SASS<\/span><\/strong><\/h2>\n
SCSS merupakan sintaks terbaru SASS yang dikenalkan mulai versi 3. Sebelumnya, sintaks yang digunakan adalah Sass. Meskipun sama-sama berfungsi sebagai preprocessor CSS, keduanya memiliki berbagai perbedaan, terutama dalam penulisannya.<\/p>\n
    \n
  • \n
    SCSS<\/strong><\/h3>\n<\/li>\n<\/ul>\n
    $ukuran : 20px;<\/span>\r\n$warna : green;<\/span>\r\n\r\n\r\nh1{<\/span>\r\nbackground : $bg-color;<\/span>\r\ncolor :$warna;<\/span>\r\n}<\/span>\r\np{<\/span>\r\nbackground:$bg-color;<\/span>\r\nfont-size: $ukuran;<\/span>\r\ncolor:$warna;<\/span>\r\n}<\/span><\/pre>\n
      \n
    • \n
      SASS<\/strong><\/h3>\n<\/li>\n<\/ul>\n
      $warna:green<\/span>\r\n$ukuran:20px<\/span>\r\n\r\n\r\nh1\u00a0<\/span>\r\n\u00a0 background : $bg-color<\/span>\r\n\u00a0<\/span>\r\n\u00a0<\/span>\r\np<\/span>\r\n\u00a0 background : $bg-color<\/span>\r\n\u00a0 color : $warna<\/span>\r\n\u00a0 font-size : $ukuran<\/span><\/pre>\n
      Seperti terlihat pada contoh di atas,\u00a0 SCSS menggunakan semikolon dan kurung kurawal, sedangkan SASS tidak menggunakannya.<\/p>\n
      Jadi, bagi yang familiar dengan CSS, akan lebih mudah mempelajari SCSS\u00a0 karena penulisan sintaksnya lebih mirip dengan CSS.<\/p>\n
      Selain itu, meskipun sintaks SASS lebih mudah dan singkat, tapi SCSS lebih ekspresif karena bisa menggunakan berbagai fitur seperti mixins dan extend.<\/p>\n
      Sintaks SASS butuh lebih banyak pengembangan agar sesuai dengan project CSS. Sedangkan, SCSS lebih kompatibel dengan project CSS.<\/p>\n
      Berikut ini ditampilkan rangkuman perbedaan sintaks SCSS vs SASS :<\/p>\n\n\n\n\n\t\n\n\t\n\t\n\t\n\t
      Perbedaan<\/th>SCSS<\/th>SASS<\/th>\n<\/tr>\n<\/thead>\n
      Sintaks Dasar<\/td>Menggunakan kurung kurawa dan semikolon<\/td>Tidak menggunakan kurung kurawa dan semikolon<\/td>\n<\/tr>\n
      Penggunaan<\/td>Tidak perlu pengembangan sintaks dasar<\/td>Perlu pengembangan sintaks dasar<\/td>\n<\/tr>\n
      Integrasi <\/td>Mudah diintegrasikan dengan project CSS. Anda cukup menambahkan kode fitur untuk mengembangkan project.<\/td>Sulit diintegrasikan dengan project CSS. Sebab, Anda harus menulis ulang kode CSS untuk mengembangkan project.<\/td>\n<\/tr>\n
      Rules <\/td>SCSS memiliki aturan yang lebih rumit untuk merampingkan kode CSS. Sebab, Anda perlu menggunakan beberapa jenis anotasi.<\/td>SASS memiliki aturan lebih sederhana untuk merampingkan kode CSS. Anda hanya perlu mengawali penulisan kode dengan variabel dollar ($)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n
      \n            \n
      \n    \n
      \n            
      \n            \n\n
      <\/div>\n        <\/div>\n            
      \n            \n\n
      <\/div>\n        <\/div>\n            
      \n            \n\n
      <\/div>\n        <\/div>\n            
      \n            \n\n
      <\/div>\n        <\/div>\n            
      \n            \n\n
      <\/div>\n        <\/div>\n    <\/div>\n    \n
      \n            
      \n            \n\n
      <\/div>\n        <\/div>\n            
      \n            \n\n
      <\/div>\n        <\/div>\n            
      \n            \n\n
      <\/div>\n        <\/div>\n            
      \n            \n\n
      <\/div>\n        <\/div>\n            
      \n            \n\n
      <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n
      \n            5\/5 - (2 votes)    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"
      Pengertian SCSS SCSS atau Sassy CSS adalah sintaks terbaru dari SASS (Syntactically Awesome Style Sheets). SASS sendiri adalah preprocessor CSS, yaitu sebuah program untuk mengolah data menggunakan syntax tertentu dengan output CSS. SCSS banyak digunakan karena memiliki aturan penulisan yang lebih ramah bagi developer. Selain itu, banyak fitur yang ditawarkan agar coding jadi lebih efisien. […]<\/p>\n","protected":false},"author":7,"featured_media":11496,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rop_custom_images_group":[],"rop_custom_messages_group":[],"rop_publish_now":"initial","rop_publish_now_accounts":{"twitter_2392824914_2392824914":""},"rop_publish_now_history":[],"rop_publish_now_status":"pending","_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"enabled":false},"version":2}},"categories":[3],"tags":[4098,4099,4097],"class_list":["post-11476","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-cara-kerja-scss","tag-fitur-scss","tag-pengertian-scss"],"featured_image_src":{"landsacpe":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/06\/Pengertian-Cara-Kerja-dan-Fitur-SCSS-1140x445.png",1140,445,true],"list":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/06\/Pengertian-Cara-Kerja-dan-Fitur-SCSS-463x348.png",463,348,true],"medium":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/06\/Pengertian-Cara-Kerja-dan-Fitur-SCSS-300x169.png",300,169,true],"full":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/06\/Pengertian-Cara-Kerja-dan-Fitur-SCSS.png",1920,1080,false]},"yoast_head":"\nPengertian, Cara Kerja dan Fitur SCSS - Hosteko Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hosteko.com\/blog\/pengertian-cara-kerja-dan-fitur-scss\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pengertian, Cara Kerja dan Fitur SCSS - Hosteko Blog\" \/>\n<meta property=\"og:description\" content=\"Pengertian SCSS SCSS atau Sassy CSS adalah sintaks terbaru dari SASS (Syntactically Awesome Style Sheets). SASS sendiri adalah preprocessor CSS, yaitu sebuah program untuk mengolah data menggunakan syntax tertentu dengan output CSS. SCSS banyak digunakan karena memiliki aturan penulisan yang lebih ramah bagi developer. Selain itu, banyak fitur yang ditawarkan agar coding jadi lebih efisien. […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hosteko.com\/blog\/pengertian-cara-kerja-dan-fitur-scss\" \/>\n<meta property=\"og:site_name\" content=\"Hosteko Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-09T00:49:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/06\/Pengertian-Cara-Kerja-dan-Fitur-SCSS.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Risa Y\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Risa Y\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/hosteko.com\/blog\/pengertian-cara-kerja-dan-fitur-scss#article\",\"isPartOf\":{\"@id\":\"https:\/\/hosteko.com\/blog\/pengertian-cara-kerja-dan-fitur-scss\"},\"author\":{\"name\":\"Risa Y\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/c1d3dbd7c27bd3574f8c7042165a660b\"},\"headline\":\"Pengertian, Cara Kerja dan Fitur SCSS\",\"datePublished\":\"2021-06-09T00:49:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/hosteko.com\/blog\/pengertian-cara-kerja-dan-fitur-scss\"},\"wordCount\":930,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/pengertian-cara-kerja-dan-fitur-scss#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/06\/Pengertian-Cara-Kerja-dan-Fitur-SCSS.png\",\"keywords\":[\"cara kerja scss\",\"fitur scss\",\"pengertian scss\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/hosteko.com\/blog\/pengertian-cara-kerja-dan-fitur-scss#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hosteko.com\/blog\/pengertian-cara-kerja-dan-fitur-scss\",\"url\":\"https:\/\/hosteko.com\/blog\/pengertian-cara-kerja-dan-fitur-scss\",\"name\":\"Pengertian, Cara Kerja dan Fitur SCSS - Hosteko Blog\",\"isPartOf\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/hosteko.com\/blog\/pengertian-cara-kerja-dan-fitur-scss#primaryimage\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/pengertian-cara-kerja-dan-fitur-scss#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/06\/Pengertian-Cara-Kerja-dan-Fitur-SCSS.png\",\"datePublished\":\"2021-06-09T00:49:12+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/hosteko.com\/blog\/pengertian-cara-kerja-dan-fitur-scss#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hosteko.com\/blog\/pengertian-cara-kerja-dan-fitur-scss\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/pengertian-cara-kerja-dan-fitur-scss#primaryimage\",\"url\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/06\/Pengertian-Cara-Kerja-dan-Fitur-SCSS.png\",\"contentUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/06\/Pengertian-Cara-Kerja-dan-Fitur-SCSS.png\",\"width\":1920,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/hosteko.com\/blog\/pengertian-cara-kerja-dan-fitur-scss#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/hosteko.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Pengertian, Cara Kerja dan Fitur SCSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/hosteko.com\/blog\/#website\",\"url\":\"https:\/\/hosteko.com\/blog\/\",\"name\":\"Hosteko Blog\",\"description\":\"Berita & Informasi Dunia IT\",\"publisher\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/hosteko.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\",\"name\":\"HOSTEKO\",\"url\":\"https:\/\/hosteko.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png\",\"contentUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png\",\"width\":195,\"height\":57,\"caption\":\"HOSTEKO\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/c1d3dbd7c27bd3574f8c7042165a660b\",\"name\":\"Risa Y\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7eac241dffbc583c56ba1ff19703f5623dab2b6a88bbb0583e815230564dac5e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7eac241dffbc583c56ba1ff19703f5623dab2b6a88bbb0583e815230564dac5e?s=96&d=mm&r=g\",\"caption\":\"Risa Y\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Pengertian, Cara Kerja dan Fitur SCSS - Hosteko Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hosteko.com\/blog\/pengertian-cara-kerja-dan-fitur-scss","og_locale":"en_US","og_type":"article","og_title":"Pengertian, Cara Kerja dan Fitur SCSS - Hosteko Blog","og_description":"Pengertian SCSS SCSS atau Sassy CSS adalah sintaks terbaru dari SASS (Syntactically Awesome Style Sheets). SASS sendiri adalah preprocessor CSS, yaitu sebuah program untuk mengolah data menggunakan syntax tertentu dengan output CSS. SCSS banyak digunakan karena memiliki aturan penulisan yang lebih ramah bagi developer. Selain itu, banyak fitur yang ditawarkan agar coding jadi lebih efisien. […]","og_url":"https:\/\/hosteko.com\/blog\/pengertian-cara-kerja-dan-fitur-scss","og_site_name":"Hosteko Blog","article_published_time":"2021-06-09T00:49:12+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/06\/Pengertian-Cara-Kerja-dan-Fitur-SCSS.png","type":"image\/png"}],"author":"Risa Y","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Risa Y","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/hosteko.com\/blog\/pengertian-cara-kerja-dan-fitur-scss#article","isPartOf":{"@id":"https:\/\/hosteko.com\/blog\/pengertian-cara-kerja-dan-fitur-scss"},"author":{"name":"Risa Y","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/c1d3dbd7c27bd3574f8c7042165a660b"},"headline":"Pengertian, Cara Kerja dan Fitur SCSS","datePublished":"2021-06-09T00:49:12+00:00","mainEntityOfPage":{"@id":"https:\/\/hosteko.com\/blog\/pengertian-cara-kerja-dan-fitur-scss"},"wordCount":930,"commentCount":0,"publisher":{"@id":"https:\/\/hosteko.com\/blog\/#organization"},"image":{"@id":"https:\/\/hosteko.com\/blog\/pengertian-cara-kerja-dan-fitur-scss#primaryimage"},"thumbnailUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/06\/Pengertian-Cara-Kerja-dan-Fitur-SCSS.png","keywords":["cara kerja scss","fitur scss","pengertian scss"],"articleSection":["Blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/hosteko.com\/blog\/pengertian-cara-kerja-dan-fitur-scss#respond"]}]},{"@type":"WebPage","@id":"https:\/\/hosteko.com\/blog\/pengertian-cara-kerja-dan-fitur-scss","url":"https:\/\/hosteko.com\/blog\/pengertian-cara-kerja-dan-fitur-scss","name":"Pengertian, Cara Kerja dan Fitur SCSS - Hosteko Blog","isPartOf":{"@id":"https:\/\/hosteko.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/hosteko.com\/blog\/pengertian-cara-kerja-dan-fitur-scss#primaryimage"},"image":{"@id":"https:\/\/hosteko.com\/blog\/pengertian-cara-kerja-dan-fitur-scss#primaryimage"},"thumbnailUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/06\/Pengertian-Cara-Kerja-dan-Fitur-SCSS.png","datePublished":"2021-06-09T00:49:12+00:00","breadcrumb":{"@id":"https:\/\/hosteko.com\/blog\/pengertian-cara-kerja-dan-fitur-scss#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hosteko.com\/blog\/pengertian-cara-kerja-dan-fitur-scss"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/pengertian-cara-kerja-dan-fitur-scss#primaryimage","url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/06\/Pengertian-Cara-Kerja-dan-Fitur-SCSS.png","contentUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/06\/Pengertian-Cara-Kerja-dan-Fitur-SCSS.png","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/hosteko.com\/blog\/pengertian-cara-kerja-dan-fitur-scss#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hosteko.com\/blog"},{"@type":"ListItem","position":2,"name":"Pengertian, Cara Kerja dan Fitur SCSS"}]},{"@type":"WebSite","@id":"https:\/\/hosteko.com\/blog\/#website","url":"https:\/\/hosteko.com\/blog\/","name":"Hosteko Blog","description":"Berita & Informasi Dunia IT","publisher":{"@id":"https:\/\/hosteko.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hosteko.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/hosteko.com\/blog\/#organization","name":"HOSTEKO","url":"https:\/\/hosteko.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png","contentUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png","width":195,"height":57,"caption":"HOSTEKO"},"image":{"@id":"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/c1d3dbd7c27bd3574f8c7042165a660b","name":"Risa Y","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7eac241dffbc583c56ba1ff19703f5623dab2b6a88bbb0583e815230564dac5e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7eac241dffbc583c56ba1ff19703f5623dab2b6a88bbb0583e815230564dac5e?s=96&d=mm&r=g","caption":"Risa Y"}}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2021\/06\/Pengertian-Cara-Kerja-dan-Fitur-SCSS.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/11476","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/comments?post=11476"}],"version-history":[{"count":2,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/11476\/revisions"}],"predecessor-version":[{"id":11492,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/11476\/revisions\/11492"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/media\/11496"}],"wp:attachment":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/media?parent=11476"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/categories?post=11476"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/tags?post=11476"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}