Bulma with Sass CLI
Last Updated :
24 Mar, 2022
In this article, we’ll see how to use Bulma with Sass CLI. Bulma elements come with pres-styled components, what if you want to modify or customize them according to your requirement? You can do that just by using sass. One way to achieve this is by using SASS-CLI, which is a sass command line from which we can create a CSS file using sass files to style our components. Following is the process is given which demonstrates the full modification or styling of a Bulma component.
Using Bulma with SASS-CLI: Below are all the steps are given that are required to style a Bulma element using Sass-CLI along with all its syntax.
Step 1: Installing Sass: First, create a new folder with any name where you want to create your sass files. In the terminal, first, navigate to the folder directory and write the following command to install sass gem:
gem install sass
Step 2: Download Bulma: Now get the latest version of Bulma from here. After downloading, unzip and put the Bulma-0.9.3 folder inside the project folder that you created before in step 1.
Step 3: Creating a SASS file: Create a SASS folder, and there create a file called: mystyles.scss.
@charset "utf-8";
@import "../node_modules/bulma/bulma.sass";
Note: Make sure that the above path is correct as per your project directory.
Step 4: Creating the HTML file: We create an HTML file that we want to customize and save it as: filename.html. Note that the css/mystyles.css path in your stylesheet is correct as it will be the location of the CSS file that will generate with SASS. Refer to the below example syntax. Here you will notice the unstyled page. See next steps.
Step 5: Building the CSS file: We will be generating our CSS file from the SASS file. Run the below code in your terminal and reload your page:
sass --sourcemap=none sass/mystyles.scss:css/mystyles.css
Now to watch for changes, run the following code in your terminal:
sass --watch --sourcemap=none sass/mystyles.scss:css/mystyles.css
Step 6: Adding your own styles:
We can add our own styles, or for example, add the below styles to your mystyles.scss file.
@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";
Example 1: Below example illustrates the Bulma using 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";
|
Output:
Example 2: Another example illustrating the Bulma using 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";
|
Output:
Reference: https://bulma.io/documentation/customize/with-sass-cli/
Share your thoughts in the comments
Please Login to comment...