Ahmad Awais

NAVIGATE


SHARE


Introducing WPSass: Use Sass with WordPress via Node NPM Scripts

Ahmad AwaisAhmad Awais

๐Ÿ™Œ WPSass is a simple way to use Sass with WordPress via Node NPM Scripts in SCSS flavor.

๐Ÿš€ WPSass on GITHUB: โ˜… 99 โ‘‚ 15 โ†’#

๐Ÿค” So, I am working on a WP REST API product launch, for which I had to build several simple HTML pages inside WordPress. All I had to do was compile Sass to CSS. Where I found WPGulp to be an overkill.

So, I went ahead and wrote a very simple package for just one thing. Sass to CSS conversion in WordPress development. It doesn’t even use Gulp. Use Sass with WordPress via Node NPM Scripts in SCSS flavor.

WPSass
Use Sass with WordPress via NPM Scripts.
A FOSS (Free & Open Source Software) project. Maintained by @AhmadAwais.

Use Sass with WordPress, Node Script in SCSS flavor.

WPSass

Make sure you have node installed. If not download and install node.

โ†’ STEP #1: Install NodeJS & NPM#

After installing NodeJS you can verify the install of both NodeJS and Node Package Manager by typing the following commands. This step needs to be followed only once i.e. if you don’t have NodeJS installed. No need to repeat it ever again.

node -v
# v7.10.0

npm -v
# 4.2.0

โ†’ Step #2. Download package.json#

Download package.json file inside the root folder of your WordPress plugin or WordPress theme
If you have cURL installed then you can run the following command to download it in one go (just make sure you open the root folder of your WordPress plugin or WordPress theme and download package.json file in it).

curl -L 'https://git.io/wpsass' -o package.json

โ†’ STEP #3: Installing Node Dependencies#

We are in the root folder of our WordPress plugin or WordPress theme at the moment, let’s install the Node Dependencies. In the terminal run this command and wait for it to download all the NodeJS dependencies. It’s a one time process and can take about a minute depending on the internet speed of your connection.

# For MAC OS X run the following command with super user
sudo npm install

# For Linux run the following command
npm install

โ†’ STEP #4: Configure NPM Scripts#

Now, configure the NPM scripts. There are only two of them. If you open the package.json file. There are two scripts as follows:

"scripts": {
  "css": "node-sass --output-style compressed --include-path scss assets/css/source.scss style.css",
  "watch": "nodemon -e scss -x \"npm run css\""
},

In the css script, you need to change

NOTE: That currently this little app has following file structure

โ”œโ”€โ”€ assets
|  โ””โ”€โ”€ css
|     โ”œโ”€โ”€ partial
|     |  โ”œโ”€โ”€ base.scss
|     |  โ””โ”€โ”€ variables.scss
|     โ”œโ”€โ”€ source.scss
|     โ””โ”€โ”€ vendor
|        โ””โ”€โ”€ normalize.css
โ”œโ”€โ”€ index.html
โ”œโ”€โ”€ package.json
โ””โ”€โ”€ style.css

source.scss is the source file for SCSS files, which imports files from partials and vendor directory. This gets compiled into a style.css file in the root of our project as configured in the npm script.

โ†’ STEP #5: Run NPM Scripts#

All that’s left now is for you to run the NPM script in the root folder of your WP project โ€” where you downloaded the package.json file.

NOTE: Before you run, make sure there is a source SCSS file. Otherwise running the script will display this error An output directory must be specified when compiling a directory.

# Compile CSS.
npm run css
# Watch changes in SCSS files and compile CSS automatically.
npm run watch

Run

โ†’ STEP #6: Share!#

Yup, there are no more steps. Just share it with your friends. Or Click to Tweet about it.

Contribute#

Feel free to contribute. PR’s are welcomed.

Changelog#

Version 1.0.0#

License#

Released under MIT License.
Copyright Ahmad Awais


๐Ÿ™Œ โ€” If 500 people signup here, I will build a video series for this.


๐Ÿ™Œ THEDEVCOUPLE PARTNERS#

This open source project is maintained by the help of awesome businesses listed below. What? Read more about it โ†’

For anything else, tweet at @MrAhmadAwais

I have released a video course to help you become a better developer โ€” Become a VSCode Power User โ†’



VSCode

_VSCode Power User Course โ†’_

It’s free and open source. Issues/PR’s are welcomed on GitHub.

๐Ÿš€ WPSass on GITHUB: โ˜… 99 โ‘‚ 15 โ†’#

Let me know what you think about this :)

Founder & CEO at Langbase.com ยท Ex VP DevRel Rapid ยท Google Developers Advisory Board (gDAB) founding member. ๐Ÿง‘โ€๐Ÿ’ป AI/ML/DevTools Angel Investor โฏ AI/ML Advisory Board member San Francisco, DevNetwork

๐ŸŽฉ Award-winning Open Source Engineer & Dev Advocate ๐ŸฆŠ Google Developers Expert Web DevRel ๐Ÿš€ NASA Mars Ingenuity Helicopter mission code contributor ๐Ÿ† 8th GitHub Stars Award recipient with 3x GitHub Stars Award (Listed as GitHub's #1 JavaScript trending developer).

๐ŸŒณ Node.js foundation Community Committee Outreach Lead, Member Linux Foundation, OpenAPI Business Governing Board, and DigitalOcean Navigator. ๐Ÿ“Ÿ Teaching thousands of developers Node.js CLI Automation (100 videos ยท 22 Projects) & VSCode.pro course. Over 142 Million views, 22 yrs Blogging, 56K developers learning, 200+ FOSS.

โœŒ๏ธ Author of various open-source dev-tools and software libraries utilized by millions of developers worldwide โ“ฆ WordPress Core Developer ๐Ÿ“ฃ TEDx Speaker with 100+ international talks.

โœจ As quoted by: Satya Nadella ยท CEO of Microsoft โ€” Awais is an awesome example for developers.
๐Ÿ™Œ Leading developers and publishing technical content for over a decade ๐Ÿ’œ Loves his wife (Maedah) โฏ Read more about Ahmad Awais.

๐Ÿ‘‹โ€ฆ Awais is mostly active on Twitter @MrAhmadAwais

๐Ÿ“จ

Developers Takeaway

Stay ahead in the web dev community with Ahmad's expert insights on open-source, developer relations, dev-tools, and side-hustles. Insider-email-only-content. Don't miss out - subscirbe for a dose of professional advice and a dash of humor. No spam, pinky-promise!

โœจ 172,438 Developers Already Subscribed
Comments 6
  • Thomas
    Posted on

    Thomas Thomas

    Reply Author

    Hello

    I’ve followed your guide as a first time scss user. Is it possiple to compile with auto prefixes?


  • Ryan
    Posted on

    Ryan Ryan

    Reply Author

    Nice, Iโ€™ve followed your guide as a first time scss user.