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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
|
---
language: sass
contributors:
- ["Sean Corrales", "https://github.com/droidenator"]
filename: learnsass.scss
---
Sass is a CSS pre-processor. It adds several features that plain
CSS lacks such as variables, mixins, basic math, and inheritance.
Initially, Sass was written using spacing and indention instead
of brackets and semi-colons; these files use the extension '.sass'.
Sass was later revised to use brackets and semi-colons and become
a superset of CSS3. This new version uses the extension ".scss".
Using ".scss" means that any valid CSS3 file can be converted to
Sass by simply changing the file extension to '.scss'.
If you're already familiar with CSS3, you'll be able to pick up Sass
relatively quickly. It does not provide any new styling options but rather
the tools to write your CSS more efficiently and make maintenance much
easier.
Sass files must be compiled into CSS. You can use any number of commandline
tools to compile Sass into CSS. Many IDEs also offer Sass compilation, as well.
```sass
/* Like CSS, Sass uses slash-asterisk to denote comments */
/* ####################
## VARIABLES
#################### */
/* Sass allows you to define variables that can be used throughout
your stylesheets. Variables are defined by placing a '$' in front
of a string. Many users like to keep their variables in a single file */
$primary-color: #0000ff;
$headline-size: 24px;
/* Variables can be used in any CSS declaration. This allows you to change
a single value in one place. */
a {
color: $primary-color;
}
h1 {
color: $primary-color;
font-size: $headline-size;
}
/* After compiling the Sass files into CSS, you'll have the following code
in your generated CSS file */
a {
color: #0000ff;
}
h1 {
color: #0000ff;
font-size: 24px;
}
/* ####################
## NESTING
#################### */
/* Nesting allows you to easily group together statements and nest them
in a way that indicates their hierarchy */
article {
font-size: 14px;
a {
text-decoration: underline;
}
ul {
list-style-type: disc;
li {
text-indent: 3em;
}
}
pre, img {
display: inline-block;
float: left;
}
}
/* The above will compile into the following CSS */
article {
font-size: 14px;
}
article a {
text-decoration: underline;
}
article ul {
list-style-type: disc;
}
article ul li {
text-indent: 3em;
}
article pre,
article img {
display: inline-block;
float: left;
}
/* It is recommended to not nest too deeply as this can cause issues with
specificity and make your CSS harder to work with and maintain. Best practices
recommend going no more than 3 levels deep when nesting. */
/* ####################
## MIXINS
#################### */
/* Mixins allow you to define reusable chunks of CSS. They can take one or more
arguments to allow you to make reusable pieces of styling. */
@mixin form-button($color, $size, $border-radius) {
color: $color;
font-size: $size;
border-radius: $border-radius;
}
/* Mixins are invoked within a CSS declaration. */
.user-form .submit {
@include form-button(#0000ff, 16px, 4px);
margin: 10px;
}
/* The above mixin will compile into the following css */
.user-form .submit {
color: #0000ff;
font-size: 16px;
border-radius: 4px;
margin: 10px;
}
/* ####################
## EXTEND/INHERITANCE
#################### */
/* ####################
## MATH OPERATIONS
#################### */
```
## Usage
Save any CSS you want in a file with extension `.css`.
```xml
<!-- you need to include the css file in your page's <head>: -->
<link rel='stylesheet' type='text/css' href='path/to/style.css' />
<!-- you can also include some CSS inline in your markup. However it is highly
recommended to avoid this. -->
<style>
a { color: purple; }
</style>
<!-- or directly set CSS properties on the element.
This has to be avoided as much as you can. -->
<div style="border: 1px solid red;">
</div>
```
## Precedence
As you noticed an element may be targetted by more than one selector.
and may have a property set on it in more than one.
In these cases, one of the rules takes precedence over others.
Given the following CSS:
```css
/*A*/
p.class1[attr='value']
/*B*/
p.class1 {}
/*C*/
p.class2 {}
/*D*/
p {}
/*E*/
p { property: value !important; }
```
and the following markup:
```xml
<p style='/*F*/ property:value;' class='class1 class2' attr='value'>
</p>
```
The precedence of style is as followed:
Remember, the precedence is for each **property**, not for the entire block.
* `E` has the highest precedence because of the keyword `!important`.
It is recommended to avoid this unless it is strictly necessary to use.
* `F` is next, because it is inline style.
* `A` is next, because it is more "specific" than anything else.
more specific = more specifiers. here 3 specifiers: 1 tagname `p` +
class name `class1` + 1 attribute `attr='value'`
* `C` is next. although it has the same specificness as `B`
but it appears last.
* Then is `B`
* and lastly is `D`.
## Compatibility
Most of the features in CSS2 (and gradually in CSS3) are compatible across
all browsers and devices. But it's always vital to have in mind the compatibility
of what you use in CSS with your target browsers.
[QuirksMode CSS](http://www.quirksmode.org/css/) is one of the best sources for this.
To run a quick compatibility check, [CanIUse](http://caniuse.com) is a great resource.
## Further Reading
* [Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/)
* [QuirksMode CSS](http://www.quirksmode.org/css/)
* [Z-Index - The stacking context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context)
|
