با node-sass

از npm/yarn و node-sass استفاده کنید


1. ایجاد فایل package.json #

در ترمینال خود ، یک پوشه جدید با نام mybulmaایجاد کنید، به آن مسیر بروید، سپس دستور زیر را تایپ کنید:

npm init

با این کار یک تنظیم تعاملی برای ایجاد package.json راه اندازی می شود. هنگامی که برای یک نقطه ورود درخواست شد، sass/mystyles.scss را وارد کنید.



2. نصب وابستگی های dev #

برای شخصی سازی Bulma فقط به 2 پکیج نیاز دارید: node-sass و خود bulma.


npm install node-sass --save-dev
npm install bulma --save-dev

در این مرحله package.json باید به این شکل باشد.


{
    "name": "mybulma",
    "version": "1.0.0",
    "main": "sass/mystyles.scss",
    "license": "MIT",
    "devDependencies": {
    "bulma": "^0.7.2",
    "node-sass": "^4.9.2"
    }
}
                                


3. یک فایل Sass ایجاد کنید #

یک پوشه sass ایجاد کنید و فایلی به نام mystyles.scss به آن اضافه کنید:


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

مطمئن شوید که مسیر صحیح را برای فایل bulma.sass نوشته اید.



4. ایجاد صفحه HTML #

یک قالب HTML که از چندین کامپوننت Bulma استفاده شده است ایجاد کنید.


<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My custom Bulma website</title>
    <link rel="stylesheet" href="css/mystyles.css">
    </head>
    <body>
        <h1 class="title">
        Bulma
        </h1>

        <p class="subtitle">
        Modern CSS framework based on <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a>
        </p>

        <div class="field">
        <div class="control">
            <input class="input" type="text" placeholder="Input">
        </div>
        </div>

        <div class="field">
        <p class="control">
            <span class="select">
            <select>
                <option>Select dropdown</option>
            </select>
            </span>
        </p>
        </div>

        <div class="buttons">
        <a class="button is-primary">Primary</a>
        <a class="button is-link">Link</a>
        </div>
    </body>
</html>
                                

این فایل را با عنوان mypage.html ذخیره کنید.

به مسیر css/mystyles.css برای stylesheet توجه کنید. این مسیر فایل CSS خواهد بود که با Sass تولید خواهیم کرد.

صفحه خود را در مرورگرتان باز کنید:

Bulma unstyled
صفحه بدون style


5. افزودن اسکریپت های node برای ایجاد CSS #

برای ساخت یک فایل CSS از یک فایل Sass, می توانیم از اسکریپت های node استفاده کنیم. در package.json، موارد زیر را اضافه کنید:


"scripts": {
    "css-build": "node-sass --omit-source-map-url sass/mystyles.scss css/mystyles.css",
    "css-watch": "npm run css-build -- --watch",
    "start": "npm run css-watch"
}
                                
  • css-build takes sass/mystyles.scss as an input, and outputs css/mystyles.css, while omitting the source map
  • css-watch builds the CSS and watches for changes
  • start is simply a shortcut for css-watch

برای تست کردن ، وارد terminal aخود شوید و دستور زیر را اجرا کنید:

npm run css-build

در صورت تنظیم صحیح ، پیام زیر را مشاهده خواهید کرد:


Rendering Complete, saving .css file...
Wrote CSS to /path/to/mybulma/css/mystyles.css

صفحه را رفرش کنید باید به این شکل باشد:

Bulma default styles
استایل پیش فرض Bulma

برای مشاهده تغییرات، فقط دستور زیر را اجرا کنید:

npm start


6. افزودن استایل های Bulma #

محتوای فایل mystyles.scss را با موارد زیر جایگزین کنید:


@charset "utf-8";
                        
// 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;
$widescreen-enabled: false;
$fullhd-enabled: false;
                        
// Update some of Bulma's component variables
$body-background-color: $beige-lighter;
$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/button.sass";
@import "../node_modules/bulma/sass/elements/container.sass";
@import "../node_modules/bulma/sass/elements/title.sass";
@import "../node_modules/bulma/sass/form/_all.sass";
@import "../node_modules/bulma/sass/components/navbar.sass";
@import "../node_modules/bulma/sass/layout/hero.sass";
@import "../node_modules/bulma/sass/layout/section.sass";
                                    

از آنجا که در حال مشاهده تغییرات هستید، به سادگی فایل را ذخیره کنید تا نتیجه را ببینید:

Bulma customized
Bulma's customized theme

و! شما موفق به نصب و سفارشی سازی Bulma شده اید.