CSS Soloid是一種新型的CSS框架，它強調使用單一的class名稱設計風格統一的頁面。它的原理是通過全局CSS變量和CSS自定義屬性實現樣式共享，減少代碼量和開發時間。

:root {
--main-color: #3498db;
--secondary-color: #e74c3c;
}
.primary {
background-color: var(--main-color);
color: #fff;
padding: 10px;
}
.secondary {
background-color: var(--secondary-color);
color: #fff;
padding: 10px;
}
.btn {
border: none;
border-radius: 5px;
padding: 5px 10px;
color: #fff;
background-color: var(--secondary-color);
}
.btn:hover {
background-color: var(--main-color);
}

在上面的代碼中，:root選擇器定義了兩個全局CSS變量，即主顏色和次顏色。然后在.primary和.secondary類中使用var()函數引用這些變量，實現兩個不同顏色的背景和字體顏色。同時，.btn按鈕類也使用了這些全局CSS變量來定義懸停狀態下的背景顏色。

使用CSS Soloid框架可以快速設計出樣式一致的頁面，并且通過全局CSS變量的修改，可以輕松實現主題切換等功能，提高開發效率。