Installing and using Sass

In the process of writing my new WordPress theme, which was called Pandammonium but is now called Panda-Puss, I got the basic structure sorted. I thought I’d add some style. That proved easier said than done.

The theme I copied and another theme I have installed in my development version of WordPress both have a style.css and a load of .scss files tucked away in a directory. It seems that the .scss files are preprocessed by a program called Sass into style.css.

What are all these things? That’s a good question.

What are CSS, SCSS and Sass?

A CSS (cascading style sheet) is used to add style to HTML files.

SCSS (sassy CSS) is a superset of CSS syntax, so any valid CSS is valid SCSS. The file extension is .scss. It’s preprocessed by a program called Sass into a .css file.

Sass (syntactically awesome style sheet) is like SCSS except that the syntax is different: instead of using curly brackets (braces) like SCSS (and CSS), it uses indentations: valid CSS is not valid Sass. It has the same features as SCSS and is preprocessed into a CSS file in the same way. The file extension is .sass. Sass is also the name of the preprocessor.

It looks like I want to use SCSS so I can continue to use CSS-like syntax. The indentations of Sass would do my head in for sure. I’d best install the preprocessor Sass.

Installing Sass

How to install Sass? The first instructions [1] I found were too complicated.

Installing Sass with Ruby

The second instructions [2] said to install Sass using a Ruby gem. Ruby is already installed on Mac OS:

ruby -v
ruby 2.6.3p62 (2019-04-16 revision 67580) [universal.x86_64-darwin19]

So far so good. Next came the exciting part: installing Sass:

sudo gem install sass
Fetching ffi-1.15.3.gem
Fetching rb-inotify-0.10.1.gem
Fetching rb-fsevent-0.11.0.gem
Fetching sass-listen-4.0.0.gem
Fetching sass-3.7.4.gem
Building native extensions. This could take a while...
ERROR:  Error installing sass:
	ERROR: Failed to build gem native extension.

A lot more blether was spewed out after that. This was not so good. It suggested checking a particular log file to see what had gone wrong, but it was gibberish to me. Colin suggested looking on the internet for help, but I didn’t see anything useful.

What I did see was that Sass can be installed in ways that don’t involve Ruby or its gems [3]. I could install it using npm (from Node.js) or using Homebrew. I plumped for Homebrew.

Installing Sass with Homebrew

All you have to do to install Sass with Homebrew is type the following:

brew install sass/sass/sass
Updating Homebrew...

Of course, I hadn’t done anything with Homebrew in a while, so it wanted to update itself. This took a while, of course. If your Homebrew is up to date, you can skip to Using Sass.

When it had finished updating, it said:

Warning: A newer Command Line Tools release is available.
Update them from Software Update in System Preferences or run:
  softwareupdate --all --install --force

If that doesn't show you any updates, run:
  sudo rm -rf /Library/Developer/CommandLineTools
  sudo xcode-select --install

Fortunately, it suggested how I should go about updating the command line tools, but then it set about installing Sass so that the relevant commands disappeared off the top of the terminal window. Luckily, I save a lot of lines of scrolled-away text. I tried the first suggestion:

softwareupdate --all --install --force
Software Update Tool

Finding available software
No updates are available.

Time for Plan B:

sudo rm -rf /Library/Developer/CommandLineTools
sudo xcode-select --install
xcode-select: note: install requested for command line developer tools

This brought up a dialogue box promising to take over two and a half hours. After I grumbled at that, it bucked its ideas up and changed it to less than three minutes. I ran softwareupdate --all --install --force again, just to see what would happen, but I got the same response as before. Not particularly surprising, I suppose.

In among all the output by Homebrew, I missed whether it had actually installed Sass or not; it had said it was doing it:

==> Installing sass/sass/sass

But did it do it? I entered the installation command again.

brew install sass/sass/sass
Error:
  homebrew-core is a shallow clone.
  homebrew-cask is a shallow clone.
To `brew update`, first run:
  git -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core fetch --unshallow
  git -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-cask fetch --unshallow
These commands may take a few minutes to run due to the large size of the repositories.
This restriction has been made on GitHub's request because updating shallow
clones is an extremely expensive operation due to the tree layout and traffic of
Homebrew/homebrew-core and Homebrew/homebrew-cask. We don't do this for you
automatically to avoid repeatedly performing an expensive unshallow operation in
CI systems (which should instead be fixed to not use shallow clones). Sorry for
the inconvenience!
Warning: sass/sass/sass 1.38.1 is already installed and up-to-date.

Would it ever end? Still, it had installed Sass; I proved it to myself by asking for its version:

sass --version
1.38.1

I ran the two commands listed above to ‘unshallow’ify homebrew-core and homebrew-cask, and it did something – hopefully the right something – each time. Then I ran brew update as it seemed to think I wanted to do:

brew update
You have 80 outdated formulae installed. You can upgrade them with brew upgrade or list them with brew outdated.

I upgraded the the outdated formulae, which resulted in more spewing out of stuff, and now it says:

==> Summary
🍺  /usr/local/Cellar/ghostscript/9.54.0: 683 files, 149MB
Removing: /usr/local/Cellar/ghostscript/9.52... (1,740 files, 120MB)
Error: Directory not empty @ dir_s_rmdir - /usr/local/Cellar/ghostscript/9.52

What does it mean?!

It means a lot of cycles of brew doctor, brew upgrade, brew update, brew cleanup, brew link foo, brew unlink bar, brew uninstall boo and deleting the aforementioned not-empty directory until I’m left with nothing but a grievance about Unbrewed header files [being] found in /usr/local/include. That’s just where Node.js happens to put its header files. It seems I should install Node.js with Homebrew after uninstalling the version I got direct from Node.js.

I moved on from the problems of Homebrew and got back to Sass.

Using Sass

I ran style.scss through the preprocessor to obtain style.css. It only worked!

sass sass/style.scss style.css

Now all I have to do is work out how to use it to make my theme look how I want it to look. However that is!

References

  1. https://www.elegantthemes.com/blog/tips-tricks/how-to-use-sass-with-wordpress-a-step-by-step-guide
  2. https://wpbeaches.com/up-and-running-with-installing-sass-on-macos/
  3. https://sass-lang.com/install

Add a comment?

This site uses Akismet to reduce spam. Learn how your comment data is processed.