Styling a Read More link with Less

Less is more for CSS, Efficient CSS with Pre-Processors

Bootstrap 3 users generally know that Less is a CSS pre-processor that extends CSS allowing you to use variables and functions. But many people are reluctant to write their own Less code. Even if you don’t use Bootstrap, you can still use a pre-processor to allow you to use CSS variables and functions and improve your code This article gives a short, but useful example.

Styling a “Read More”, an easy example to follow

Start with a Bootstrap 3 project. I am going to style some “Read more” links. Each link will have a class of read-more.
<a class=”read-more” href=”#”>Read More</a>

My styled link will look like:

I add a new new file called read-more.less.


@import "variables.less";
a.read-more {
color: desaturate(@link-color,20%);

&:visited {
color: desaturate(@link-color,20%);
}
&:hover{
color: saturate(@link-color,100%) ;
}
&:after{
content:”\e092″;
font-family:”Glyphicons Halflings”;
}

}

The first step is to import my variables.less file which is found in my bootstrap Less library. This is where I find the initial value of the variable @link-color. You can also write a completely stand alone Less file. Just define the @link-color at the top of your file and no import is needed. For example:


@link-color:#0000ff;

Change the color and add an arrow

In this file, I want to make the color of my “read more” link a little less intense, less saturated than the other links on the page. I also want to add an arrow icon after the “Read More” words found in the link. If I am a Bootstrap 3 user, I am already linked to the glyphicon library. You can view all the glyphicons at:
BOOTSTRAP GLYPHICONS

Compiling

After creating the less file, I compile it using the Less pre-processor. You can do this manually by installing Less on your development computer using:
npm install less -g.

Once it is installed, you can compile your code by typing in a command window:
lessc read-more.less read-more.css

Ensure you are in the correct windows folder.

Resulting CSS

This will create a css file called read-more.css. Since my @link-color was #337AB7, this is the resultant CSS.


a.read-more {
color: #4b79a0;
}
a.read-more:visited {
color: #4b79a0;
}
a.read-more:hover {
color: #007eeb;
}
a.read-more:after {
content: "\e092";
font-family: "Glyphicons Halflings";
}

The Less code here uses the desaturate and saturate functions to control the intensity of the color. It also nests CSS rules within the a.read-more rule using the “&” parameter. In this case, “&:hover” becomes “a.read-more:hover” and make the code easier to follow.

Add your new stylesheet

After creating your read-more.css file, include it as a stylesheet link. Alternatively, you can import it into another Less file. For example, your bootstrap.less file


@import "variables.less";
@import "mixins.less";
@import "read-more.less";
...

and just compile this bootstrap.less.

Compiling your Less code after each change can be a little tedious and it is easier to use apps such as Prepos to automatically compile every time you save your Less code.
Prepos will also compile your Sass code if you decide to use Sass.

Bootstrap 4 and Sass

The Bootstrap 4 download no longer provides the source code in Less files, but instead gives the files in Sass, which is a similar pre-processor for CSS. The two pre-processors work in a similar way, but you can use both Less and Sass in the same web project. You just need to compile them into separate CSS files and link to each of them at the top of your website because you cannot mix them at compile time.

Posted in CSS

Leave a Reply

Your email address will not be published. Required fields are marked *