Setting up files with Sass

We have simple file structure that consists of css folder, images folder and index.html –

q.png

Create new folder called ‘scss’ and move style.css file from folder ‘css’ to newly created ‘scss’ folder. Rename it to ‘style.scss’.

f.png

When you open index.html in browser, css will be removed from the website. This is okay, nothing to worry about.

Focus is on ‘scss’ folder as all the sass code we will write in this folder and sass will output css for the browser into ‘css’ folder. This is because browsers cannot read sass code and sass compiler is what is needed to translate sass into plain css.

To do that, we need to set up ‘watch command’. This command will tell sass to watch commands in scss folder and automatically convert them into .css files in css folder.

  1. Open command prompt (type ‘cmd’ and press enter) and go to the right directory –
    cd desktop
    
    C:\Desktop\cd sass-test
  2. Once you get to the right directory, tell sass to watch the directory –
    C:\Desktop\sass-test\sass --watch scss:css

    This tells sass to watch everything that is in scss folder and compile it to .css file in css folder.
    When everything is set up correctly, you’ll get success message looking like this – e

  3. Go to css folder and check that sass created style.css and style.css.map files where every sass code that we write in scss folder will be converted into plain .css.
    d
  4. Now, our website will have css style added to it.
  5. To test if it works properly, open scss/style.scss file and change/add css code to it, then save it.
  6. Open css/style.css and you’ll see that the code has been changed/added here.
    You can also see what file has been changed in command prompt –
    w
  7. We can tell sass to stop watching the project for changes by pressing crtl+c in command prompt

Important thing is NOT to close command prompt because it will stop watch and compiling process

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s