Biến Toàn Cục Bên Trong Bộ Chọn Trong SASS
Nếu chúng ta định nghĩa các biến nằm
bên trong các bộ chọn, thì chúng ta chỉ có thể sử dụng chúng
trong phạm vi cấp độ lồng nhau đã định nghĩa.
Tuy nhiên, nếu chúng ta cần
biến đó có thể truy cập được
một cách toàn cục, thì chúng ta thêm
cụm từ !global vào sau
giá trị của nó.
Hãy xem xét một ví dụ:
div {
$height: 20px !global;
height: $height;
}
#navbar {
height: $height;
}
Kết quả biên dịch của đoạn mã trên sẽ như sau:
div {
height: 20px;
}
#navbar {
height: 20px;
}
Hãy cho biết, kết quả biên dịch của đoạn mã sau sẽ là gì:
#main {
$font-family: Arial !global;
font-family: $font-family;
}
#navbar {
font-family: $font-family;
}