Sass Sub-theme for Drupal 8

thanks @gwoer from unsplash
Share this

Theming in Drupal 8 is very different from Drupal 7, the introduction of twig templates make everything easier. There are a couple of classic things like for example use Bootstrap and sass for everything.

In this post, i am going to talk about a subtheme based on bootstrap with sass for compile your code.

Please check the project on GitHub:

In my repository, there is bootstrap like the base theme and a copy of the starter kit of sass. Inside it we have to change the name of many files and inside those files also we have to change THEMENAME with our new theme name, in this case, sass_theme.

Renaming files:

config/install/sass_theme.settings.yml config/schema/sass_theme.schema.yml

sass_theme.info.yml sass_theme.libraries.yml sass_theme.theme

And inside some files:

  • sass_theme.info.yml:name: 'sass_theme'

  • sass_theme.info.yml:  - 'sass_theme/global-styling'

  • sass_theme.info.yml:  - 'sass_theme/bootstrap-scripts'

  • config/schema/sass_theme.schema.yml:  label: 'sass_theme settings'

sass

So, after this, we have our subtheme working, now is time to setup sass.

Run this command on the root folder of your theme:

compass create

It will create some files, the most important is  config.rb, go inside it and change one obvious thing:

css_dir = "css"
sass_dir = "scss"

output_style = :expanded

Also, remove the folder of stylesheet and sass.

Now, the last thing to do is download the bootstrap sass file and add it to the root folder of your subtheme, it will depend on the name of this folder the name that you will use for calling your bootstrap framework in your style.scss and inside your _default-variables.scss for calling the fonts:

in the file style.css

// Bootstrap Framework.
@import '../bootstrap-sass/assets/stylesheets/bootstrap';

and also inside _default-variables.scss

// Set the proper directory for the Bootstrap Glyphicon font.
$icon-font-path: '../bootstrap-sass/assets/fonts/bootstrap/';

done!

Remember use compass watch to compile your scss file. Check the code and give me any feedback

Add new comment

The content of this field is kept private and will not be shown publicly.

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.