The idea of using variables and logic within a CSS file sounds like a dream come true, right? We aren't quite there yet (in the browser, anyway); however, there are a few tools that will let us use variables and logic in our CSS files and compile them during our build step. LESS and SASS are two of the most popular CSS transpilers currently available. They behave almost identically, with only slight differences in syntax and features. The big difference is that LESS was written using JavaScript
and Node, whereas SASS uses Ruby; therefore, each has different requirements to get running on your machine.
Here is a sample SASS style sheet file:
$sprite-bg:url("/images/editor/sprite-msg-bg.png");
@mixin radius($radius) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.upload-button {
border-bottom: solid 2px #005A8B;
background: transparent $sprite-bg no-repeat;
@include radius(4px);
cursor: pointer;
}
#step-status {
color:#dbdbdb; font-size:14px;
span.active {
color:#1e8acb;
}
&.basic-adjust, &.message-editor {
width: 525px;
}
.icon {
height:65px;
width: 50px;
margin:auto;
}
}
@import "alerts";
@import "attachments";
@import "codemirror";
@import "drafts";
Looking at the sample code, you can see that we have a few new elements that wouldn't typically work in a regular CSS file. Some of these include:
- Defining custom variables for use throughout the style sheet
- Defining mixins, which act as pseudo functions for reusable styles (with dynamic parameters)
- Mixins and variables within our style definitions
- Nesting styles with parent/child relationships
When the previous code is transpiled using LESS (or in the case of the sample code SASS), the output is a standard .css style sheet that adheres to all the normal browser rules and syntax.
For more information on LESS and SASS, check out the following links: