#preprocessors

New item has been added on ThemeKeeper.com https://themekeeper.com/web-design/6-preprocessor-features-coming-to-native-css

New Post has been published on http://mocco.sk/write-for-wptuts/

Write for Wptuts+

Our focus here on Wptuts+ is on tutorials for WordPress developers (makes sense, right?). We cover anything related to WordPress, in particular theme and plugin development.

Our tutorials are aimed at anyone from beginner to intermediate, intermediate to advanced, and so on. Ultimately, our goal is to make sure that the reader leaves with more knowledge than when they arrived.

What We’re Looking For

At the moment we’re wanting to publish more content on areas such as responsive theme development, app themes, unit testing with WordPress, preprocessors (Sass / LESS, in particular), parallax implementation, and a variety of plugin examples.

Basic tutorials are welcome, but we’re really after thorough coverage of these areas. Think Tom McFarlin-style (check out Tom’s series’ on Wptuts+ to get what I mean there).

At the moment we only accept content in English. We’ll proofread, edit, and provide feedback on your content, but we won’t re-write it for you, so it’s important your English is fluent.

Having said that, if you have a question about how to phrase something in English, go ahead and write it as best you can and one of the editors will be happy to provide feedback prior to publishing the article. Don’t let intimidation of the English language prevent you from contributing an article!

I’m going to go ahead and assume you know a little about WordPress for this, so you’ll be comfortable drafting your posts in WordPress

Let’s Talk Money

We don’t expect you to write for us for free! You’ll start out on $150 USD per tutorial, and we bump that up once you’ve written a handful of posts for us. High profile authors can negotiate a higher rate with us, but you’ve really got to know your stuff. I’m talking serious WordPress chops!

Some of our regular authors invoice us for $750+ USD per month. That’s not bad for dropping some knowledge and getting some recognition, too! For the right authors, we can guarantee you publishing spots to help you pump out quality WordPress tutorials.

Also, who doesn’t love a marketplace badge? You get a special badge for contributing a tutorial to a Tuts+ site

Where To Next?

Whether you’ve written for Wptuts+ before, or you’re fresh to this tutorial writing business, please hit me up! (Even if you’ve applied before and it hasn’t worked out!) Shoot an email to [email protected] with the following info:

Name

Marketplace username

Brief paragraph filling me in on your background and why you want to write for us

One link to a tutorial you’ve written, helped with, or is the kind of content you want to create

Two ideas for tutorials you’d like to write for us

A link to your portfolio and / or GitHub profile

Show your passion!

Best of luck! I look forward to hearing from you and hopefully working together. If WordPress isn’t your strong suit, don’t forget there are other Tuts+ sites you may consider getting in touch with too:

New Post has been published on http://mocco.sk/using-css-preprocessors-with-wordpress-less-codekit/

Using CSS Preprocessors With WordPress - LESS + CodeKit

In the first part of this series I gave a quick overview of the popular CSS preprocessors LESS and SASS. I also shared a few of the frameworks in which they are used.

I plan on taking a deeper dive into LESS and talking about the parts of the language I use most often. I also plan on showing you how to get started using it with CodeKit.

Let’s dig in!

What I Use and Why

I personally use LESS for most WordPress projects. I spend a lot of time working with Standard and it uses Bootstrap as its framework of choice.

Since Bootstrap uses LESS for compiling its CSS, I have learned how to use its .less files to make modifications. I know of other web designers and developers who prefer to use Foundation. Since Foundation uses SASS, they have learned to use that instead.

I am personally starting to work on another web project that uses SASS, and it has been relatively easy to pick things up due to my experience with LESS.

A Look at LESS

Variables

Variables are pretty self-explanatory. You can create a variable somewhere in your .less file and then reference it in other places in that file, or other files. I tend to use it for colors, fonts, padding, and margins.

Here’s an example:

// Variables @red: #ff0000; @green: #00ff00; @blue: #0000ff; // Styling // Links a { color: @blue; } a:visited { color: @blue; }

That will then compile to this:

a { color: #0000ff; } a:visited { color: #0000ff; }

If you wanted to change the color of both link stylings, then you just need to change the variable:

@blue

from

#0000ff

to

#0000a4

You change in one spot, recompile, and you have changed all instances of that variable throughout the file.

Another great way to use these variables as well would be to use more semantic naming like:

@primaryColor

and

@secondaryColor

You can then use those variables throughout your code. When your designer comes up with those colors, you can just change them once, recompile, then you’re done!

Nesting

Nesting is used just like you would nest logic in an if/else block in your PHP or JavaScript: You set your higher level selector like .post, then place the other selectors inside of it. It will eliminate the need to repeatedly type out .post in front of your other selectors like so:

// Post .post { padding: 20px; .post-header { margin: 20px 0; } }

That will then compile to this:

.post { padding: 20px; } .post .post-header { margin: 20px 0; }

You can also use & to concatenate selectors as well. An example could be if you wanted to target specific widgets in your sidebar. Let’s say you wanted to style the background color of Recent Posts and Recent Comments widgets differently. You can do the following in LESS:

.widget { padding: 20px; .widget_recent_entries { background-color: white; } .widget_recent_comments { background-color: black; } }

That would compile into this:

.widget { padding: 20px; } .widget.widget_recent_entries { background-color: white; } .widget.widget_recent_comments { background-color: black; }

You can also use this for pseudo classes like :hover, :active, :visited, :before, and :after.

// Links a { color: blue; :hover { color: red; } :visited { color: red; } }

That would compile to this:

a { color: blue; } a:hover { color: red; } a:visited { color: red; }

Mixins

Mixins are basically a number of style attributes that you want to group together. A great example of this is for attributes that are different between browsers like border radius.

Instead of having to remember each one, you can call your mixin and it will provide each attribute for you. Here’s an example:

// Mixin .border-radius { border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } // Widget .widget { .border-radius; }

That will compile to the following:

.widget { border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }

What if you wanted to use border radius multiple times in your .less file but wanted different amounts for each? That’s when you would use a Parametric Mixin.

This simply means that you can reuse a mixin and pass it an argument to use. Here’s an example:

// Mixin .border-radius (@radius: 4px) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; } // Widget .widget { .border-radius(); } // Post .post { .border-radius(8px); }

That would compile to this:

.widget { border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } .post { border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; }

Putting It All Together

Here’s an example of using variables, nesting, and mixins all at the same time:

// Variables @widget-recent-posts-border-radius: 4px; @widget-recent-posts-background-color: white; @widget-recent-posts-link-color: @blue; @widget-recent-comments-border-radius: 8px; @widget-recent-comments-background-color: black; @widget-recent-comments-link-color: @red; // Colors @blue: #0000ff; @red: #ff0000; // Mixins .border-radius (@radius: 4px) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; } // Widgets .widget { .widget_recent_entries { background-color: @widget-recent-posts-background-color; .border-radius(@widget-recent-posts-border-radius); ul li a { color: @widget-recent-posts-link-color; } .widget_recent_comments { background-color: @widget-recent-comments-background-color; .border-radius(@widget-recent-comments-border-radius); ul li a { color: @widget-recent-comments-link-color; } } }

Which would all compile into this:

.widget.wiget_recent_entries { background-color: white; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } .widget.widget_recent_entries ul li a { color: #0000ff; } .widget.wiget_recent_comments { background-color: black; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; } .widget.widget_recent_entries ul li a { color: #ff0000; }

Using CodeKit

Importing a Project

It’s extremely easy to setup your CodeKit Project. You can simply drag and drop your folder into CodeKit, or you can click the plus button in the bottom left and then select a folder from the file browser.

Once you do that, CodeKit will automatically scan all the files in that folder and then group them into the following categories:

Configuring the Project

So you have now imported your project files. Next we are going to set the output path of your .less files. I would suggest to have a css folder and a less folder inside of it. You will want to make sure to have all of your files in that less folder to point to your style.less file.

You will want to switch over to the Styles view. We will want to have the style.less file be compiled into your theme’s root folder as style.css. To do this, you will want to right-click on the style.less file, and select “Set output path…“. This will bring up a File Browser.

Next, you will want to click in the Output filename and extension text input. Once you do that it may auto populate style.css for you. If it doesn’t, then you will want to enter in style.css. Lastly you will click on Select to save.

We are almost there! Next we will need to select a compilation setting. You will see the compilation settings screen reveal itself when you click on a .less file. We have three available output styles:

Regular

Minified

Compressed (YUI)

Select one of the above and click on “Compile“. You should get a notification that your style.less file has compiled.

If all of your syntax is correct, your compile will be successful. If there are any errors, it will flip you over to the Log view and give you the line number and explanation of the error.

If everything compiles correctly, you should be able to open up your style.css file and see the output. As you edit your .less files and save them, CodeKit will automatically recompile your files.

Note: Make sure that you don’t make any changes to the style.css file, because as soon as you recompile your .less files, your changes will be overridden.

Conclusion

We have now gone through a deeper dive into LESS and broken down a few of the popular features. I have explained a few reasons why I personally choose to use LESS in my WordPress projects and how to use CodeKit to compile all of my files.

In the next post, I will go into greater detail around how to structure your ‘.less‘ files and connect them all together.

Resources

Other parts in this series:Using CSS Preprocessors With WordPress – What Are They?