基於SASS類的主題

我試圖想出一種使用SASS創建基於類的主題的方法，但由於我對它不熟悉，所以我不知道足以使其工作或知道我的嘗試是否是偶數值得。基於SASS類的主題

我想要一個主題基於在HTML或Body標籤上設置的類。然後所有的顏色和背景等都是從中推導出來的。

我希望SASS做的是處理所有的腿部工作。請原諒粗例子，我說我是新來的：

$baseBackground: #0f0; 

.blue { 
    $baseBackground: #0f0; 
} 
.red { 
    $baseBackground: #0f0; 
} 
.header { 
    background: $baseBackground; 
}

如果上面的代碼塊是SASS我想要的CSS落得這樣的：

.header { 
    background: #0f0; 
} 
.blue .header { 
    background: #00f; 
} 
.red .header{ 
    background: #f00; 
}

我不知道這是否可能。顯然上面的例子不起作用。有沒有辦法處理這個，而不必生成額外的樣式？

非常感謝您的時間。

Chris

來源

2013-03-19 Chris Spittles

我認爲最好的解決方案可能是一個使用SASS mixins。您可以爲您的主題設置一個混合定義，並將各種顏色作爲mixin的參數。然後你可以用不同的參數值爲不同的主題調用你的mixin。這裏有一個例子，從你伸出一點點，可顯示使用多個參數，並同時具有「頭」和「尾」部分：

@mixin theme($background-color, $text-color) { 
    .header { 
     background: $background-color; 
    } 

    .footer { 
     background: $background-color; 
     color: $text-color; 
    } 
} 

@include theme(#0f0, white); 

.blue { 
    @include theme(#00f, lightgray); 
} 

.red { 
    @include theme(#f00, gray); 
}

從這個例子編譯後的CSS是這樣的：

.header { 
    background: lime; 
} 
.footer { 
    background: lime; 
    color: white; 
} 

.blue .header { 
    background: blue; 
} 
.blue .footer { 
    background: blue; 
    color: lightgrey; 
} 

.red .header { 
    background: red; 
} 
.red .footer { 
    background: red; 
    color: gray; 
}

來源

2013-03-20 13:30:35 hopper

你可以用Saas做很多強大的顏色操作。所以可以從一種基本顏色派生出不同的主題。

http://nex-3.com/posts/89-powerful-color-manipulation-with-sass

來源

2013-03-19 09:35:44 user853553

感謝您的回覆，不幸的是這並不包括我想要做的。我希望SASS爲每種配色方案生成代碼塊，所以我不必這樣做。感謝它，但它仍然是一篇有用的文章 – 2013-03-20 11:17:01

基於SASS類的主題

回答

相關問題