Supporting CSS4 standards within Less

With the advent of CSS2 and CSS3, it is natural to assume that CSS4 will arrive at some point in the future. You are probably wondering how it might affect CSS preprocessors—let's take a look at what CSS4 is likely to mean for Less.

Officially, there is no such thing as CSS4. Strange as it might seem, we won't see the appearance of a new global standard; CSS4 instead will be grouped under smaller headings, of which each will have its own level. There is still a long way to go, but one of the groupings that is closest to being finalized is CSS4 Selectors.

Although these have been around since the beginning of CSS, CSS4 brings a number of new logical operators, such as :not and :matches, as well as some new local pseudo classes in the form of :any-link or :local-link. The latter, in particular, brings some useful features to styling links, as shown in the following code example:

nav:local-link(0){
   color: red;
}

nav:local-link(1){
   color: green;
}

nav:local-link(2){
   color: blue;
}

nav:local-link(3){
   color: yellow;
}

nav:local-link(4){
   color: gray;
}

We can rewrite this using the following code in Less:

nav {
  &:local-link(0) { color: red; }
  &:local-link(1) { color: green; }
  &:local-link(2) { color: blue; }
  &:local-link(3) { color: yellow; }
  &:local-link(4) { color: gray; }
}

If we compile this code, we can see the results within a page that has a breadcrumb trail—take, for example, the URL as http://internetlink.com/2014/08/21/some-title/, and this in the form of a breadcrumb trail as follows:

The first link will be red, the second will be green, the third blue, then yellow, and finally gray.