Belajar Dasar Nesting dan Extend Pada SASS

Sekarang kita lanjut akan belajar fungsi-fungsi dari SASS yaitu penulisan nesting, cara gunakan pseudo class dan yang terakhir adalah fungsi extend. Kita langsung mulai agar lebih banyak elemen HTMLnya kita tambahkan sedikit agar kita bisa atur dengan CSSnya yaitu menambahkan ul li untuk membuat sebuah menu sebagai berikut

yang pertama kita akan bahas tentang nesting. nesting ini artinya ada satu selector didalam selector lain yang dimana elemen a yang kita atur ada didalam li dan li ada di dalam ul sebagai berikut

kita akan atur selector a dengan berikan warna dan ukuran tulisan. Jadi elemen a yang ada diluar ul tidak akan berubah. dan jika teman teman perhatiin tag a ini secara default punya nilai bawaannya yaitu warnanya biru dan punya garis bawahnya maka dari itu kita akan defenisikan beberapa style dalam satu fungsi atau selector di awali dengan tanda % lalu namanya fungsinya sebagai berikut

tujuannya agar nilai yang kita simpan itu bisa kita gunakan berulang ulang. Untuk gunakan fungsi tadi kita @extend lalu namanya sebagai berikut

dan yang terakhir misalnya terdapat pseudo class contohnya efek hover maka kita akan tambahkan untuk selector a yang artinya ketika di sentuh elemen a nyaa maka akan ada perubahan warna

dengan tanda &:hover ketika kita hover kita akan melakukan sesuatu dan pastikan diletakkan didalam selector a. itu dia semoga jelas sampai jumpa.