HTML and CSS Reference
In-Depth Information
Figure 5-19.
Code folding in Aptana with SCSS files
While this is convenient, SASS also supports importing partial stylesheets from
external SASS files using the same
@import
syntax found in regular CSS. The
difference between the SASS implementation and the implementation found in
regular stylesheets is that SASS will pull the files in on compile time rather than
loading all files in a regular CSS file one by one using HTTP requests. This
provides scope for importing object- or section-specific partials at compile time.
The following code shows an example.
/** mobile.scss **/
@import "partials/tablet";
@import "partials/phone";
/** partials/_tablet.scss **/
.test-tablet {
background: url('../themes/mytheme/common/logo.png') no-repeat top left
#FFFFFF;
}
/** partials/_phone.scss **/
.test-phone {
background: url('../themes/mytheme/common/logo.png') no-repeat top left
#FFFFFF;
}
Once compiled, the CSS will look like the following.
.test-tablet {
background: url("../themes/mytheme/common/logo.png") no-repeat top left
white; }
.test-phone {
background: url("../themes/mytheme/common/logo.png") no-repeat top left
white; }
