SASS styles

We used SASS to write styles for the theme. This can be helpful when style customization is required.

How To Customize Styles with SASS

Install hexo-renderer-sass in your project:

1

$ npm install hexo-renderer-sass --save

Update your configuration and add:

1
2
3

node_sass:
  includePaths:
   - node_modules

Create a file as the entry point for your custom styles at source/style/doc.scss in your project dir and import the theme core styles:

1

@import "hexo-theme-doc/_doc.scss"

The entry point location must be source/styles/doc.scss so that it will override the css pre-compiled version that theme tries to include by default.

To override variables you should declare them before including theme core styles, example:

1
2
3
4

$doc-color-primary: red; // set primary color to "red"

@import "hexo-theme-doc/_doc.scss"

To see the list of available variables, have a look to hexo-theme-doc/source/style/_doc/vars.scss file.