HTML and CSS Reference
In-Depth Information
As you can see from this example, the file name for each partial should be
prefixed with an _ (underscore) and the reference in the import should contain
the relative folder and partial name without the _ prefix or SCSS file name. You
might notice that SASS also converts
#FFFFF
to
white
in the compiled CSS.
Variables and Interpolation
You are bound to eventually produce stylesheets that are color/theme based
(i.e., the same stylesheet may reference the same images, but from a separate
image folder, or have a different color theme).
Traditionally, you would use something like PHP, Python, or .NET to generate
these stylesheets on the fly. SASS removes this need with the use of variables.
A variable in SASS acts in much the same way as in any other language. They
can be of any type (string, CSS property value, integer, measurement such as
pixel, em, %) and be added to the SCSS styles to make global changes to your
stylesheet.
As an example, taking the code from the example in the partials section, we can
modify this so that you can change the theme folder and colors from the master
(mobile) stylesheet.
/** mobile.scss **/
$theme: "bentley";
$color: #000000;
@import "partials/tablet";
@import "partials/phone";
/** partials/_tablet.scss **/
.test-tablet {
background: url('../themes/#{$theme}/common/logo.png') no-repeat top left
$color;
}
/** partials/_phone.scss **/
.test-phone {
background: url('../themes/#{$theme}/common/logo.png') no-repeat top left
$color;
}
