Bulma с интерфейсом командной строки Sass

Опубликовано: 11 Августа, 2022

В этой статье мы увидим, как использовать Bulma с Sass CLI . Элементы Bulma поставляются с предварительно настроенными компонентами, что, если вы хотите изменить или настроить их в соответствии с вашими требованиями? Вы можете сделать это, просто используя sass. Один из способов добиться этого — использовать SASS-CLI, который представляет собой командную строку sass, из которой мы можем создать файл CSS, используя файлы sass для стилизации наших компонентов. Ниже приведен процесс, демонстрирующий полную модификацию или стиль компонента Bulma.

Использование Bulma с SASS-CLI: Ниже приведены все шаги, необходимые для стилизации элемента Bulma с использованием Sass-CLI вместе со всем его синтаксисом.

Шаг 1: Установка Sass . Сначала создайте новую папку с любым именем, в которой вы хотите создавать файлы sass. В терминале сначала перейдите в каталог папки и напишите следующую команду для установки sass gem :

gem install sass

Шаг 2: Загрузите Bulma: Теперь скачайте последнюю версию Bulma отсюда. После загрузки разархивируйте и поместите папку Bulma-0.9.3 в папку проекта, созданную ранее на шаге 1.

Шаг 3: Создание файла SASS: Создайте папку SASS и создайте там файл с именем: mystyles.scss .

@charset "utf-8";
@import "../node_modules/bulma/bulma.sass";

Примечание. Убедитесь, что указанный выше путь соответствует каталогу вашего проекта.

Шаг 4: Создание HTML-файла. Мы создаем HTML-файл, который мы хотим настроить, и сохраняем его как: filename.html . Обратите внимание, что путь css/mystyles.css в вашей таблице стилей правильный, так как это будет местоположение файла CSS, который будет создан с помощью SASS. Обратитесь к приведенному ниже примеру синтаксиса. Здесь вы заметите нестилизованную страницу. См. следующие шаги.

Шаг 5: Создание файла CSS. Мы будем генерировать наш файл CSS из файла SASS. Запустите приведенный ниже код в своем терминале и перезагрузите страницу:

sass --sourcemap=none sass/mystyles.scss:css/mystyles.css

Теперь, чтобы следить за изменениями, запустите следующий код в своем терминале:

sass --watch --sourcemap=none sass/mystyles.scss:css/mystyles.css

Шаг 6: Добавление собственных стилей :
Мы можем добавить наши собственные стили или, например, добавить указанные ниже стили в ваш файл mystyles.scss .

@charset "utf-8";

// Set your brand colors
$success: #2dfcb7;
$warning: #f7c824;

// Update Bulma"s global variables
$widescreen-enabled: false;
$fullhd-enabled: false;

// Update some of Bulma"s component variables
$body-background-color: $success;
$control-border-width: 2px;

// Import only what you need from Bulma
@import "../node_modules/bulma/sass/utilities/_all.sass";
@import "../node_modules/bulma/sass/base/_all.sass";
@import "../node_modules/bulma/sass/elements/_all.sass";
@import "../node_modules/bulma/sass/form/_all.sass";
@import "../node_modules/bulma/sass/components/_all.sass";
@import "../node_modules/bulma/sass/layout/_all.sass";

Пример 1: Пример ниже иллюстрирует Bulma с использованием SASS-CLI.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" 
          href="css/mystyle.css" />
</head>
  
<body>
    <div class="container">
        <h1 class="title">GeeksforGeeks</h1>
  
        <p class="subtitle"
          Welcome to the Computer
          science portal.
        </p>
  
  
        <h2 class="subtitle has-text-white">
          Want to tell us something?
        </h2>
        <textarea class="textarea"
                  placeholder="Write your feedback here...">
        </textarea>
        <br>
        <div class="buttons">
            <a class="button is-warning">Submit</a>
            <a class="button is-danger">Clear</a>
        </div>
    </div>
</body>
  
</html>

CSS




@charset "utf-8";
  
// Set your brand colors
$primary: #5de246;
$success: #2dfcb7;
$warning: #f7c824;
  
// Update Bulma"s global variables
$widescreen-enabled: false;
$fullhd-enabled: false;
  
// Update some of Bulma"s component variables
$body-background-color: $primary;
$control-border-width: 2px;
$input-border-color: transparent;
  
// Import only what you need from Bulma
@import "../node_modules/bulma/sass/utilities/_all.sass";
@import "../node_modules/bulma/sass/base/_all.sass";
@import "../node_modules/bulma/sass/elements/_all.sass";
@import "../node_modules/bulma/sass/form/_all.sass";

Выход:

Пример 2: Еще один пример, иллюстрирующий Bulma с использованием SASS-CLI.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" 
          href="css/mystyle.css" />
</head>
  
<body>
    <div class="container">
        <h1 class="title">GeeksforGeeks</h1>
  
        <p class="subtitle">
          Welcome to the Computer science portal.
        </p>
  
        <div class="field">
            <label class="label">Name</label>
            <div class="control">
                <input class="input" 
                       type="text" 
                       placeholder="Enter name">
            </div>
        </div>
  
        <div class="field">
            <label class="label">Username</label>
            <div class="control">
                <input class="input"
                       type="text"
                       placeholder="Enter username">
  
            </div>
        </div>
  
        <div class="field">
            <label class="label">Email</label>
            <div class="control">
                <input class="input" type="email"
                       placeholder="Enter email">
                <span class="icon is-small is-left">
                    <i class="fas fa-envelope"></i>
                </span>
            </div>
        </div>
  
        <div class="field is-grouped">
            <div class="control">
                <button class="button is-warning">
                  Submit
                </button>
            </div>
            <div class="control">
                <button class="button is-link">
                  Cancel
                </button>
            </div>
        </div>
    </div>
</body>
  
</html>

CSS




@charset "utf-8";
  
// Set your brand colors
$success: #2dfcb7;
$warning: #f7c824;
  
// Update Bulma"s global variables
$widescreen-enabled: false;
$fullhd-enabled: false;
  
// Update some of Bulma"s component variables
$body-background-color: $success;
$control-border-width: 2px;
$input-border-color: transparent;
$input-shadow: none;
  
// Import only what you need from Bulma
@import "../node_modules/bulma/sass/utilities/_all.sass";
@import "../node_modules/bulma/sass/base/_all.sass";
@import "../node_modules/bulma/sass/elements/_all.sass";
@import "../node_modules/bulma/sass/form/_all.sass";

Выход:

Ссылка: https://bulma.io/documentation/customize/with-sass-cli/