CSS是前端開發中必不可少的一種語言，但是CSS語法繁瑣冗長，這就給開發帶來了很多不便。而Sass（Syntactically Awesome Stylesheets）是一種基于CSS的語言，它更加簡潔明了，并且有很多實用的特性。轉換CSS到Sass可以讓我們更快地編寫樣式代碼，提高效率。

下面我們來看看CSS如何轉換為Sass。

/* CSS代碼 */
body {
font-size: 16px;
color: #333;
background-color: #fff;
}
h1 {
font-size: 24px;
font-weight: bold;
color: #666;
margin-top: 20px;
}

上面是一段CSS代碼，現在我們來將其轉換為Sass。

/* Sass代碼 */
$body-font-size: 16px;
$body-color: #333;
$body-background-color: #fff;
$heading-font-size: 24px;
$heading-font-weight: bold;
$heading-color: #666;
$heading-margin-top: 20px;
body {
font-size: $body-font-size;
color: $body-color;
background-color: $body-background-color;
@include headings;
}
h1 {
@include heading-styles;
}

可以看到，Sass中的變量以$符號開頭，可以用于存儲顏色值和其他屬性值。也可以看到，我們使用了@include指令來導入混合器（mixin），這樣我們可以將一些公共的樣式集中管理，在需要時直接調用即可。

轉換CSS到Sass不僅可以讓我們更加方便地管理樣式代碼，而且可以使樣式表更加模塊化、可復用性更高，提高代碼的可維護性。因此，學會使用Sass是每個前端開發者都應該掌握的基本技能。