Skip to content

A PHP Sass compiler for WordPress. It's compatible with ACF 5 plugin and use SCSSPHP to compile Sass Codes

License

Notifications You must be signed in to change notification settings

reyhoun/sass-watcher

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Sass Watcher

It's PHP SCSS Compiler for WordPress and it's compatible with Advanced Custom Field 5 to send parameters(variables) to your SCSS codes.

We use SCSSPHP to compile SCSS codes.

Features

  • Developer Mode: -- Auto compile in each page refresh
  • Manual Compile
  • ACF Compatible -- Send field values that field names start with s_ -- Compile codes every time ACF form saved -- Compatible with all ACF 5 fields: --- Repeater --- Flexible Content --- Typography --- Background --- and etc.

Getting Started

  • Important: Create an empty file in root of your theme with sass-watcher-config.txt name.
  • Download and Install Sass Watcher plugin(same as all WordPress plugins)
  • Open WordPress dashboard and navigate to Appearance > Sass Watcher
  • All Initial Settings are required. Complete all of them before continue.
    • Sass Watcher only read one SCSS file and compile it in one CSS file.
    • You can have separate SCSS files but you have to import all of them to one file for compile.
    • In this documentation, I use style.scss file name for your main SCSS file that wants to compile it.

###Initial Settings

  • SCSS Directory Path: This folder include your style.scss and _theme-settings.scss file.

    • Prefix of all fields here is directory of active theme & we get it with get_template_directory() function
    • Directory path example: scss
    • _theme-settings.scss is a custom name for that file you wants to save your ACF 5 Sass variables on it.
  • Final SCSS file to compile: This is path of your main SCSS file(for example: style.scss) for compile.

  • File for save variables sent from ACF: This is path of your _theme-settings.scss file.

    • Variables file example: settings/_theme-settings.scss
    • If this file doesn't exist, Sass Watcher created it.
  • CSS output file: This is path of your main CSS file(for example: style.css) for output of compiled SCSS codes.

###Developer Options

  • Developer Option: Enable auto compile in each page refresh.
  • Compile Now: When you want to compile your code manually use it.

###ACF Config If you want set variable in your Sass codes with custom ACF field just add a s_ before your field name and it's create a Sass variable with your field's name and store value of this field on it.

  • Some fields like Repeater and Flexible Content includes more than a field. If you add a s_ before of this Repeater's field name, it's create a variable and store all sub fields value as a Sass array on it.
  • If you want don't store value of one of those sub fields, just add ns_ before your sub field.

Bugs that we know

  • After save cache and display old data in Config Form. It's work correctly but you have to refresh page to see your changes.
  • I'm sorry! But at this moment, you have to write something for File for save variables sent from ACF but it's not important if you don't use it.
  • It implements SCSS 3.2.12 and it's related to SCSSPHP project.

About

A PHP Sass compiler for WordPress. It's compatible with ACF 5 plugin and use SCSSPHP to compile Sass Codes

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages