/Setting-up-my-Sass-Environment

Setting up my SCSS Environment

  • This Readme is to help me remember how to setup my SCSS environment.

Install Sass with Ruby:

gem install sass

Compile CSS to SCSS:

To compile your SCSS into CSS you need to let your Sass know where you are writing your code and give it a place to precompile the CSS into another file.

sass input.scss output.css

Link your new CSS file in your HTML.

<link href="output.css" rel="stylesheet">
  • You can name your files whatever you'd like. The output css file should now contain all your pain CSS.
Remember to never work in the CSS file generated by your Sass

Watch command:

sass --watch /(inputfoldername:/(outputfoldername)

This command tells your Sass to recompile your .scss file to CSS when the file is saved.

Organising SASS:

  • Create a new folder in your directory for your .scss files. It is best practice to name it scss.
  • Move the .scss file into your new folder.
  • Create a new CSS folder and run the watch command for those folders.
sass --watch /(inputfoldername:/(outputfoldername)
  • Remember to change the <link> tag in your HTML file.

Creating Partials:

  • Create a new folder inside your scss folder called partials.
  • Next make a new file _newfile.scss or _colors.scss for example, inside the partials folder.
  • Import the partials with @import at the top of your main SCSS file.
@import 'partials/main-styles,
        'partials/colors',
        'partials/variables,
        'partials/mixins,
        'partials/helpers;