Topik Belajar Syntactically Awesome Style Sheets (SASS CSS)

Store Data with Sass Variables dengan melakukan perubahan warna yang ada pada variabel dengan contoh variabelnya dibawah ini yang ditandai dengan $

$text-color : red;

Kemudian untuk pemanggilan color atau warna merah dapat dimasukkan dibagian judul warna h2 sebagai berikut

h2 {
  color: $text-color;
}

  .header{
    text-align: center;
  }
  .blog-post, h2 {
    color: $text-color ;
  }

++++ Nest CSS with Sass +++

Nest dapat membungkus CSS dengan menggunakan SASS sebagai contoh

article {
    height: 200px;
  
    p {
      color: white;
    }
  
    ul {
      color: blue;
    }
  }

+++ Create Reusable CSS with Mixins +++

mixin ini merupakan kumpulan dari deklarasi CSS yang dapat digunakan kembali seluruhnya, dan ini merupakan fitur css yang lebih baru yang siap digunakan untuk semua browser. Dan biasanya menggunakan @mixin untuk diikuti nama kustomnya

Kemudian untuk memanggil mixin ini memerlukan sebuah @include yang ada dalam sebuah nama para meter dengan contoh menulis border radius dengan memberikan parameter untuk radiusnya dengan memberikan element dengan sebuah border radiusnya

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
  }


  kemudian anda bisa memanggilanya dengan menggunakan
  #awesome {
    @include border-radius(15px);
  }

Perkondisian If

membuat pengkodisian if dengan menggunakan sas dengan mengumpulkan costumisasi border-strike ke dalamnya dengan pembuatan kotak dengan garis luar

<style type='text/scss'>

@mixin border-stroke ($val){
@if $val == light{
border: 1px solid black;
}@else if $val == medium {
border: 3px solid black;
}@else if $val == heavy {
border: 6px solid black;
}@else {
border: none;
}
}

#box {
width: 150px;
height: 150px;
background-color: red;
@include border-stroke(medium);
}
</style>

<div id="box"></div>

Pengulangan dengan menggunakan @for dan @while yang diimplementasikan dalam sebuah teks dengan ukuran font size dengan menggunakan perulangan for dan while seperti berikut

perulangan dengan menggunakan @for

<style type='text/scss'>

@for $i from 1 to 6 {
.text-#{$i} {font-size: 30px/2 * $i;}
}</style>

  
<p class="text-1">Hello</p>
<p class="text-2">Hello</p>
<p class="text-3">Hello</p>
<p class="text-4">Hello</p>
<p class="text-5">Hello</p>

Perulangan dengan menggunakan while

  
<style type='text/scss'>

$x : 1;
@while $x < 6 {
.text-#{$x} {font-size: 30px / 2 * $i;}
$x: $x+1;
}

</style>

<p class="text-1">Hello</p>
<p class="text-2">Hello</p>
<p class="text-3">Hello</p>
<p class="text-4">Hello</p>
<p class="text-5">Hello</p>

Menggunakan @each sebagai map untuk beberapa item yang ada di dalam list

Anda bisa menggunakan sebuah @each yang mana di dalam SAS ini anda bisa memanggil list satu persatu yang telah anda buat sebagai objectnya dengan contoh variabel sebagai berikut

$color-bg: ( 
    color1:blue, 
    color2: black, 
    color3: red
);

setelah anda membuat variabel color-bg yang didalamnya banyak colornya yang berisikan key dan value. Dimana keynya adalah color1 dan valuenya adalah warna itu sendiri yaitu blue dan anda bisa membuat htmlnya sebagai berikut

<div class="color-bg">
<div class="blue-bg"></div>
<div class="black-bg"></div>
<div class="red-bg"></div>
</div>

untuk style cssnya sebagai berikut

.blue-bg{
    background-color: blue;
}

.black-bg {
    background-color: black;
}
.red-bg {
    background-color: red;
}

Kemudian untuk pemanggilannya anda menggunakan @each untuk mappingnya yang mana harus dilengkapi dengan key dan value di dalam variabel dengan contoh

@each $key, $value in (variabelnya disini adalah $color-bg) {

jangan lupa dipanggil selector yang akan ditampilkan berupa valuenya yaitu

.#{$color}
    {background-color : $color;}

}

sebagai contoh sebagai berikut

@each $key, $color in  $color-bg {
    .#{$color}
       {background-color : $color;}
    }

Penggunaan import

Memanggil file diluar dengan sass files .scss dengan diawali sebuah underscot dengan contoh _variables.scss Dan yang di dalam css bisa menggunakan @import yang mana tanpa menggunakan underscot ketika dituliskan dan menggunakan string yang lengkapnya seperti dibawah

@import 'variables'

Menggunakan Modul SASS

Extend merupakan salah satu properti yang dimililiki oleh bawaan sebelumnya yang bisa diambil keseluruhannya sebagai contoh ada sebuah class info yang propertinya akan diambil menggunakan @extend dan diberi nama class info important

Sebagai contoh kami memiliki properti dari class info sebagai mana berikut ini

.info{
    width: 200px;
    border: 1px solid black;
    margin: 0 auto;
  }

Kemudian akan kita ambil propertinya menggunakan @extend dengan class yang bernama info-important dengan contoh sebagai berikut

.info-important{
    @extend .info;
    background-color: magenta;

  }