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

Install Sass

Install Sass

Before you can start using Sass, you need to install it on your machine. I’m going to install Sass on Windows.

  1.  Install Ruby
    Ruby installer is the fastest way of getting Sass onto your Windows computer.
    Download it and follow the simple installation process.
  2. Open command prompt by typing ‘cmd’ and type
    gem install sass

    into command prompt. Press enter and the installation begins.

  3. After Sass is installed on your computer, you can double check if it is all properly installed by typing
    sass -v

    into command prompt.
    If everything is installed properly, this command will give you version of installed Sass –

    Sass 3.4.24 (Selective Steve)

Full example of the code

promt.png