Sebastian Lochbronner Website
sebastian lochbronner
Menu

The more extensive a website project is, the longer and more confusing the CSS files become. So before you want to change something in the appearance, you first have to fight through countless lines of code to find the right place. Errors creep in, values cannot be reused, passages repeat themselves. As a CSS user, you wistfully look at other (programming) languages, which have useful functions like variables and so on.

CSS Preprocessors

Fortunately, there is a solution to this problem in the form of CSS preprocessors. The name already reveals that these are used at the beginning of the workflow. From slim files, in which "variables", "functions" and "mixins" can be used, the finished CSS files are created. The best known representatives are currently Sass, LESS and Stylus. Which of these preprocessors is used depends, among other things, on the respective project and your own preferences. In this article we would like to take a closer look at Sass, which we also use ourselves for the creation of (WordPress) websites.

Sass (Syntactically Awesome Stylesheets)

By its own account, Sass is "the most mature, stable, and powerful professional grade CSS extension language in the world." It was released in 2007 and was developed by Hampton Catlin. On the official website you can find many examples and a detailed documentation: sass-lang.com

The core functions and thus basis of Sass are:

You can learn more about the individual functions below.

Variables

Who hasn't experienced this: certain values such as HEX codes are used across pages, but have to be retyped every time. If many different colors are used, it is often not immediately obvious which snippet should be copied. This can be remedied by variables to which you simply assign the desired values. These can then be reused at any point.

Example for variables (SCSS)

$font-family: 'Roboto', sans-serif;
$font-color: #111;

body {
   font: $font-family;
   color: $font-color;
}

This code is converted to:

body {
   font: 'Roboto', sans-serif;
   color: #111;
}

Nesting

Unlike HTML, CSS has no nesting capability. Sass, on the other hand, does, and this not only saves work but also promotes clarity.

Example for Nesting (SCSS)

.highlight {
   h1 {
      color: yellow;
   }

   a {
      text-decoration: underline;
   }

   p {
      font-weight: bold;
      font-size: 1.5rem;
   }
}

This code is converted to:

.highlight h1 {
   color: yellow;
}

.highlight a {
   text-decoration: underline;
}

.highlight p {
   font-weight: bold;
   font-size: 1.5rem;
}

Import

CSS already offers an import function, but it only requests another CSS file via HTTP. With Sass, on the other hand, multiple files can be merged into a single one.

Example of import using style.scss and _font.scss (SCSS)

// style.scss

body {
   background-color: #eee;
}

@import 'font';

footer {
   display: block;
}

 

// _font.scss

h1 {
   font-size: 2rem;
   color: #aaa;
}

These two separate SCSS files are combined and the following code is obtained:

body {
   background-color: #eee;
}

h1 {
   font-size: 2rem;
   color: #aaa;
}

footer {
   display: block;
}

It is recommended to work with a reasonable number of such import files for larger projects, so that the overview can be maintained. Another advantage is that in this way individual modules can also be used in another project. It should be noted that the names of the SCSS files to be imported must begin with an underscore.

Mixins

Recurring functions and templates, called mixins, are another useful extension that makes it easier for you to work with CSS files. Once you create a template, you can use it as often as you like throughout your project.

Mixins example (SCSS)

@mixin border-radius($radius) {
   -webkit-border-radius: $radius;
   -moz-border-radius: $radius;
   -ms-border-radius: $radius;
   border-radius: $radius;
}

.button {
   @include border-radius(20px);
}

This code is interpreted as follows:

.button {
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   -ms-border-radius: 20px;
   border-radius: 20px;
}

Extend / Inheritance

Another way to save superfluous code. Existing CSS selectors are simply extended by placeholders.

Example for Extend / Inheritance (SCSS)

%meldung {
   border: 2px dotted #000;
   padding: 5px 10px;
   font-weight: 800;
}

.message {
   @extend 1TP2Message;
}

.success {
   @extend 1TP2Message;
   color: green;
}

.error {
   @extend 1TP2Message;
   color: red;
}

.warning {
   @extend 1TP2Message;
   color: yellow;
}

This code is converted to:

.message, .success, .error, .warning {
   border: 2px dotted #000;
   padding: 5px 10px;
   font-weight: 800;
}

.success {
   color: green;
}

.error {
   color: red;
}

.warning {
   color: yellow;
}

Operators

From time to time it is necessary to make mathematical calculations in CSS. Sass provides the necessary operators for this.

Example for Operators (SCSS)

.main {
   width: 800px / 960px * 100%;
}

This then becomes:

.main {
   width: 83.33333%;
}

How do I get my finished CSS file now?

For this you need a suitable compiler. We currently use Prepros for Windows, but there are also numerous other representatives such as CodeKit (Mac) and Compass (Windows + Mac).

[Update: since 2017 there is now the possibility to use variables without preprocessor, see also CSS Custom Properties; we still recommend the use of preprocessors like Sass or LESS, because variables are not the only feature].

Frameworks have become an important part of the WordPress landscape. They add numerous features to the CMS and make life easier for WordPress developers and users alike.

In this article we would like to address the following questions:

WordPress frameworks - a quick start

A framework is in a way a special kind of WordPress theme or WordPress plugin, which has influence on the appearance and the functions of the website. There are different ways how such a framework can be integrated, for example as a parent theme (with own child themes), as a standalone theme (without child themes), or as a plugin (supplemented by a suitable theme). The main difference between a (starter) theme and a framework is that the former only uses the core functionality of WordPress, while the latter extends it. So if you are only looking for "visual assistance" in the development of a WordPress website, you are already served with a simple theme. Who, on the other hand, would like to extend the basic functions of WordPress, which can help themselves to the ever-growing framework gift table.

Various fields of application

WordPress framework developers, by and large, serve two distinct areas of use:

Three advantages of WordPress frameworks

Advantage #1: A framework can be a real kickstarter for a new WordPress project because you don't start from scratch, but can fall back on the development work of other programmers. The large community, which provides a constant stream of new themes, plugins and code snippets, especially for the most popular frameworks, makes the work much easier and the entire user community can benefit from it.

Advantage #2: Frameworks make a site very updateable and customizable. No matter if a new theme version is installed or the appearance is changed completely, the basic functions of the framework as well as the settings defined there are always preserved. For updates, most frameworks already provide a button in the backend, which is why the user does not have to deal with a manual update via FTP.

Advantage #3: Security and SEO - by using (strong) frameworks, the entire website benefits from increased security as well as improved search engine friendliness.

The choice - which framework is right for my project?

Unfortunately, a blanket answer to this question cannot be given, because websites and their creators/users are simply too different for that. Each developer or web designer has personal preferences, and each framework also provides different functions. Therefore, there can be no overall winner for every use case. The choice must therefore be made individually in each case. At least an overview of the currently popular WordPress frameworks (as of 2017) can be given here:

At this point a big Thank you to all contributors who make the use of great frameworks possible!

-

You might also be interested in my topic-relevant article "13 reasons why WordPress is the best CMS for websites".

Send email
Say hi!

Sebastian Lochbronner
86830 Schwabmünchen
Germany

Social