69
69
``` bash
70
70
npm install -g node-sass
71
71
```
72
-
72
+
73
73
- Compile ` scss` files on changes:
74
-
74
+
75
75
` ` ` bash
76
- node-sass --watch source.sccs dest.css
76
+ node-sass --watch source.sccs dest.css
77
77
` ` `
78
78
79
79
- You get the translated CSS
80
80
81
81
< ! -- attr: { class:' slide-section demo' , showInPresentation:true } -->
82
- < ! -- # Compiling SASS with Node.js
82
+ < ! -- # Compiling SASS with Node.js
83
83
# # Demo -->
84
84
85
85
@@ -118,7 +118,7 @@ body {
118
118
font: normal 16px arial;
119
119
color: # fff;
120
120
background-color: # 011b63;
121
-
121
+
122
122
h1 {
123
123
font-size: 2.3em;
124
124
font-weight: bold;
@@ -177,7 +177,7 @@ body h1{
177
177
` ` ` sass
178
178
a {
179
179
color: black;
180
-
180
+
181
181
& :hover {
182
182
color: lightblue;
183
183
}
189
189
a {
190
190
color: black;
191
191
}
192
-
192
+
193
193
a:hover {
194
194
color: lightblue;
195
195
}
@@ -273,8 +273,8 @@ border-top : 15px ridge blue
273
273
- How to ** define mixins**?
274
274
- Use the following syntax:
275
275
` ` ` sass
276
- @mixin < mixin-name> {
277
- /* SASS styles go here * /
276
+ @mixin < mixin-name> {
277
+ /* SASS styles go here * /
278
278
}
279
279
` ` `
280
280
- Then the styles are normal SASS
@@ -284,7 +284,7 @@ border-top : 15px ridge blue
284
284
` ` ` sass
285
285
@mixin clearfix{
286
286
zoom:1;
287
- & :after{ display:block; content:" " ; height:0; clear:both; }
287
+ & :after{ display:block; content:" " ; height:0; clear:both; }
288
288
}
289
289
` ` `
290
290
@@ -351,13 +351,13 @@ div{
351
351
352
352
` ` ` sass
353
353
.clearfix, body div {
354
- zoom: 1;
354
+ zoom: 1;
355
355
}
356
356
.clearfix:after, body div:after {
357
357
display: block;
358
358
height: 0;
359
359
content: " " ;
360
- clear: both;
360
+ clear: both;
361
361
}
362
362
` ` `
363
363
387
387
# # [Demo](https://github.com/TelerikAcademy/CSS/blob/master/Topics/04.%20SASS/demos/09.%20operators-and-conditional-statements.html) -->
388
388
389
389
< ! -- attr: { class:' slide-section' , showInPresentation:true } -->
390
- < ! -- # Conditional statements
390
+ < ! -- # Conditional statements
391
391
# # Generate style rules depending on conditions -->
392
392
393
393
< ! -- attr: { id:' conditionals' , showInPresentation:true, style:' font-size: 0.9em' } -->
396
396
397
397
` ` ` sass
398
398
@mixin opacity($value ) {
399
-
399
+
400
400
opacity: $value ;
401
-
401
+
402
402
@if(0.75 < $value and $value < = 1) {
403
403
color: blue;
404
404
} @else if(0.25 < $value and $value < = 0.75) {
411
411
412
412
413
413
< ! -- attr: { class:' slide-section demo' , showInPresentation:true, hasScriptWrapper:true } -->
414
- < ! -- # Conditional statements
414
+ < ! -- # Conditional statements
415
415
# # [Demo](https://github.com/TelerikAcademy/CSS/blob/master/Topics/04.%20SASS/demos/09.%20operators-and-conditional-statements.html) -->
416
416
417
417
< ! -- attr: { class:' slide-section' , showInPresentation:true, hasScriptWrapper:true } -->
@@ -426,17 +426,17 @@ div{
426
426
- ` @each` loop
427
427
- Similar to loops in C#, JS, C++ and so on
428
428
- Can be used to repeat actions and/or generate css rules
429
-
429
+
430
430
< ! -- attr: { showInPresentation:true, hasScriptWrapper:true, style:' font-size: 0.8em' } -->
431
431
# `@for` loop
432
432
433
- - Syntax:
433
+ - Syntax:
434
434
` ` `
435
435
@for < index-name> < start> through < end> { < loop-body> }
436
436
` ` `
437
437
- Repeats ` < loop-body> ` for each value from ` start` to ` end`
438
438
- The index is accessible through the variable with ` < index-name> `
439
-
439
+
440
440
` ` ` sass
441
441
@for $index from 1 through 3 {
442
442
.margin-left-#{$index } {
457
457
< ! -- attr: { showInPresentation:true, hasScriptWrapper:true, style:' font-size: 0.75em' } -->
458
458
# `@while` loop
459
459
460
- - Syntax:
460
+ - Syntax:
461
461
` ` `
462
462
@while < condition> { < loop-body> }
463
463
` ` `
@@ -570,10 +570,10 @@ $selectors: div p section article;
570
570
- "Web Design with HTML 5, CSS 3 and JavaScript" course @ Telerik Academy
571
571
- [css course](http://academy.telerik.com/student-courses/web-design-and-ui/css-styling/about)
572
572
- Telerik Software Academy
573
- - [academy.telerik. com](academy.telerik .com)
573
+ - [telerikacademy. com](https://telerikacademy .com)
574
574
- Telerik Academy @ Facebook
575
- - [facebook.com/TelerikAcademy](facebook.com/TelerikAcademy)
575
+ - [facebook.com/TelerikAcademy](http:// facebook.com/TelerikAcademy)
576
576
- Telerik Software Academy Forums
577
- - forums.academy.telerik.com
578
-
577
+ - [ forums.academy.telerik.com](http://forums.academy.telerik.com)
578
+
579
579
<!-- <img class="slide-image" showInPresentation="true" src="imgs/pic35.png" style="top:34.35%; left:68.14%; width:36.30%; z-index:-1" /> -->
0 commit comments