Using CSS Preprocessors With WordPress - LESS Structures

In the first part of the series I gave a quick overview of the popular preprocessors LESS and SASS. I also covered the frameworks they are usually associated with.

In the second part of the series I did a deep dive into LESS and detailed a few of its features. We covered variables, nesting, and mixins.

In this part of the series I will be covering how to logically structure your .less files. I will also cover how to connect all of them using imports, and lastly quickly cover magnification.

Using LESS to Create Twenty Twelve Child Theme

We are going to be creating a child theme for the default Twenty Twelve theme. For those of you who are unfamiliar with creating child themes, the only thing we need to create a child theme is a style.css file. For more info, visit the WordPress Codex.

First, we will want to navigate to the themes folder inside of wp-content. You should see the twentytwelve folder inside of here. We are going to next create a new folder and name it lessbuilt. Open up that folder.

Inside our new lessbuilt folder we are going to create a folder in here and name it css. Open up that folder.

Inside of the css folder, create yet another folder named less and then open it up as well. Inside of this folder we will want to create a new file, style.less. Open it up.

For a spot check, make sure you have the following path now to your style.less file:

wp-content/themes/lessbuilt/css/less/style.less

Creating LESS File Structure

Now that we have the less folder created. We will be adding all of our .less files in this folder.

style.less

The first thing we are going to want to do in our style.less file is add the code to allow us to designate that we are creating a child theme. Please add the following:

/*
Theme Name:     Less Built
Theme URI:      http://wp.tutsplus.com
Description:    Child theme for the Twenty Twelve theme
Author:         Jason Bradley
Author URI:     http://everchangingmedia.com
Template:       twentytwelve
Version:        0.1.0
*/

@import url("../twentytwelve/style.css");

That's all we need to get started with. Next, we will create the other .less files and then tie them all together back here in style.less.

variables.less

The first file that I am going to suggest we create is a variables.less file. This is where we are going to store all the variables we will use for our child theme. This will be accessible to all of our .less files in our less folder.

Open up the new file and paste in the following:

// variables.less

// Colors
@white: #fff;
@gray: #666;
@gray-dark: #333;
@gray-light: #eee;
@blue: #4d8b97;
@blue-dark: #335c64;

// Content
@body-background-color: @gray;
@body-color: @gray-light;
@content-background-color: @gray-dark;

// Header
@site-title-color: @white;
@site-title-color-hover: @blue;
@site-description-color: @gray-light;

// Links
@links-color: @blue;
@links-color-hover: @blue-dark;

// Navigation
@menu-items-color: @gray-light;
@menu-items-color-hover: @blue;
@menu-items-color-active: @white;

// Posts
@entry-title-color: @white;
@border-color: @gray;

// Widgets
@search-form-background-color: @gray;
@search-form-border-color: @gray;
@search-form-text-color: @white;

mixins.less

The next file we are going to create is a mixins.less file. The majority of the changes we will be making are to the link colors. I am going to create a mixin that takes a link color and link hover color. It will return the styling based upon what is passed into it.

First create a mixins.less file. Open up that file and paste the following into it:

// mixins.less

.links(@link-color: @blue, @link-color-hover: @blue-dark) {
	a {
		color: @link-color;
		&:hover {
			color: @link-color-hover;
		}
	}
}

misc.less

The next file is going to hold miscellaneous stylings like the body and links. Create a misc.less file then paste in the following:

// misc.less

body {
	background-color: @body-background-color;
	color: @body-color;
}

.site {
	background-color: @content-background-color;
}

.links();

navigation.less

It's suggested to keep all of the navigation styling together so we can quickly know where to go to edit our menus.

Create a navigation.less file and add the following to it:

// navigation.less

.main-navigation {
	li {
		.links(@menu-items-color, @menu-items-color-hover);
	}
	.current-menu-item,
	.current-menu-ancestor,
	.current_page_item,
	.current_page_ancestor {
	a {
		color: @menu-items-color-active;
	}
}

header.less

Next, we are going to add the styling for the site title and description in the header.

Create a header.less file and add the following to it:

// header.less

.site-title a {
	color: @site-title-color;
}
.site-header {
	h1, h2 {
		.links(@site-title-color, @site-title-color-hover);
	}
}
.site-header {
	h2 {
		color: @site-description-color;
	}
}

posts.less

Next we will want to add some styling for our posts. We will be changing the title color and the entry header and footer link colors.

Create a posts.less file and add the following to it:

// posts.less

.site-content {
	article {
		border-bottom: 4px double @border-color;
	}
}
.entry-header {
	.entry-title {
		.links(@entry-title-color);
	}
}
.entry-header, .entry-meta {
	.links();
}

pages.less

We want our page titles to be white as well. I would also suggest you put any styling differences that you want for pages versus posts in here as well.

Create a pages.less file and add the following:

// pages.less

.entry-header {
	.entry-title {
		color: @entry-title-color;
	}
}

sidebar.less

I wanted to add a border to the left of the sidebar, so I am going to add that in a sidebar.less file. Create that file and add the following:

// sidebar.less

#secondary {
	border-left: 1px solid @border-color;
	padding-left: 20px;
}

widgets.less

We want to make the widget titles white and make the links in our widgets match the other links in our child theme. I also want to change the colors of the search form.

It's suggested to put any styling for widgets in widgets.less and keep the styling for the container around them in sidebar.less.

Create a widgets.less file and add the following to it:

// widgets.less

.widget-area{
	.widget {
		.widget-title {
			color: @gray-light;
		}
		.links();
	}
}

// Search form
#s, #searchsubmit {
	background: @search-form-background-color;
	border-color: @search-form-border-color;
	color: @white;
}

footer.less

The last file we are going to create is footer.less. It will contain any styling for the footer of our child theme.

Create a footer.less file and add the following to it:

// footer.less

footer[role="contentinfo"] {
	.links();
}

Putting It All Together

So we have created all of our individual .less files to break up our styling changes into a logical structure. You should have seen that as we were creating our files, we were using the variables that we created in variables.less in all of our other .less files. We also have used our .links() mixin from mixins.less a lot, as well.

The way that we are going to connect all of these .less files together is by using imports.

Imports

Imports in CSS and LESS are just like those in other languages. You are telling your compiler that you want your current file to know about and use other files. It's like importing a library or framework that you use in .NET, Ruby gems, etc.

The syntax for importing a file with LESS is just like that of CSS. Since all of our .less files are in the same folder, we will use the following:

@import "filename.less";

This will tell our LESS compiler that when you compile this file, you should also use this other file as well.

In our style.less file, we will want to add imports for each of the .less files that we created. This will also make sure that any .less file you import in style.less will be connected as well.

For example, if we import variables.less and widgets.less in our style.less file, the variables that we defined in variables.less will be accessible in widgets.less.

Final style.css file

/*
Theme Name:     Less Built
Theme URI:      http://wp.tutsplus.com
Description:    Child theme for the Twenty Twelve theme
Author:         Jason Bradley
Author URI:     http://everchangingmedia.com
Template:       twentytwelve
Version:        0.1.0
*/

// Import parent theme styles
@import url("../twentytwelve/style.css");

/*
/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\ CONTENTS /\/\/\/\/\/\/\/\/\/\/\/\/\/\//\/\/\/\

  1. Miscellanous
    - Variables
    - Mixins
    - Misc
  2. Navigation
  3. Header
  4. Posts
  5. Pages
  6. Sidebar
  7. Widgets
  8. Footer
*/

/* ---------------------------------------------------------------------- 1. Miscellanous */

// Variables
@import "variables.less";

// Mixins
@import "mixins.less";

// Misc
@import "misc.less";

/* ---------------------------------------------------------------------- 2. Navigation */

@import "navigation.less";

/* ---------------------------------------------------------------------- 3. Header */

@import "header.less";

/* ---------------------------------------------------------------------- 4. Posts */

@import "posts.less";

/* ---------------------------------------------------------------------- 5. Pages */

@import "pages.less";

/* ---------------------------------------------------------------------- 6. Sidebar */

@import "sidebar.less";

/* ---------------------------------------------------------------------- 7. Widgets */

@import "widgets.less";

/* ---------------------------------------------------------------------- 8. Footer */

@import "footer.less";

Setting Output Paths

Now that we have all of our .less files created and all of them imported into our style.less file, we will want to set the output path of style.less in CodeKit.

We covered how to set the output of our .less file in the previous post.

Topping It Off With Minification

The great thing about using LESS for creating and compiling your CSS is that you can choose what format you want to compile to. This means that you can either compile it into its regular form or minify your files.

It's definitely suggested to minify all of your site's .css files. The smaller the file, the faster your site is going to load. You want the smallest file size because each page won't load and be seen by the user until the .css files are loaded. Your page load speed also impacts your SEO.

With CodeKit, changing the setting for your output to minify is as easy as changing the Output Style to Minified. Now each time you make a change to any of your .less files, CodeKit will automatically compile them and minify them to your child theme's style.css file.

Conclusion

I have gone over the best practices for structuring your .less files in your theme or child theme. I also talked about the folder structure and where to place your .less files.

I stepped you through creating all of the .less files and talked about how to connect all of them to your style.less file using imports. Lastly I talked about where to set the output path of your style.less file and how to have CodeKit minify your .less files when it compiles.

I have also added the lessbuilt child theme to GitHub so you can fork it or download it.

HIGHLIGHTS OF THE DAY