HTML and CSS Reference
In-Depth Information
As you can see in
mobile.scss
, you define a theme variable with a string of
"bentley"
. You then define a black color on the line below that.
@import
is then
used to import the partials. Within each partial, you will notice that the
background declaration has been modified as follows.
background: url('../themes/#{$theme}/common/logo.png') no-repeat top left
$color;
There are two ways to add variables to SASS files. To add a variable as part of a
CSS string, such as a background image path, you use the following syntax.
#{$myvariable}
This is known as interpolation, and you can also use this to change a CSS
property instead of its value. For example,
border-#{$position}-radius:
where
position
is the position defined by the variable.
The second method is simply to repeat the variable name using
$myvariable
.
This is what you should use when defining a CSS property value such as a
color, width, or height.
Mixins
One of the more popular features of SASS is mixins. Mixins allow you to define a
piece of code in a single place and use it anywhere in your SASS stylesheet. For
example, you might have a big CSS declaration for a cross browser gradient, as
shown in the following code.
.myelement {
background: rgb(206,220,231);
background: -moz-linear-gradient(-45deg, rgba(206,220,231,1) 0%,
rgba(89,106,114,1) 100%);
background: -webkit-gradient(linear, left top, right bottom,
color-stop(0%,rgba(206,220,231,1)),
color-stop(100%,rgba(89,106,114,1)));
background: -o-linear-gradient(-45deg, rgba(206,220,231,1) 0%,
rgba(89,106,114,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(206,220,231,1) 0%,
rgba(89,106,114,1) 100%);
background: linear-gradient(-45deg, rgba(206,220,231,1) 0%,
rgba(89,106,114,1) 100%);
}
That's a lot of code. What if you want to use it somewhere else? The most
efficient way would be to simply add more classes to the definition that you
want to use it with.
