Sass是一種CSS預(yù)處理器，能夠幫助開發(fā)人員更加高效地編寫CSS。它允許我們使用變量、嵌套、混合、繼承等語法擴(kuò)展CSS的功能。

//定義變量
$primary-color: #007bff;
//使用嵌套語法
.navbar {
background-color: $primary-color;
ul {
margin: 0;
padding: 0;
li {
list-style: none;
display: inline-block;
margin-right: 20px;
a {
color: white;
text-decoration: none;
&:hover {
color: #ccc;
}
}
}
}
}
//定義混合
@mixin rotate-animation($duration) {
animation: rotate $duration linear infinite;
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
}
//使用混合
.logo {
@include rotate-animation(2s);
}
//定義繼承
%button-style {
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
.button-primary {
@extend %button-style; //繼承button-style樣式
background-color: $primary-color;
color: white;
}
.button-secondary {
@extend %button-style; //繼承button-style樣式
background-color: #ccc;
color: black;
}

通過以上示例，我們可以看到Sass的強(qiáng)大之處，它可以讓我們編寫更少的代碼，使CSS更加清晰易懂。同時，通過使用預(yù)處理器，我們還可以輕松實現(xiàn)代碼復(fù)用，提高開發(fā)效率。