...
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 @ directive
Sass supports all of CSS3's @ rules, and adds a few more features such as:
- Control directives for the CSS compilation.
- Use of mixins.
@import
You can create files that contain the Sass instructions that you can include in other files.
These "imported" files must have an underscore ("_") at the beginning of their names so as to not be directly compiled into CSS.
For instance:
Code Block | ||
---|---|---|
| ||
html, body, ul, ol {
margin: 0;
padding: 0;
} |
Importing _partial.scss
into global.scss
:
Code Block |
---|
@import 'partial';
body {
font-size: 100% Helvetica, sans-serif;
background-color: #efefef;
} |
@import automatically searches files with a .scss or .sass extension.
You can import several files with a single call: @import "rounded-corners", "text-shadow".
You can import a file from a nested block:
Code Block |
---|
/* global.scss */
#main {
// imports _example.scss
@import "example";
} |
@media
Sass allows the nesting of definition blocks from a @media directive.
@media directives can be nested, and they can use SassScript.
For instance, in SCSS:
Code Block |
---|
.sidebar {
width: 300px;
@media screen and (orientation: landscape) {
width: 500px;
}
}
@media screen {
.sidebar {
@media (orientation: landscape) {
width: 500px;
}
}
}
$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;
@media #{$media} and ($feature: $value) {
.my_sidebar {
width: 500px;
}
} |
CSS compilation result:
Code Block |
---|
.sidebar {width: 300px; }
@media screen and (orientation: landscape) {
.sidebar {width: 500px; }
}
@media screen and (orientation: landscape) {
.sidebar {width: 500px; }
}
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
.my_sidebar {width: 500px; }
} |
@extend
Inheritance makes it possible to import styles from one CSS selector to another.
SCSS examples:
Code Block |
---|
.message {
border: 1px solid #ddd;
padding: 20px;
color: #222;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
} |
CSS compilation result:
Code Block |
---|
.message, .success, .error {
border: 1px solid #ddd;
padding: 20px;
color: #222;
}
.success {
border-color: green;
}
.error {
border-color: red;
} |
You can also chain inheritance:
SCSS example:
Code Block |
---|
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
.criticalError {
@extend .seriousError;
position: fixed;
top: 10%;
bottom: 10%;
left: 10%;
right: 10%;
} |
CSS compilation result:
Code Block |
---|
.error, .seriousError, .criticalError {
border: 1px #f00;
background-color: #fdd;
}
.seriousError, .criticalError {
border-width: 3px;
}
.criticalError {
position: fixed;
top: 10%;
bottom: 10%;
left: 10%;
right: 10%;
} |
To create a class that would only be available through inheritance, you can use % instead of @.
%-using classes are not present in the generated CSS file.
SCSS example:
Code Block |
---|
#main a%bigblue {
color: blue;
font-weight: bold;
font-size: 2em;
}
.notice {
@extend %bigblue;
} |
CSS compilation result:
Code Block |
---|
#main a.notice {
color: blue;
font-weight: bold;
font-size: 2em;
} |