Join Jen Kramer for an in-depth discussion in this video Understanding and changing variables with variables.less, part of Customizing Bootstrap 3 with LESS.
Now that you're familiar with the Less file structure in Bootstrap, and you're familiar with the process of compiling files, let's take a closer look at the variables.less file. And how you can customize what's here for your website. So this is variables.less, available from your Less folder. Most of this document includes some variables that we can change to affect the look of the website. So starting here on line 10, we have a series of variables here that have to do with various colors of gray on the website, and some of the colors that are in use on the website.
You'll recognize primary, success, info, warning and danger there on line 16 through 20 as some of the colors you may already be familiar with in Bootstrap. The variable is on the left side there. It's the thing that starts with the at sign. That's the way you declare a variable. The variable name itself has to have letters, numbers and dashes or underscores. You'll find that Bootstrap uses dashes in their variable names, but they don't use any underscores, just to be consistent. So let's say for example that you'd like to change the font stack for the website.
If you were to scroll on down here to line number 42 and this is where you can change the sans-serif font families for the entire website. So just like you would with regular CSS, you can just on ahead and make a change here. So let's say that instead of Helvetica Neue and Helvetica, let's say we want Trebuchet MS. And maybe that's all. Trebuchet MS, Arial, and sans-serif.
You can also change colors with Less CSS. So back up here at the top of the document, these colors here for the various types of brands are used very globally throughout the Bootstrap website. If you make a change to brand primary, for example, this is going to affect every single, instance of brand primary, anywhere on the website. And there's a lot of them. So you'll see, like link color, for example, is controlled by this. Various button colors, some of the panel styling.
There's a bunch of different places where this color comes into play. If you want to change absolutely everything, you can change brand primary, and that will affect those colors on the website. So, that is, in fact, what I want to do. So I'm going to change brand primary to 916443. And that is a lovely shade of chocolate brown, which will match our Wisdom Pets website. All we need to do now is just save this, and the two changes we've made so far, the brown color as well as the font change should be reflected on the website.
So as you see here, the buttons here for the Submit button and the Read More button that used to be blue are now this nice light brown, so are the Read More buttons down here at the bottom of the web page. And if I go over to the Services page where we had this big blue panel over here, that's now brown as well. You'll also notice that the font everywhere on this website is now Trebuchet MS. Just kind of a nice complement to the font that's used here in the logo. Also with Less, you can manipulate colors using math. So if you come back to your variables.less file, you might be wondering what's going on here in lines 10 through 14.
These are various shades of gray but notice what happens when we create the variable name over here next to it; we have something that says lighten followed by pound zero, zero, which is the numeric code for black, followed by a percentage. So what's happening here is Less is doing some math. It's taking the color black, and if it lightens it, say by 13.5%, that value will actually calculate to 222. That's done here on line 10. There's also a darken function that you can also use.
This is super helpful because if you start with your brand primary here with this nice brown color. Less can do math to calculate slightly darker shades or slightly lighter shades, and in fact, that's in practice here on the website if you look at these buttons as you roll your mouse over it. How's it know to make that a darker brown? Well, that's coming from math with Less. Down here on line 35, you'll see that we have an example of that darken function and take a look at the way this one is set up. See how we have @link-color, 15%? So inside of this function, to set our link-hover color, what we're doing is we're taking the link color, which was set up here on line 33.
The link color is the same as the brand primary color. And then we're darkening it by 15%. So you'll see this a lot in the Bootstrap style sheet. Sometimes you have to track back these variables. Like in this case, where we're going from the link color to brand primary to figure out exactly what shade of brown in this particular case we started to work with. There's other kinds of math you can do as well. If you scroll down a little bit further in this document, here in lines 49 through 57, we have a whole bunch of math being done here to determine font sizes for heading tags, as well as some large and small font sizes.
And you'll see here that what we're doing is we're taking, in this case, a font-size-base, the font-size-base was set here on line 48. And then, we're multiplying it by some sort of constant to scale up that font size or scale it down, depending on what the number is. And then, this is run through a function here, and it's either called floor or ceil, ceil being ceiling. And this has to do with rounding issues. So, for example, if you multiply 14 by 1.25, you'll actually wind up with something like 18 or seventeen and a half and ceiling would indicate that it would round up to the full 18 pixels as opposed to a floor.
If you rounded up with something, let's say thirty-six and a half, floor would indicate that you would round down to 36, so that you wind up with integers instead of with decimals. The last thing that I'd like to do while I'm here is set up a new variable. And that's possible to do as well. All we have to do is type it in. I'm going to set up a new color here that I want to work with. And I'm going to call this @brand-secondary. And I'm just going to use the same sort of naming conventions that we have already used here, because I'm going to call this brand-secondary as I create other styles on the left side.
The main color, the primary color is that chocolate brown, and this will be more of a gold sort of color you go with it. And that color is CDAE51. So it you go on ahead and save your variables.less document, it'll tell you that the compilation is successful. And if you refresh any of the pages on your website, you should see all of the changes that have been made so far. And you'd be able to just flip through the document. Just with a few changes, the website's already looking better, and we're going to continue to improve it as we go.
- Setting up your working environment for Bootstrap and LESS
- Understanding the LESS file structure
- Creating and manipulating LESS variables
- Working with LESS mixins
- Creating custom styles using mixins and variables