...
length($list)- Returns the length of a list.nth($list, $n)- Returns a specific item in a list.join($list1, $list2, [$separator])- Joins together two lists into one.append($list1, $val, [$separator])- Appends a single value onto the end of a list.zip($lists...)- Combines several lists into a single multidimensional list.index($list, $value)- Returns the position of a value within a list.
The @
...
directives
Sass supports all of CSS3's @ rules, and adds a few more features such as:
...
| Code Block |
|---|
/* global.scss */
#main {
// imports _example.scss
@import "example";
} |
@mixin
Mixins make it possible to group CSS properties that you can reuse as many times as necessary. They can even include other mixins.
SCSS example:
| Code Block |
|---|
/* File _mixin.scss */
@mixin class-inclusion {
th {
text-align: center;
font-weight: bold;
}
th, td {
padding: 2px;
}
}
@mixin highlighted-background {background-color: #fc0;}
@mixin header-text {font-size: 20px;}
// mixin with other mixins
@mixin compound {
@include highlighted-background;
@include header-text;
} |
Mixins are then used with the @include directive:
| Code Block |
|---|
/* File global.scss */
@import "mixin.scss";
.sassEx {@include class-inclusion;}
.mycompound {@include compound;}
|
Mixins can have paremeters:
| Code Block |
|---|
/* File _mixin.scss */
// mixins with parameters and default value
@mixin sexy-border($color, $width: 1in) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
// mixin with unknown number of arguments
@mixin box-shadow($shadows...) {
-moz-box-shadow: $shadows;
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
}
// mixin with unknown number of arguments and other mixin
@mixin bold-box-shadow($shadows...) {
font-weight: bold;
@include box-shadow($shadows...);
} |
Used in:
| Code Block |
|---|
/* File global.scss */
@import "mixin.scss";
// arguments with default values can be omitted
.box { include sexy-border(blue); }
// with explicit keyword name, arguments can be passed in any order
.bigbox { include sexy-border($width: 3in, $color:blue); }
// use mixin with unknown number of arguments
.shadows { @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999); }
// use mixin with variable and unknown number of arguments
$param: 0px 4px 5px #666, 2px 6px 10px #999;
.shadows { @include box-shadow($param...); |
You can directly pass a style block to a mixin in order to place in the defined style, using @content.
SCSS example:
| Code Block |
|---|
@mixin apply-to-ie6-only {
* html {
@content;
}
}
@include apply-to-ie6-only {
#logo {
background-image: url(/logo.gif);
}
} |
CSS result:
| Code Block |
|---|
* html #logo {
background-image: url(/logo.gif);
} |
Note that variables are evaluated within the block where they are defined:
SCSS example:
| Code Block |
|---|
$color: white;
@mixin colors($color: blue) {
background-color: $color;
@content;
border-color: $color;
}
.colors {
@include colors {color: $color;}
} |
CSS result:
| Code Block |
|---|
.colors {
background-color: blue;
color: white;
border-color: blue;
} |
@media
Sass allows the nesting of definition blocks from a @media directive.
...
| Code Block |
|---|
#main a.notice {
color: blue;
font-weight: bold;
font-size: 2em;
} |
By default, you cannot use @extend with a non-existing selector: it gives a compilation error.
To use a selector that may not yet exist in certain conditions, you should use the !optional flag:
| Code Block |
|---|
a.important {
@extend .notice !optional;
} |
Likewise, you cannot use @extend in all situations, for instance when using CSS directives such as @media.
You must declare your selectors ans use them within a single directive.
Example in SCSS:
| Code Block |
|---|
@media print {
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
} |
Non-valid example in SCSS:
| Code Block |
|---|
.error {
border: 1px #f00;
background-color: #fdd;
}
@media print {
.seriousError {
// INVALID EXTEND: .error is used outside of the "@media print" directive
@extend .error;
border-width: 3px;
}
} |
@warn and @debug
Two directives can help you debug your Sass files:
- @debug displays the result of a SassScript expression.
- @warn displays information messages during the CSS file compilation.
SCSS Example:
| Code Block |
|---|
@debug 10em + 12em; |
Displays:
| Code Block |
|---|
Line 1 DEBUG: 22em |
Other SCSS example:
| Code Block |
|---|
@mixin adjust-location($x, $y) {
@if unitless($x) {
@warn "Assuming #{$x} to be in pixels";
$x: 1px * $x;
}
@if unitless($y) {
@warn "Assuming #{$y} to be in pixels";
$y: 1px * $y;
}
position: relative; left: $x; top: $y;
} |
Control instructions: @if,@for, @each,@while
These instructions are mainly used in mixins of Sass libraries such as Compass.
SCSS example:
| Code Block |
|---|
$type: monster;
p {
@if $type == monster {
color: green;
} @else {
color: black;
}
}
@for $i from 1 through 3 {
.item-#{$i} {width: 2em * $i;}
}
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
$i: 6;
@while $i > 0 {
.item-#{$i} {width: 2em * $i;}
$i: $i - 2;
} |
CSS compilation result:
| Code Block |
|---|
p {color: green;}
.item-1 {width: 2em;}
.item-2 {width: 4em;}
.item-3 {width: 6em;}
.puma-icon {background-image: url('/images/puma.png');}
.sea-slug-icon {background-image: url('/images/sea-slug.png');}
.egret-icon {background-image: url('/images/egret.png');}
.salamander-icon {background-image: url('/images/salamander.png');}
.item-6 {width: 12em;}
.item-4 {width: 8em;}
.item-2 {width: 4em;}
|
@function
You can create your own functions and use it within your files. Just make sure that its name does not conflict with the evolution of Sass and Compass.
SCSS example: