SCSS features
Variables
1
2
3
4
5
6
7
| $font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
|
Operator
1
2
3
4
5
6
7
8
9
10
11
12
13
| .container {
width: 100%;
}
article[role='main'] {
float: left;
width: 600px / 960px * 100%;
}
article[role='complementary'] {
float: right;
width: 300px / 960px * 100%;
}
|
String interpolation
1
2
3
4
5
| $name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
|
This is compile to:
1
2
3
| p.foo {
border-color: blue;
}
|
Nesting
1
2
3
4
5
6
7
8
9
| #main p {
color: #00ff00;
width: 90%;
.redbod {
background-color: #ff0000;
color: #000000;
}
}
|
This is compile to:
1
2
3
4
5
6
7
8
| #main p {
color: #00ff00;
width: 90%;
}
#main p .redbod {
background-color: #ff0000;
color: #000000;
}
|
The parent selector
We can use the & symbol to state “for the selector I am nested inside with these other selectors” or “with this selector than the current selector”
1
2
3
4
5
6
7
8
9
10
| a {
font-weight: bold;
text-decoration: none;
&:hover {
text-decoration: underline;
}
body.firebox & {
font-weight: normal;
}
}
|
This is compile to:
1
2
3
4
5
6
7
8
9
10
| a {
font-weight: bold;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
body.firebox a {
font-weight: normal;
}
|
Imports
1
| @import ’filename.scss’;
|
1
2
3
4
5
6
| .sidebar {
width: 300px;
@media screen and (orientation: landscape) {
width: 500px;
}
}
|
This is compile to:
1
2
3
4
5
6
7
8
| .sidebar {
width: 300px;
}
@media screen and (orientation: landscape) {
.sidebar {
width: 500px;
}
}
|
General control
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| $type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else 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('/image/#{$animal}.png');
}
}
|
Mixins
1
2
3
4
5
6
7
8
9
| @mixin box-shadow($shadows...) {
-moz-box-shadow: $shadows;
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
}
.shadows {
@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
|
This is compile to:
1
2
3
4
5
| box-shadow {
-moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
-webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}
|
Functions
1
2
3
4
5
6
7
8
9
10
| $grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar {
width: grid-width(5);
}
|
This is compile to:
1
2
3
| #sidebar {
width: 240px;
}
|
Extending
1
2
3
4
5
6
7
8
9
| .error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
|
Placeholders
1
2
3
4
5
6
7
8
9
| #context a%extreme {
color: blue;
font-weight: bold;
font-size: 2em;
}
.notice {
@extend %extreme;
}
|