--- title: With sass-cli layout: documentation doc-tab: customize doc-subtab: sass-cli breadcrumb: - home - documentation - customize - customize-sass-cli --- {% capture gem_install %} gem install sass {% endcapture %} {% capture gem_test %} Sass 3.5.3 (Bleeding Edge) {% endcapture %} {% capture step_1 %}

In your terminal, create a new folder called mybulma, navigate to it, then install the Sass gem:

{% highlight bash %}{{ gem_install }}{% endhighlight %}

To try it out, run sass -v and you should see the following:

{% highlight bash %}{{ gem_test }}{% endhighlight %}

If you are on Windows and use Chocolatey, you can try choco install sass.

If you are on Mac and use Homebrew, you can try brew install sass/sass/sass.

{% endcapture %} {% capture step_2 %}

Get the latest version of Bulma:

Download

Unzip it and put the bulma-{{ site.data.meta.version }} folder inside your mybulma folder.

{% endcapture %} {% capture build_sass %} sass --sourcemap=none sass/mystyles.scss:css/mystyles.css {% endcapture %} {% capture watch_sass %} sass --watch --sourcemap=none sass/mystyles.scss:css/mystyles.css {% endcapture %} {% capture step_5 %}

In your terminal, type the following command:

{% highlight bash %}{{ build_sass }}{% endhighlight %}

Reload the page and it should be styled like this:

{% include components/figure.html path="customize/custom-bulma-02-default" extension="png" alt="Bulma default styles" width="600" height="300" caption="Bulma's default styles" %}

To watch for changes, just launch the following command:

{% highlight bash %}{{ watch_sass }}{% endhighlight %} {% endcapture %} {% include components/step.html title='1. Install Sass' content=step_1 %}
{% include components/step.html title='2. Download Bulma' content=step_2 %}
{% assign bulma_path = site.data.meta.version | prepend: "../bulma-" | append: "/bulma/bulma.sass" %} {% include steps/create-sass-file.html number="3" path=bulma_path %}
{% include steps/create-html-page.html number="4" %}
{% include components/step.html title='5. Build the CSS file' content=step_5 %}
{% include steps/add-custom-styles.html number="6" %}