wpbits

Custom CSS for Blocks allows you to easily write custom CSS for any block or post on your WordPress website, giving you complete control over the design of your content. You can take advantage of SASS support to write clean, efficient code. And, with optimized inline output on demand, you can ensure that your website loads quickly and efficiently for your visitors.

Custom CSS for Blocks

WebMaestro.Fr

Write SASS, edit your variables and compile your stylesheet from your dashboard.
<a href="http://webmaestro.fr/sass-compiler-wordpress/" rel="nofollow ugc">Read the documentation</a>
<ul>
<li>
Register and enqueue your SASS sheets the same way you would do for your CSS.
<pre><code>`
</code></pre>
wp_enqueue_style( ‘my-sass-handle’, ‘http://example.com/css/mystyle.scss’, $deps, $ver, $media ); 
 `
</li>
<li>
Configure the plugin with the <code>sass_configuration</code> filter.
Configuration of the plugin is optional, but you should at least register your variables if you are using a CSS framework.
</li>
<li>
Set a SASS variable value
<pre><code>`
</code></pre>
sass_set( $variable, $value ); 
 `
</li>
<li>
Get a SASS variable value
<pre><code>`
</code></pre>
sass_get( $variable ); 
 `
</li>
</ul>
You will most likely use these functions in your theme’s <code>functions.php</code>.
The plugin uses <a href="http://leafo.net/scssphp/" rel="nofollow ugc">the scssphp Compiler</a>.

SASS Compiler

SASS compiler for WordPress. Allows you to write and compile SASS, and to edit style variables straight into your WordPress dashboard.

Custom CSS for Blocks vs SASS Compiler