Sass Within Wordpress

Sass within WordPress

Why do we need "style.css"?

Before I give my solution, I think it's important to go through the reason we need style.css in Wordpress

In Wordpress, the style.css file is required in order to view the theme information in the backend.

style.css is also used as the default output of get_stylesheet_uri(). However this can be customised using the stylesheet_uri filter.

In my opinion, the fact that Wordpress forces you to have your theme information in style.css is just bad design, as it adds approximately 1032 bytes. This is not a lot, but completely unnecessary; especially if it can be avoided, as the file size is perhaps the biggest factor impacting site performance.

This is unlike the Drupal CMS where your theme infomation is stored in a seperate file such as yourtheme.info, so is never exposed to the end user

---

Solution 1

Now we got that out the way, here is the solution!

The best approach in my opinion would be to:

• Compile all your sass files into a single file (such as style.min.css), by using imports and partials (see http://sass-lang.com/guide#topic-5). Feel free to name it something else.
• Leave all your wordpress theme headers in style.css.

For example like so:

style.css

/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange
Text Domain: twentythirteen

Use it to make something cool, have fun, and share what you've learned with others.
*/

style.min.css

p{color:red;}h1{color:blue;} ...

You can then make sure that the new stylesheet in added on every page of the frontend using the following code in your functions.php file:

function theme_name_stylesheets() {
    wp_enqueue_style('style-name', get_template_directory_uri() . '/style.min.css');
}

add_action( 'wp_enqueue_scripts', 'theme_name_stylesheets' );

See: https://codex.wordpress.org/Function_Reference/wp_enqueue_style for more infomation

Thus when your run wp_head() in your head of your document, it will add the correct CSS file automatically.

Then you can run sass-lint on your sass files, but still have your theme information in your style.css, giving the best of both worlds.

Advantages

• Passes sass-lint, as none of the sass files contains comments of the form /* ... */, as the theme headers are in style.css NOT style.min.css
• Smaller file size for the stylesheet, as the style.min.css no longer contains the theme header information, as this is stored in style.css
• Better site performance: As all your SCSS files are compiled into a single CSS file, the number of HTTP requests sent to your server reduces, thus improving your overall site performance.

Disadvantages

• Two CSS files. Not really much of a disadvantage, as the user on the front-end is only sent the style.min.css, NOT the style.css
• Can confuse users in the Wordpress community. Most Wordpress users expect your styles to be in style.css. However, I doubt this will be much of a problem (especially if you're not publishing your theme) and also can be rectified by a simple comment.

Solution 2

Another solution to your problem is to temporarily disable the scss-lint Comment rule using the following:

// scss-lint:disable Comment
/*!
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange
Text Domain: twentythirteen

Use it to make something cool, have fun, and share what you've learned with others.
*/
// scss-lint:enable Comment
p {
  font-size: 16px;
}

Also note the use of loud comments (i.e. /*! ... */ instead of /* ... */) . This basically means that this comment should not be removed in the minified versions of sass.

Advantages

• One CSS file
• Less likely to confuse users in the Wordpress community
• Passes sass-lint, as the comment rules is temporarily disabled!
• Better site performance: (same reason as Solution 1)

Disadvantages

• Larger file size for the stylesheet, as the compiled CSS file contains the theme header information. This is only a small increase however.

What about end-users who are not using Sass or Grunt/ Gulp?

From another comment you mentioned, you said you want users to be able to change minor things without installing sass or a build automation tool.

This does not mean that YOU can't use a build automation tool. It just means that your compiled CSS file from solution 1 or solution 2, should not be minified, as users cannot easily edit the file! Unfortunately, this means your site will be a lot larger in file size and thus slower as a result.

Alternatively you can have two files:

• website.min.css: the minified version of the compiled SCSS
• website.css: the expanded version of the compiled SCSS

[Again, name them as you wish]

Then if the user wishes to make quick changes without sass or Grunt/ Gulp, then he/she can do so to website.css (however, the user also needs to change the file that is being loaded in functions.php)

Also, experienced users who DO have sass experience or users who don't want to make any changes, don't have to compromise, as they still can take advantage of the fast minified website.min.css version!

The best of both worlds!

SASS Files in Wordpress

You have to add the file extension before it will show up in the editor. You can do this with the wp_theme_editor_filetypes filter.

For example:

add_filter('wp_theme_editor_filetypes', function ($types) {
    $types[] = 'scss';

    return $types;
});

How to run sass in wordpress?

You have assets folder. All source files including .scss files must be there. Then add gulp task to compile scss. It will take files from assets folder and put them to dest folder (dest folder is for compiled resources). Then add link to compiled .css file from dest to wp header.

Tutorial.

How does Wordpress deal with / compile SASS?

You do not necessarily need to edit the CSS of the template. You always have other options at your disposal.

• you can either create a child theme and make changes in it
• you can also create a custom style sheet and import the main stylesheet in your style sheet and put your code into your stylesheet
• or you can simply download a plugin which will allow you to put your custom css in the backend of wordpress and the plugin will import the custom css in the end of the main css file.

Following is a link to a plugin that will give you a window to add your custom css into:
https://wordpress.org/plugins/simple-custom-css/

Please use this and do not get messed up with SASS.

---

Related Topics