Now that we have our basic framework in place, it's time to go fruit picking—no, I'm not referring to fruit picking in the literal sense, but finding CSS statements that can be easily converted with little effort.
Each project will vary in size and scope, but there will be some easy conversions that we can make, which will apply to any project:
An easy change that can be made is to incorporate variables for colors—once converted, we can use operators to calculate new values, such as lightening a specific color by 25 percent. As a start, we can create some variables, such as the following:
@color-light-orange: #ffa500; @color-gray-cyan: #6a7172; @color-gray-dark: #313131; @color-grayish-orange: #d7cec3;
We can then use variables in our styles, instead of the hex codes; they will appear as follows:
body {background: @color-gray-cyan; color: @color-gray-dark; } a { color: @color-light-orange; } h1, h2, h3, h4, h5, h6 { color: @color-gray-dark; }