封裝CSS樣式是一種將CSS代碼組織起來以便重用、維護的技術。如果你正在開發一個大型網站，那么你一定會發現自己需要定義大量的CSS樣式。如果沒有合適的封裝方式，這些代碼就會變得難以維護和理解。

下面介紹一些封裝CSS樣式的最佳實踐技巧：

/* 1. 使用類名 */
.my-class {
font-size: 16px;
color: #333;
background-color: #fff;
}
/* 2. 使用標簽名 */
h1 {
font-size: 28px;
color: #333;
font-weight: bold;
}
/* 3. 使用子類選擇器 */
.box .title {
font-size: 20px;
color: #333;
font-weight: bold;
}
/* 4. 使用偽類 */
a:hover {
color: #fff;
background-color: #333;
}
/* 5. 使用屬性選擇器 */
input[type="text"] {
border: 1px solid #ccc;
padding: 5px;
}
/* 6. 使用子元素選擇器 */
.box >p {
margin: 10px 0;
}
/* 7. 使用通用選擇器 */
* {
box-sizing: border-box;
}
/* 8. 使用@include語句嵌套 */
.box {
@include border-radius(5px);
@include box-shadow(0 0 5px #ccc);
}
/* 9. 使用變量 */
$base-font-size: 16px;
$primary-color: #333;
html {
font-size: $base-font-size;
}
h1 {
font-size: $base-font-size * 2;
color: $primary-color;
}

總的來說，封裝CSS樣式的目的是提高代碼的可讀性、可維護性和復用性。例如，你可以將一些常用的樣式定義成一個類，并在需要時使用該類。這樣可以減少重復代碼，并使頁面的CSS更加簡潔。