bulma scss add custom colors

To add custom colors in Bulma using SCSS, you can follow these steps:

  1. Open your SCSS file where you want to add the custom colors.
  2. Define your custom colors using the $variable syntax. For example, you can define a primary color like this: $primary-color: #ff0000;.
  3. Locate the Bulma variables file, _variables.scss, which contains all the default color variables.
  4. Import the _variables.scss file into your SCSS file using @import "path/to/_variables.scss";, where "path/to/" is the relative path to the _variables.scss file.
  5. After importing the _variables.scss file, you can override the default color variables with your custom colors. For example, to change the primary color, you can add this line after the import statement: $primary: $primary-color;.
  6. Save your SCSS file and compile it into a CSS file.
  7. Link the compiled CSS file in your HTML file.

By following these steps, you can add custom colors in Bulma using SCSS.