我準(zhǔn)備建一個網(wǎng)站，并對其進(jìn)行案例研究。我不一定要深入研究CSS來得到我想要的設(shè)計(jì)，主要是因?yàn)闀r間壓力。所以我想我會使用一個框架來盡快完成設(shè)計(jì)。我選擇了布爾瑪，因?yàn)槲业哪繕?biāo)是極簡主義和現(xiàn)代設(shè)計(jì)。然而，我對布爾瑪?shù)闹黝}顏色不太滿意。

我想知道如何修改CSS來獲得想要的顏色和排列？

布爾瑪開始是一個簡單的方法來定制您的項(xiàng)目。設(shè)置布爾瑪并運(yùn)行觀察器(css & ampjs ),因此代碼更改將反映在您的瀏覽器中:

cd my-bulma-project
npm install
npm start

在_sass/main.scss中，按照注釋說明添加新顏色。這里有一個例子:

// 2. Set your own initial variables
$orange: #ffb14a;
$blue: #99abe0;

// 3. Set the derived variables
// Use the new orange as the primary color
$primary: $orange;
$secondary: $blue;

// 4. Import the rest of Bulma
@import "../node_modules/bulma/bulma";

.new-class {
  background-color: $primary;
  border-top: 2px solid $secondary;
}

對于更廣泛的定制和主題化，我建議瀏覽布爾瑪網(wǎng)站上的定制文檔，使用scss創(chuàng)建一個定制實(shí)現(xiàn)。

這里有一個來自布爾瑪網(wǎng)站的使用scss進(jìn)行快速定制的例子。

// Import a Google Font
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');

// Set your brand colors
$purple: #8A4D76;
$pink: #FA7C91;
$brown: #757763;
$beige-light: #D0D1CD;
$beige-lighter: #EFF0EB;

// Update Bulma's global variables
$family-sans-serif: "Nunito", sans-serif;
$grey-dark: $brown;
$grey-light: $beige-light;
$primary: $purple;
$link: $pink;

// Update some of Bulma's component variables
$control-border-width: 2px;
$input-background-color: $beige-lighter;
$input-border-color: transparent;
$input-shadow: none;

// Import the rest of Bulma
@import "../path/to/bulma";