Используйте Bulma с настройкой переменных в FileZilla - PullRequest
Новая
       23

Используйте Bulma с настройкой переменных в FileZilla

0 голосов
/ 01 октября 2019

У меня есть сайт, работающий на FileZilla. Я хочу использовать Bulma в нем, что я могу через unpkg. Моя проблема в том, что у моего сайта другая цветовая схема, чем у бирмы Булмы. Есть ли способ, которым я могу изменить цветовую схему:

  • Без SASS, в чистом CSS
  • С SASS, запущенным с моим FileZilla

Смое понимание SASS, разве это не просто предварительный компилятор, который все равно заканчивается чистым CSS? Если так, то могу ли я изменить цветовые переменные в чистом CSS?

Спасибо

1 Ответ

1 голос
/ 05 октября 2019

Bulma использует переменные Sass ( см. Их документацию ) в основе фреймворка. Да, код Sass скомпилирован в чистый CSS, но каждая из этих переменных вводится в многочисленные операторы CSS, когда это происходит.

Так что, насколько я знаю, нет, нет хорошего способа настроить Bulma без использованияСасс. Но то, что вы используете FileZilla, не означает, что вы не можете использовать Sass на своем компьютере, чтобы, например, задать для переменной $primary новый цвет, скомпилировать ее в CSS и загрузить результат в FileZilla.

Все это хорошо описано здесь: https://bulma.io/documentation/customize/with-sass-cli/

Если вы действительно не хотите идти по маршруту Sass, вы всегда можете снова вручную стилизовать каждый элемент после импорта Bulma. Но это, скорее всего, окажется громоздким очень быстро.

Быстрый, возможно, неполный, пример для .button: 

<!doctype html>
<html class="no-js" lang="en">
<head>
  <link href="https://unpkg.com/bulma@0.5.3/css/bulma.css" rel="stylesheet">
  <style>
  .button.is-primary {
    background-color: red;
  }
  .button.is-primary:active,
  .button.is-primary.is-active {
    background-color: red;
  }
  .button.is-primary:hover {
    background-color: purple;
  }
  </style>
</head>
<body style="margin: 2rem auto">
<div style="text-align:center">
<button class="button is-primary">
Save
</button>
</div>
</body>
</html>
...