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.
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.
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.
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.
$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;
}Unlike HTML, CSS has no nesting capability. Sass, on the other hand, does, and this not only saves work but also promotes clarity.
.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;
}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.
// 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.
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.
@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;
}Another way to save superfluous code. Existing CSS selectors are simply extended by placeholders.
%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;
}From time to time it is necessary to make mathematical calculations in CSS. Sass provides the necessary operators for this.
.main {
width: 800px / 960px * 100%;
}This then becomes:
.main {
width: 83.33333%;
}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:
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.
WordPress framework developers, by and large, serve two distinct areas of use:
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.
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".
Sebastian Lochbronner
86830 Schwabmünchen
Germany