Learn X in Y minutes

//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;
}