Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
12/04/2017

Understanding Sass Fundamentals

Page of 168

About Sass

SASS enables you to add programatic features to your CSS declarations by supporting following constructs:

  • Variables
  • Nesting
  • Inheritance
  • Math Functions
  • Color Transformations
  • Mixins (parameterized functions)

Declaring and Using Variables

Using SASS you can declare variables that can be used throughout your stylesheet, thereby enabling you to make global changes by tweaking a single value.

Variables begin with a dollar sign ($) and are declared just like properties. They can have any value that's allowed for a CSS property, such as colors, numbers (with units), or text.

The following example illustrates the use of variables and their affect on the generated CSS file:

Sass Generated CSS
$silver: #c0c0c0;
.myClass {
 background-color: $silver;
}

.myClass {
 background-color: #c0c0c0;
}

Defining Nested Rules

As illustrated by the following example, nesting in SASS enables you to eliminate the repetition of selectors.

Sass Generated CSS
.designerFavorite {
 font: {
  family: comic sans ms;
  weight: bold;
  size: 1em;
 }
}

.tableHeader {
 background-color: silver;
 .emphasize {
   text-decoration: underline;
 }
}
.designerFavorite {
  font-family: comic sans ms;
  font-weight: bold;
  font-size: 1em;
}

.tableHeader {
  background-color: silver; 
}

.tableHeader .emphasize {
  text-decoration: underline;
}


Using Math and Bundled Functions

You can modify and combine variables using math and useful predefined functions, thereby allowing you to compute element sizing and coloration dynamically. The standard math operators (+,-,*,/) can be applied to numbers. Sass will automatically normalize differences between units of measure.

Sass also supports a series of bundled functions for performing dynamic calculations against colors, including the following:

Function Description
lighten($color,$amount) Returns a lighter color
darken($color,$amount) Returns a darker color
saturate($color,$amount) Returns a more saturated color
desaturate($color,$amount) Returns a less saturated color
grayscale($color) Converts a color to grayscale
invert($color) Returns the inverse of a color
opacify($color,$amount) Makes a color more opaque
transparentize($color,$amount) Makes a color more transparent

The following example illustrates using operations and functions:

Sass Generated CSS
#navbar {
 $navbar-width: 800px;
 $items: 5;
 $navbar-color: #ce4dd6;

 width: $navbar-width;
 border-bottom: 
      2px solid $navbar-color;

 li {
  float: left;
  width: $navbar-width/$items - 10px;

  background-color:
   lighten($navbar-color, 20%);
  &:hover {
    background-color:
     lighten($navbar-color, 10%);
  }
 }
}
#navbar {
  width: 800px;
  border-bottom: 2px solid #ce4dd6;
}
#navbar li {
 float: left;
 width: 150px;
 background-color: #e5a0e9;
}
#navbar li:hover {
   background-color: #d976e0;
}

Defining and Invoking Mixins

Mixins are user-defined functions that generate CSS directives.

  • Define mixins using the @mixin command.
  • Invoke mixins using the @include command.
Sass Generated CSS
@mixin dashedBorder($color, $width)
{
 border: {
  color: $color;
  width: $width;
  style: dashed;
 }
}

.validContent {
 @include dashedBorder(green, 1px); 
}
.invalidContent {
 @include dashedBorder(red, 2px); 
}
.validContent {
  color: green;
  width: 1px;
  style: dashed;
}

.invalidContent {
  color: red;
  width: 2px;
  style: dashed;
}

 

Dynamically Including Stylesheets

Stylesheets can get quite large. Sass' @import directive enables you to split stylesheets up into multiple files and dynamically assemble them at compile-time. Any variables or mixins defined in @imported files are available to the files that imported them.

Files that are designed to be imported, called "partials", should have file names that begin with an underscore. In order to support both .scss and .sass files, Sass allows files to be imported without specifying a file extension.

As illustrated by the figure below, Sencha Touch uses "partials" extensively in its implmentation of the Sencha Touch theme.

Partials used by Sencha Touch

As illustrated below, the default Sencha Touch stylesheet uses an @import command to load a series of mixins that are subsequently invoked in order to generate the default stylesheet:

@import 'sencha-touch/default/all';

@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-toolbar-forms;
@include sencha-indexbar;
@include sencha-list;
@include sencha-list-paging;
@include sencha-list-pullrefresh;
@include sencha-layout;
@include sencha-carousel;
@include sencha-form;
@include sencha-msgbox;
@include sencha-loading-spinner;
@include sencha-draw;
@include sencha-charts;

For More Information About Sass...

Page of 168
comments powered by Disqus