-
Notifications
You must be signed in to change notification settings - Fork 1
/
control_directive.scss
85 lines (62 loc) · 1.4 KB
/
control_directive.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
/*
* Control Directives
*/
/* @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 true {background-image:url('')}
@if 5 < 3 { border: 2px dotted; }
@if null { border: 3px double; }
}
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
/* @for -------
* The @for directive repeatedly outputs a set of styles.
* For each repetition, a counter variable is used to adjust the output
*/
/*from ... through*/
@for $i from 1 through 3 { //1,2,3
.item-#{$i} { width: 2em * $i; }
}
/*from ... to*/
@for $i from 1 to 3 { //1,2
.item-to-#{$i} { width: 2em * $i; }
}
/* @each -------
* The @each rule has the form @each $var in <list>
*/
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
/* @while -------
* The @while directive takes a SassScript expression
* and repeatedly outputs the nested styles
* until the statement evaluates to false
*/
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
$i:6;
@for $i from 1 through $i{
.col-#{$i}{
width:$i/6*100%
}
}