Styling the Site with CSS/SASS

Note: Make sure you are running grunt before making changes

Your project has an scss/ folder which is where you will make all your style changes.

You should have a basic understanding of SASS variables and mixins. If you are new to SASS start with: https://sass-lang.com/guide

You will find the files you need to edit inside the scss/themes folder of your project. The two primary files you will change are:

• _custom_variables.scss - you will put your sass variables in this file.
• _main.scss - this file will include your css selectors and sass statements.

Changing Variables

You always want to first determine if there is a variable available for you to update to accomplish what you want. This is the quickest and most streamlined way to adjust many aspects of the appearance. To find a list of available variables you should look inside the sass-reference/bs-reference/_variables.scss and sass-reference/mm-sass-reference/_variables.scss for the lists of available variable files. There you will see all the sass variables for Bootstrap and mm-sass.

To change a variable just add it (or copy/paste) to the themes/_custom_variables.scss file like so:

$brand-primary: #aa11cc;

Be sure that you DO NOT include the !default declaration at the end.

Assuming you have grunt running, you can edit your variables, save your file, wait for the file to compile and upload and do a hard refresh of the development site to see your changes.

Adding to _main.scss

If you don’t see a variable for the change you want, then you should add your styles to the _main.scss file.

You can use regular css in this file and everything will work just fine, but if you are comfortable with more advanced SASS techniques you can use those as well and there are many powerful sass techniques you can use to improves the functionality of your styles.

For documentation on the MM-SASS framework see: mm-sass