WordPress scss to css

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

WordPress Plugin that compiles sass using scssphp

ConnectThink/WP-SCSS

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

readme.md

A lightweight SCSS compiler for WordPress.

Compiles .scss files on your wordpress install using scssphp. Includes settings page for configuring directories, error reporting, compiling options, and auto enqueuing.

The plugin only compiles when changes have been made to the scss files. Compiles are made to the matching css file, so disabling this plugin will not take down your stylesheets. In the instance where a matching css file does not exist yet, the plugin will create the appropriate css file in the css directory.

Looking for new maintainer

If you are interested in giving back to the open source plugin respond here with your interest

Directories are defined relative to your base compile folder which defaults to the theme folder. Alternatly you can choose the uploads directory or plugin directory. They must be separate from one another, so you cannot define the root folder to compile into itself.

Ideally you should setup a scss folder and a css folder within your theme. This will ensure the most accurate compiling.

library |-css | --style.css | --ie.css |-scss | --style.scss | --ie.scss 

Compiling comes in two modes:

• Compressed — More compressed css. Entire rule block on one line. No indentation.
• Expanded — Full open css. One line per property. Brackets close on their own line.

Source maps come in three modes:

• None — No source map will be generated.
• Inline — A source map will be generated in the compiled CSS file.
• File — A source map will be generated as a standalone file in the compiled CSS directory.

‘Show in Header’ will post a message on the front end when errors have occured. This helps debug as you write your scss.

If you’re working on a live/production site, you can send errors to a log. This will create a log file in your scss directory and print errors there as they occur. Just keep an eye on it, because the css will not be updated until errors have been resolved.

The plugin can automatically add your css files to the header for you. This option will enqueue all files found in the css directory defined in the settings. Keep this in mind if you have other non-compiled css files in this folder. The plugin will add them to the header, just don’t reenque them somewhere else.

Also keep in mind, that if you disable this plugin it can no longer enqueue files for you.

This plugin requires at least php 7.2 to work. . Tested up to php 7.4

You can import other scss files into parent files and compile them into a single css file. To do this, use @import as normal in your scss file. All imported file names must start with an underscore. Otherwise they will be compiled into their own css file.

When importing in your scss file, you can leave off the underscore.

Setting Variables via PHP

You can set SCSS variables in your theme or plugin by using the wp_scss_variables filter.

function wp_scss_set_variables() < $variables = array( 'black' =>'#000', 'white' => '#fff' ); return $variables; > add_filter('wp_scss_variables','wp_scss_set_variables'); 

During development it’s sometimes useful to force stylesheet compilation on every page load. Especially on hosts where filemtime() is not updating consistently.

You can tell the plugin to always recompile in the plugin options page or by adding the following constant to your wp-config.php or functions.php file.

define('WP_SCSS_ALWAYS_RECOMPILE', true); 

Currently there isn’t a way to fully support compass with a php compiler. If you want limited support, you can manually import the compass framework. You’ll need both the _compass.scss and compass directory.

compass / frameworks / compass / stylesheets / @import 'compass'; 

Alternatively, you can include Bourbon in a similar fashion.

This plugin will only work with .scss format.

• 4.0.2
  • Full SVN commit to WordPress
  • With version bump
  • Updates ScssPHP to version 1.11.0 thanks to fabarea
  • Updates ScssPHP to version 1.10.0 thanks to fabarea
  • Changes the base_compiling_folder to store key not path of directory shadoath
  • This allows deploying from local or staging to production by not saving absolute paths in DB.
  • Add ‘selected’ to wp_kses on select() shadoath
  • Add check to compiling_options on load() alianschiavoncini
  • Add more params to wp_kses in options() evHaitch
  • Fix params passed to wp_kses() shadoath
  • Add wp_kses() to echos with potential user input shadoath
  • Wrap check for WP_SCSS_ALWAYS_RECOMPILE with () niaccurshi
  • Update src to use ScssPHP github repo at 1.5.2
  • Update deprecated setFormatter to setOutputStyle and provide db migration shadoath
  • Updates to allow compile() from outside the plugin niaccurshi
  • Update src to use ScssPHP github repo at 1.2.1
  • When enqueueing CSS files Defer to WordPress for URLs instead of trying to guess them. Change by mmcev106
  • Allow setting Base Directory to Parent theme folder. Shadoath
  • Enqueue CSS files using realpath function. Addition by mmcev106
  • Set source URL to be home_url(‘/’) not simply / . Issue found by realjjaveweb
  • Must declare global to use it for $base_compiling_folder.
  • Correction for enqueueing styles not defaulting to get_stylesheet_directory() Issue
  • Bug fixes after merging 2.0.2 and 2.1.0 defaults worked, but new options did not. Shadoath
  • Settings dropdown added for choosing additional base compile locations outside of current theme. Suggestion by pixeldesignstudio
  • Added option in settings to enable an ‘always recompile’ flag. Suggestion by bick
  • Bugfix to add filter for option_wpscss_options to remove Leafo if stored in DB. Thanks to kinsky-org for pointing this out
  • Saving plugin settings will update DB with correct value.
  • Requires PHP 5.6
  • Update src to use ScssPHP github repo at 1.0.2
  • Added check to make sure ‘compiler’ function was not already defined. Shadoath
  • Create cache dir if it doesn’t exist @XNBlank
  • Add cache dir as default @mhbapcc
  • Fix error when «.*» folders exist @chameron
  • Add detailed error description for the directory settings @andreyc0d3r
  • Fix on SASS compilation trigger @fazzinipierluigi
  • Updated scssphp to version 0.7.5
  • Added source map @iannacone
  • Always define $wpscss_compiler in the global scope @jazbek
  • Updated scssphp to version 0.7.2 @hellerbenjamin
  • Removed depricated screen_icon()
  • Updated scssphp to version 0.6.6
  • Changed set version option to update if already exists
  • Fixed a bug where directory inputs were not getting sanitized @mmcev106
  • Made the missing directory warning also display if a specified path is a file @mmcev106
  • Added /vendor to .gitignore @mmcev106
  • Dont enqueue already enqueued stylesheets @bobbysmith007

  This plugin was developed by Connect Think. Now maintained by shadoath, and contributers.

  Источник

  WordPress scss to css

  I do think this is the best one in the WordPress plugin repository. You don’t even need to have a separate scss file. You can just write in the editor and let the magic happen!! Anyone who writes custom scss or even css along with WordPress, try this.

  Great plugins

  Hi man, It’s a great plugin, keep going developement, maybe inspire your of instant-css ( discountinued 2 years ago) it was the best scss editor. GITHUB /dylanblokhuis/instantcss-wp

  Contributors & Developers

  “SCSS WP Editor” is open source software. The following people have contributed to this plugin.

  “SCSS WP Editor” has been translated into 4 locales. Thank you to the translators for their contributions.

  Interested in development?

  Changelog

  1.1.5

  Release Date 4th November 2022

  1.1.4

  Release Date 14th October 2022

  1.1.3

  Release Date 13th October 2022

  • Fix – Strip additional slashes added by the PHP while save SCSS code to the database.
  • Fix – Modify the SCSS editor CSS which was influence “Save Changes” button in the Opera browser.

  1.1.2

  Release Date 26th May 2022

  • New – Updated Layout for Upcoming features
  • New – SCSS Quick Guide added in sidebar
  • Fix – Compatible with WordPress 6.0
  • Fix – Bug fix

  1.1.1

  Release Date 29th March 2022

  1.0.1

  Release Date 7th February 2022

  Источник

  WordPress scss to css

  

Установка

1. Upload scss-wp-editor.zip to the /wp-content/plugins/ directory and extract it.
2. Activate the plugin through the Plugins menu in WordPress.
3. Find WP SCSS in your Settings menu and add your SCSS.

Часто задаваемые вопросы

Can I use this plugin in a child theme?

Where can I check SCSS documentation?

You can check it here: https://sass-lang.com/documentation

Can I use Sass?

No, this plugin supports only SCSS.

Can I use simple CSS?

Can I use this plugin for my Multisite?

Отзывы

Perfect SCSS editor inside WordPress

I do think this is the best one in the WordPress plugin repository. You don’t even need to have a separate scss file. You can just write in the editor and let the magic happen!! Anyone who writes custom scss or even css along with WordPress, try this.

Great plugins

Hi man, It’s a great plugin, keep going developement, maybe inspire your of instant-css ( discountinued 2 years ago) it was the best scss editor. GITHUB /dylanblokhuis/instantcss-wp

Участники и разработчики

«SCSS WP Editor» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

«SCSS WP Editor» переведён на 4 языка. Благодарим переводчиков за их работу.

Заинтересованы в разработке?

Журнал изменений

1.1.5

Release Date 4th November 2022

1.1.4

Release Date 14th October 2022

1.1.3

Release Date 13th October 2022

• Fix — Strip additional slashes added by the PHP while save SCSS code to the database.
• Fix — Modify the SCSS editor CSS which was influence «Save Changes» button in the Opera browser.

1.1.2

Release Date 26th May 2022

• New — Updated Layout for Upcoming features
• New — SCSS Quick Guide added in sidebar
• Fix — Compatible with WordPress 6.0
• Fix — Bug fix

1.1.1

Release Date 29th March 2022

1.0.1

Release Date 7th February 2022

Мета

• Версия: 1.1.5
• Обновление: 9 месяцев назад
• Активных установок: 100+
• Совместим вплоть до: 6.1.3
• Языки:

Источник