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
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.
Related
I use WinSCP to download and edit .scss files and sass on Linux (on the server) to compile them to .css.
After saving the file, I use: sass scss/style.scss css/style.css, which successfully replaces the css file with the compiled sccs.
The problem
I want to skip the part where I return to the command line after editing the scss file, for the sake of automation and saving time.
But, if I use the watch command: sass --watch scss/style.scss:css/style.css to synchronize the two files, alerts about nonexistent css errors pop up:
Change detected to: scss/style.scss
error scss/style.scss (Line 232: Invalid CSS after "...ht: bold; line-": expected "{", was "")
Note that when the file uploads quicker than usual (sometimes it happens) the watch command does its job, with no errors.
This is because, when the file upload takes time, sass compiles the scss file (on the server) before it is fully uploaded to the remote folder. Thus, it only compiles part of the file, resulting in css errors.
Is there a way to set a timer to the watch command so that it waits a few seconds after it detects changes and before compiling?
Any other way to overcome this is, of course, accepted!!
For the one in a billion facing the same problem (I know you are out there), time to answer to my tumbleweed:
The Solution is simple
Do the exact opposite:
Install ruby and then sass on your pc.
Tell sass to watch for changes between scss/css files locally with:sass --watch scss/style.scss:css/style.css
Set WinSCP local dir on the css folder which is watched by sass.
Set the WinSCP remote dir on the css folder you want to edit.
Set WinSCP to keep remote dir up to date from the Commands > Keep remote directory up to date menu.
That's it.
If you edit and save your local scss file, sass will compile it into css, then WinSCP will detect the change on the css and automatically upload it to the remote folder.
Attempting on a Mac with the latest version of Yosemite
I'm using the latest version of sass to refactor my site. I'm setting up watch command via the command line. my directory setup has a scss folder with the main css stylesheet cloned as .scss. and no css folder.
When I attempt the sass --watch scss:css command while in the main project directory folder, I've been told that, if there isn't one present, a css folder should be generated and a cloned .css file should be created along with a map file. Command line tells me >>> Sass is watching for changes. Press Ctrl-C to stop. however, changes are not being recorded.
I've tried updating my gems and uninstalling/ reinstalling sass, but nothing seems to be working.
Just tried this - the css folder doesn't get autogenerated. You need to generate it yourself. From there on, you should be good to go.
So if you are in the main project folder with subfolders called scss and css and you have, for example, a main.scss file in the scss directory, you can run the command exactly as you specified and everything should work as specified.
Please don't shoot me if this is a stupid question. My sass workflow looks like this. I navigate to the directory I'm working in and use the command sass --watch . to get it to watch the current directory. Then I usually separate my files into partials and import them into a main file. Once I'm happy with the changes I upload everything to the server.
Now however, I find myself in a situation where I want to make a quick visual change to something on my live site. Normally in CSS I would just download the style.css file make the change and re-upload it. The only way I could see this working in SASS is downloading all my scss files, typing in the sass --watch . command again, making that small change and then re-uploading everything via FTP.
Is this the only way? Is there an easier solution?
Are you just using sass to generate a css file in the command line? If so, you don't even really need to upload the sass files to your server. You can just upload the css file that sass --watch generates.
If you do want the sass files on your server though, you only need to upload the changed sass file(s) and any updated css file(s) that is generated.
If your main file imports _a.sass, _b.sass, and _c.sass and you only make changes to _b.sass, you would only need to upload _b.sass and the css that is generated, but make sure you have fresh copies of _a.sass and _c.sass locally before you make edits.
I'm trying to learn SASS and so I have installed ruby through RubyInstaller and installed the sass gem.
I am able to type out my sass and have the compiler watch the file and write to another just fine, but every time I save my file I get
The system cannot find the path specified
C:\Program Files (x86)\Notepad++)
However everything works as intended, the styles are updated and compiled just fine, but it's quite annoying hitting ctrl+s and having that error keep popping up when it doesn't seem to be affecting anything.
How do I go about troubleshooting this?
Here is a solution for anyone else having the same trouble on notepad++:
Sass-Auto-Compile
For using the Sass-Auto-Compile plugin, you first need to install
another plugin called jN. jN is a plugin for Notepad++, which executes
your JavaScript-scripts in the Notepad++ environment, meaning you can
write plugins in JavaScript
this is the link :
http://www.ninjagame.de/blogContent/Sass-Auto-Compile.js
To get the auto-compiling working, you need to do two things:
Copy this script into the directory “Notepad++/plugins/jN/includes/” .
Now edit the script and change the variable pathToRubyBinDir to the
right value. Mine is: “C:/Program Files/Ruby193/bin/” .
OPTIONAL: There are two more configuration variables:
debugMode: can be true or false. In case of true, you will see the
command line, which calls the compiling process. You can see compiling
errors in this command line window.
outputStyle: this determines, how your .css is going to look like.
(compressed, extended…). See the comments above this variable for more
information.
This guide is copied and pasted from http://deekaysblog.wordpress.com
With SASS you are required to create a config.rb which manages the location of the app. I've recently changed the name of this file to "sass_config.rb" and can't figure out how to change the default of "compass watch" so that it finds my renamed file.
To clarify, when I run the following command compass correctly finds the file and continues with its normal behavior:
compass -c watch sass_config.rb
But when I run:
compass watch
It says:
Nothing to compile. If you're trying to start a new project,
you have left off the directory argument.
How can I fix this behavior so it sees the file has been renamed by just running "compass watch"?
The configuration filename cannot be arbitrarily modified. It is hard coded within Compass to be in one of 5 locations (soon to be 4).
https://github.com/chriseppstein/compass/blob/192107cb4f17bef52fdd8c0d961fe77f3edb44c4/lib/compass/configuration/helpers.rb#L137
# TODO: Deprecate the src/config.rb location.
KNOWN_CONFIG_LOCATIONS = ['config/compass.rb', ".compass/config.rb", "config/compass.config", "config.rb", "src/config.rb"]
Just create a compass project by
compass create
after that you copy the OLD config.rb content to the created one from copass.
Now try
compass watch