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