Bulma SCSS - The Bulma CSS Framework files converted to SCSS syntax

  • By Jim Campbell
  • Last update: Dec 30, 2022
  • Comments: 6

bulma-scss

This is a port of the Bulma project SASS files to the SCSS syntax.

Currently, these files are based on Bulma version 0.9.3, and will be updated with later releases. The files are converted to SCSS with this script.

Installation

Install with Yarn

yarn add bulma-scss

Install with npm

npm install bulma-scss

Contributions

You can contribute to the Bulma source code.

Support

If you are having issues with this repository, please let us know.

We use this project's Github issue tracker.

License

The project is licensed under the MIT license.

Github

https://github.com/j1mc/bulma-scss

Comments(6)

  • 1

    Active development?

    Is this package still under active development? We're planning on using this in a production application, and would still like to remain up to date with the latest Bulma features. :smiley:

  • 2

    fix: wrong sass file ending

    I had problems with the import due to file /form/_all.scss. After a check i saw that there was still the file ending .sass. After deleting it, everything worked fine for me.

  • 3

    Scss modules?

    Just checking if there's any intention of moving this towards the sass module pattern? No pressure, just checking on future plans. Thanks for the great work.

  • 4

    Only need level and columns

    Thank you for sharing this port!

    Can you instruct me how to include only the level? I put the following in my scss

    @import 'bulma-scss/components/level';

    but i get the compile error

    ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: The target selector was not found. Use "@extend %block !optional" to avoid this error. ╷ 6 │ @extend %block; │ ^^^^^^^^^^^^^^

    is there a base file to import?

  • 5

    sass:math, needed for math.div support, not included in bulma-scss 0.9.3?

    After upgrading to

    bulma-scss '0.9.3'

    adding to my page scss,

    page.scss
	@import 'myvars';
+	$test_var: math.div($some-val * 2, 100);

    then run my usual webpack asset build

    Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: There is no module with the namespace "math".
   ╷
17 │ $test_var: math.div($some-val * 2, 100);
   │            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵

    adding a use to the include,

    _myvars.scss
+	@use 'sass:math';
	...

    doesn't do the trick. same error as above with webpack build.

    but adding directly to

    page.scss
+	@use 'sass:math';
	@import 'myvars';
+	$test_var: math.div($some-val * 2, 100);

    webpack completes with no errors.

    (1) shouldn't

    @use 'sass:math'

    be 'in' & made available by, bulma sources?

    (2) since the use doesn't apparently get picked up from the include, is there another method to add in once, and not requiring it in each source file?

    Since here

    https://github.com/jgthms/bulma/issues/3333

    it apears to be resolved, it this^ bulma-scss specific?

  • 6

    Bulma 0.9.3

    :wave: Me again!

    As my last PR, I used the following script to generate the files: https://gist.github.com/j1mc/ff1ff83e277b1e221761fc0c0ee3b164

    Thank you!

Popular Tag

Related