On this page:
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 cascading style sheet (CSS) is used to add style to HTML files. The file extension is .css
Sassy CSS (SCSS) 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.
A syntactically awesome style sheet (SASS) is like SCSS except that the syntax is different: instead of using curly brackets (braces) like SCSS (and CSS), it uses indentations (like Python): 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 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 -vruby 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 sassFetching 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/sassUpdating 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 (even including a plan B), 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 --forceSoftware Update Tool Finding available software No updates are available.
Time for Plan B:
sudo rm -rf /Library/Developer/CommandLineToolssudo xcode-select --installxcode-select: note: install requested for command line developer tools
This brought up a dialogue box promising to take over two and a half hours. When 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/sassError: 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 --version1.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 updateYou 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!
Update on running Sass
Check out how to make Sass run automatically!
