zurb foundation 4.0自定義按鈕顏色無SASS

http://foundation.zurb.com/docs/components/buttons.html zurb foundation 4.0自定義按鈕顏色無SASS

從文檔中可以使用Mixin獲得自定義顏色。我對SCSS並不瞭解，並試圖不使用它。

我想黑色的顏色按鈕，而不是默認的藍色。有可能創建一些CSS類.black { ... }這會使按鈕變黑嗎？

2013-09-28 Yada

請你可以做一個小提琴 – Hive7

嘗試這個：.button.black {background-color：＃000000; }然後將類「黑色」添加到您的元素。 –

我認爲你的錯誤可能是因爲它是被重寫和這樣做的唯一途徑之一，即使它是令人難以接受的是使用!important所以你需要使用：

.black { 
    background-color: #000 !important; 
}

而且！因爲你只是用於普通一個重要的，你還需要將它添加到您的懸停方法，因此這樣的：

.black:hover { 
    background-color: #ccc !important; 
}

編輯

剛剛發現，如果它開始胡作非爲那麼這是做什麼

在這裏，你甚至不需要雖然重要的是一個小提琴：

http://jsfiddle.net/Hive7/p868s/

來源

2013-09-28 13:15:38 Hive7

是的。如果您不知道SCSS，則可以通過您自己的類覆蓋CSS，但建議更改_variables.scss中的SCSS變量值。

對CSS覆蓋的方法是：

創建例如一個新的CSS文件。 mystyle.css

然後調用在HTML頭的CSS後

<!DOCTYPE html> 
<!--[if IE 8]>   <html class="no-js lt-ie9" lang="en"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> 

<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width" /> 
    <title>Foundation 4</title> 

    <!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. --> 
    <link rel="stylesheet" href="css/normalize.css" /> 
    <link rel="stylesheet" href="css/foundation.css" /> 

    <link rel="stylesheet" href="css/mystyle.css"> 

    <script src="js/vendor/custom.modernizr.js"></script> 

</head> 

<a href="#" class="small button black">.small black colour button</a> 
<body>

然後你的CSS將覆蓋foundation.css類。

將您的css類添加到html文件中的按鈕元素。

請參閱上面的代碼。

來源

2013-09-28 13:14:46 joydesigner

zurb foundation 4.0自定義按鈕顏色無SASS

回答

相關問題