Why Sass?
Sass is an amazing and feature-rich way you create your site's stylesheet. You can learn more about it on the Sass website. Some of the Sass features that Omega utilizes out of the box include:
Mixins
These are styling functions and include omegaShadow, which when included in a style will automatically add a standardized box shadow. And omegaCorners which allows you to easily add a border radius using a variable like this:
.form-type-date {
input {
padding: 0.35em 0.25em;
font-size: 1.2em;
font-weight: normal;
border: 2px solid $primaryColor3;
@include omegaCorners(3px);
@include omegaShadow();
&:focus {
border: 2px solid $primaryColor1;
}
}
}
Check out the included ones in omega/omega/style/scss/omega_mixins.scss
Variables
Want to change the colors in your theme easily? Or not have to put a particular padding that you use on your site in over and over? Just use variables. Here is an example of some variables:
$primaryColor1: #047AAB !default; // good blue
$primaryColor2: #1E415F !default; // darker blue
$primaryColor3: #FAFAFA !default; // almost white
$primaryColor4: #1A1A1A !default; // almost black
$primaryColor5: #5A5A5A !default; // nice gray
And how they can be used:
.tabs a {
background-color: $primaryColor3;
text-decoration: none;
font-size: 0.9em;
color: $primaryColor2;
&:hover {
background-color: darken($primaryColor3, 10%);
}
}
.tabs a.is-active {
background-color: $primaryColor1;
border: 1px solid $primaryColor3;
color: $primaryColor3;
}
Check out the included ones in omega/omega/style/scss/vars.scss
Turning your Sass into CSS
Turning your Sass into CSS is easy in Omega 5.x. Just visit your theme's setting page and click "Save & Update Styles." That's it. Of course if you want to process it on the command line with other popular tools like Compass you can uncheck "Compile SCSS Directly" in Default Options.