-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsass.html
323 lines (300 loc) · 10.1 KB
/
sass.html
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
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
<!doctype html>
<html lang="en">
<head>
<title>SASS</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link href="sass.css" rel="stylesheet">
</head>
<body>
<header>
<nav></nav>
</header>
<main class="container">
<h1>SASS</h1>
<p>Syntactically <b>Awesome</b> Style Sheets</p>
<pre>
SASS <code>Nesting</code> Syntax
pre{
code {
color:red;
}
}
A style can be nested in another style to select a nested element
The code tag in the pre tag is styled
</pre>
<hr>
<pre>
SASS <i>Variable</i> Syntax
$myColor: purple;
pre{
i {
color:$myColor;
}
}
SASS variables starts with $
Use colon to store a value
Use the value with the variable name to access the value
</pre>
<hr>
<pre>
Background Image variable
----------------------------
$sunshine:url("Sunshine.png");
.bg-image {
background-image: $sunshine;
}
</pre>
<div class="bg-image width height size10"></div>
<hr>
<pre>
Horizontal Repeat variable
$horizontalRepeat: space no-repeat;
.horizontalRepeat {
background-repeat: $horizontalRepeat;
}
</pre>
<div class="horizontalRepeat bg-image width height size15"></div>
<hr>
<pre>
Vertical Repeat Variable
$verticalRepeat: no-repeat repeat;
.verticalRepeat {
background-repeat: $verticalRepeat;
}
</pre>
<div class="verticalRepeat bg-image width height size10"></div>
<hr>
<pre>
BackGround Size Variable
background-size: 25% 15%;
$stretch: 25% 100%
.stretch {
background-size: $stretch;
}
</pre>
<div class="stretch bg-image width height"></div>
<hr>
<div class="gradient width height">
<pre>
Color Stop Gradient Variables
$darkGradient:linear-gradient(90deg, gray, black 10% 90%, gray);
$lightGradient: linear-gradient(90deg, gray, white 10% 90%, gray);
.gradient {
background-image: $lightGradient;
}
</pre>
</div>
<hr>
<pre>
RGBA Color Variables
$darkGreen: rgba(0, 95, 0, 1);
$lightBlue: rgba(71, 71, 255, 1);
$darkRed: rgba(140, 0, 0, 1);
$lightPurple: rgba(161, 61, 161, 1);
Declare the color variables all in one area, towards the top.
Use them throughout the SASS file.
Define variables before using them.
Changing the value of the variable affects the whole file.
Single source of truth - changing 1 thing changes them all.
-There's only one place where a specific piece of data is stored.
-An update to that data also updates all related data.
</pre>
<br>
<pre>
Single Line Comments
//CUSTOM COLORS
/**/
SASS supports single line commments like JavaScript.
A form of commenting that web developers are used to.
SASS removes all comments from the generated CSS file.
</pre>
<pre>
:hover
--------
fix block element hover by adjusting the width
<code>
width: fit-content;
</code>
The hover style is a block element, which is activated by the whole line.
The hover style activates over empty content.
</pre>
<hr>
<pre>
Adjust width to automatically fit content
<code>width:fit-content;</code>
Useful on block elements.
Block elements still use a whole line
The hit box of the block element is reduced to its content
In comparison with <code>display:inline</code>, which can line up the elements.
</pre>
<hr>
<pre>
Parent Syntax
<code>
h1 {
color: $darkGreen;
width: fit-content;
&:hover {
color: $darkRed;
}
}
</code>
Groups styles together under the parent selector.
Use <code>&</code> to substitute for the parent (containing selector).
Any style belonging to the parent will be passed to the child styles.
</pre>
<hr>
<pre>
Font Variables
<code>
$primaryFont: sans-serif;
$secondaryFont: fantasy;
</code>
Use variables to store fonts.
Declare the font variables all in one area, towards the top of the file before the variables are used.
Changing the value of the variable affects the whole file.
Single source of truth - changing 1 thing changes them all.
Font Families:
1. serif
2. sans-serif
3. monospace
4. cursive
5. fantasy
</pre>
<hr>
<pre>
Add fonts
<code>
@font-face {
font-family: "good-vibes";
src: url("goodvibes.ttf");
}
main {
font-family: "good-vibes";
}
</code>
1. Download font: websearch "free font downloads" example: https://dafont.com.
2. If the font is in a .zip, move the font file to a root folder.
3. Use <code>@font-face</code> to add the font.
4. Use <code>font-family</code> to name it.
5. Use <code>src: url ()</code> to link the font file.
6. Use the font name.
</pre>
<hr>
<h2>SASS MIXINS</h2>
<pre>
SASS Single-Line Mixins
----------------------------
<code>
@mixin redText {
color: red;
}
p {
@include redText;
}
</code>
Mixins are like SASS variables
Single-line mixins store a property and a value.
Type <code>@mixin</code> to declare/define a mixin variable.
Type <code>@include</code> to use the mixin.
Mixins can substitute for utility classes so elements can be described by their name.
</pre>
<br>
<pre>
Box Shadow Mixin
----------------------------
<code>
@mixin boxShadow {
box-shadow: 5px 5px greenyellow;
}
#mixin-example {
@include boxShadow;
}
</code>
<p>This is a Paragraph!</p>
<span class="bg-primary" id="mixin-example">Hello World!</span>
</pre>
<br>
<pre>
Text Shadow
----------------------------
<code>
#mixin-example {
@include boxShadow;
text-shadow: 0px 0px yellow;
}
</code>
<p>This is a Paragraph!</p>
<span class="bg-primary p-3" id="mixin-example">Hello World!</span>
</pre>
<br>
<pre>
Using multiple Mixins
-----------------------
<code>
#mixin-example {
@include boxShadow;
@include textShadow;
}
</code>
SASS allows you to use multiple mixins
</pre>
<br>
<pre>
SASS Multi-Line Mixins
----------------------------
<code>
@mixin animation1 {
transform:scale(1) rotate(0deg);
transition: transform 1s;
}
@mixin animation2 {
transform: scale(2) rotate(15deg);
transition: transform 2s;
}
#mixin-button {
@include animation1;
}
#mixin-button:hover {
@include animation2;
}
</code>
A Multi-Line mixin stores multiple properties and values.
<button class="btn btn-success" id="mixin-button">Click Me!</button>
Condensed to parent syntax
<code>
#mixin-button {
@include animation1;
&:hover {
@include animation2;
}
}
</code>
</pre>
<br>
<pre>
SASS All-in-One Mixins
-----------------------
<code>
@mixin animation {
transform: scale(1) rotate(0deg);
transition: transform 1s;
&:hover {
transform: scale(0.5) rotate(-10deg);
transition: transform 2s;
}
}
#animated-button {
@include animation;
}
</code>
The all-in-one mixin includes animation1 and animation2.
Parent syntax is used.
This mixin can be used in any element to animate it.
<button class="btn btn-primary" id="animated-button">Hello!</button>
<h2 class="bg-warning" id="subtitle">Here's an h2</h2>
</pre>
</main>
<footer>Hello footer!</footer>
</body>
</html>