Using Sass with Ghost


Sass can be very easily built into a Ghost theme. If you are unfamiliar with Sass, check out their guide. Here is how you can add Sass to your Ghost theme. We will be working with the default Casper theme.

  1. The first step is to install Sass either locally or on your server (or both). To do this, from a command line app, run this command (may require sudo):

    gem install sass
    

    If you are on windows, you may need to install ruby first.

  2. Create a sass folder inside your assets folder so you have assets/sass.

  3. Create an input.scss file inside this folder. This file is where you are going to include all of your other sass files.
  4. From here on out, you can really customize everything to however you see fit. Create your own folder structure, your own way to break up the files, etc. We are going to make up an example, but feel free to change to however you think is best.
  5. We are going to create two folders inside of the sass folder. One is layouts, which will house any files that have to do with layout changes, and the other one will be components, which will have any files that change components on the site.
  6. So, now here is what our folder structure looks like:

    folder structure

  7. Lets create just a few basic files to make some changes and get Sass setup. First, create a posts.scss file in your layout folder and add the following code:

    Then create a navigation.scss file in your components folder and add the following code:

  8. So now we have 2 different CSS files we want to build with Sass. The navigation and posts scss file. So, open back up your input.scss file and add the following:

  9. Now, we are ready to build the main CSS file via sass. This can be done through an app, or through terminal. We are going to do it through terminal.

    We are going to place the output file back in the assets/css folder and call it output.css. Here is the command to do that:

    sass --watch assets/sass/input.scss:assets/css/output.css
    
  10. That will build your output.css file. Now, we need to edit the casper theme to use our output.css file.

    In your default.hbs file, below the include for the screen.css, add the following:

    <link rel="stylesheet" type="text/css" href="{{asset "css/output.css"}}" />
    
  11. Restart Ghost and see that your new css changes have taken effect!

Now, from here, you can do many different things with Sass and customize greatly, but this should get you off and running! Good luck and have fun with Sass!

Then create a `navigation.scss` file in your `components` folder and add the following code: 8. So now we have 2 different CSS files we want to build with Sass. The navigation and posts scss file. So, open back up your `input.scss` file and add the following: 9. Now, we are ready to build the main CSS file via sass. This can be done through an app, or through terminal. We are going to do it through terminal. We are going to place the output file back in the `assets/css` folder and call it `output.css`. Here is the command to do that: sass --watch assets/sass/input.scss:assets/css/output.css 10. That will build your `output.css` file. Now, we need to edit the casper theme to use our `output.css` file. In your `default.hbs` file, below the include for the screen.css, add the following: 11. Restart Ghost and see that your new css changes have taken effect! Now, from here, you can do many different things with Sass and customize greatly, but this should get you off and running! Good luck and have fun with Sass!