Defining a Mixin: @mixin Mixins are defined with the @mixin directive. It’s followed by the name of the mixin and optionally the arguments, and a block containing the contents of the mixin. For example, the large-text mixin is defined as follows: @mixin large-text { font: { family: Arial; size: 20px; weight: bold; } color: #ff0000; } Mixins may also contain selectors, possibly mixed with properties. The selectors can even contain parent references. For example: @mixin clearfi

@media @media directives in Sass behave just like they do in plain CSS, with one extra capability: they can be nested in CSS rules. If a @media directive appears within a CSS rule, it will be bubbled up to the top level of the stylesheet, putting all the selectors on the way inside the rule. This makes it easy to add media-specific styles without having to repeat selectors or break the flow of the stylesheet. For example: .sidebar { width: 300px; @media screen and (orientation: landscape)

Including a Mixin: @include Mixins are included in the document with the @include directive. This takes the name of a mixin and optionally arguments to pass to it, and includes the styles defined by that mixin into the current rule. For example: .page-title { @include large-text; padding: 4px; margin-top: 10px; } is compiled to: .page-title { font-family: Arial; font-size: 20px; font-weight: bold; color: #ff0000; padding: 4px; margin-top: 10px; } Mixins may also be included o

@import Sass extends the CSS @import rule to allow it to import SCSS and Sass files. All imported SCSS and Sass files will be merged together into a single CSS output file. In addition, any variables or mixins defined in imported files can be used in the main file. Sass looks for other Sass files in the current directory, and the Sass file directory under Rack, Rails, or Merb. Additional search directories may be specified using the :load_paths option, or the --load-path option on the command

@if The @if directive takes a SassScript expression and uses the styles nested beneath it if the expression returns anything other than false or null: p { @if 1 + 1 == 2 { border: 1px solid; } @if 5 < 3 { border: 2px dotted; } @if null { border: 3px double; } } is compiled to: p { border: 1px solid; } The @if statement can be followed by several @else if statements and one @else statement. If the @if statement fails, the @else if statements are tried in order until one s

Function Directives It is possible to define your own functions in sass and use them in any value or script context. For example: $grid-width: 40px; $gutter-width: 10px; @function grid-width($n) { @return $n * $grid-width + ($n - 1) * $gutter-width; } #sidebar { width: grid-width(5); } Becomes: #sidebar { width: 240px; } As you can see functions can access any globally defined variables as well as accept arguments just like a mixin. A function may have several statements contained within

@for The @for directive repeatedly outputs a set of styles. For each repetition, a counter variable is used to adjust the output. The directive has two forms: @for $var from <start> through <end> and @for $var from <start> to <end>. Note the difference in the keywords through and to. $var can be any variable name, like $i; <start> and <end> are SassScript expressions that should return integers. When <start> is greater than <end> the counter will

@extend There are often cases when designing a page when one class should have all the styles of another class, as well as its own specific styles. The most common way of handling this is to use both the more general class and the more specific class in the HTML. For example, suppose we have a design for a normal error and also for a serious error. We might write our markup like so: <div class="error seriousError"> Oh no! You've been hacked! </div> And our styles like so: .error

@error The @error directive throws the value of a SassScript expression as a fatal error, including a nice stack trace. It’s useful for validating arguments to mixins and functions. For example: @mixin adjust-location($x, $y) { @if unitless($x) { @error "$x may not be unitless, was #{$x}."; } @if unitless($y) { @error "$y may not be unitless, was #{$y}."; } position: relative; left: $x; top: $y; } There is currently no way to catch errors.

@each The @each directive usually has the form @each $var in <list or map>. $var can be any variable name, like $length or $name, and <list or map> is a SassScript expression that returns a list or a map. The @each rule sets $var to each item in the list or map, then outputs the styles it contains using that value of $var. For example: @each $animal in puma, sea-slug, egret, salamander { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); } } is compiled to: