CODEWITHSUNDEEP
sassgulp-sass
sevennationarmy
sevennationarmy

Reputation: 9

Editing SASS files (.SCSS)

I'm a complete beginner with SASS!

I have a custom built WP site which uses SASS. When I try to edit any styles inside the .SCSS files these changes do not show on the frontend.

I'm using VS Code editor with the "Live SASS compiler" add-on but still when I make changes they do not reflect on the front end.

I'm clearly missing something here but really don't know where to start.

All I want to do is make changes to the styling of the site!

Thanks

Upvotes: 1

Views: 1722

Answers (1)

DannyXCII
DannyXCII

Reputation: 928

You will need to ensure that SASS is installed on your machine - check out the offical install link.

Once SASS is installed, the rest of this answer will involve using the command line with some basic commands.

Lets assume your CSS and SCSS/SASS folders are arranged like so:

C:/Users/Me/development

/wordpress/wp-content/themes/my-theme/assets/css
/wordpress/wp-content/themes/my-theme/assets/scss

Open up your preferred command line interface - like PowerShell or Command Prompt. First of all, check SASS is installed by typing the following command and hitting enter:

sass --version

You should get a number back - if not, you will need to run over the installation instructions again and make sure you did everything correctly.

If that's working as expected, you will now need to navigate to the directory containing your assets. When you load your command line interface, you should be inside your user or home directory - in this example that will be C:/Users/Me. If using PowerShell, you will see your current working directory before the flashing caret.

You can use the change directory command - cd - to navigate to your themes assets folder. Using the above example filepath:

cd development/wordpress/wp-content/themes/my-theme/assets

Once inside this directory, you can run the SASS --watch command to watch the directories for changes and compile upon save:

sass --watch scss:css

The above watches the SCSS folder and puts the compiled CSS in the CSS folder. Once you're done editing, hit CTRL/CMD + C inside your terminal (command line) and then Y to stop watching the SCSS files for changes.

Upvotes: 2

Related Questions