├── LICENSE
├── README.md
├── day-01
    ├── base
    │   ├── styles-sass.sass
    │   └── styles-scss.scss
    ├── exercise-answer
    │   └── answer.sass
    ├── exercise-code
    │   └── exercise.scss
    └── tutorial-code
    │   ├── styles-sass.css
    │   ├── styles-sass.sass
    │   ├── styles-scss.css
    │   └── styles-scss.scss
├── day-02
    ├── base
    │   ├── day-2.html
    │   └── styles.scss
    ├── exercise-answer
    │   └── answer.scss
    ├── exercise-code
    │   └── exercise.css
    └── tutorial-code
    │   ├── day-2.html
    │   ├── styles.css
    │   └── styles.scss
├── day-03
    ├── base
    │   ├── day-3.html
    │   └── styles.scss
    ├── exercise-answer
    │   └── answer.scss
    ├── exercise-code
    │   └── exercise.scss
    └── tutorial-code
    │   ├── day-3.html
    │   ├── styles.css
    │   └── styles.scss
├── day-04
    ├── base
    │   ├── day-4.html
    │   └── styles.scss
    ├── exercise-answer
    │   └── answer.scss
    ├── exercise-code
    │   └── exercise.scss
    └── tutorial-code
    │   ├── day-4.html
    │   ├── styles.css
    │   └── styles.scss
├── day-05
    ├── base
    │   ├── day-5.html
    │   └── styles.scss
    ├── exercise-answer
    │   └── answer.scss
    ├── exercise-code
    │   └── exercise.css
    └── tutorial-code
    │   ├── day-5.html
    │   ├── styles.css
    │   └── styles.scss
├── day-06
    ├── base
    │   └── styles.scss
    ├── exercise-answer
    │   └── answer.scss
    ├── exercise-code
    │   └── exercise.scss
    └── tutorial-code
    │   ├── styles.css
    │   └── styles.scss
├── day-07
    ├── base
    │   └── styles.scss
    ├── exercise-answer
    │   └── answer.scss
    ├── exercise-code
    │   └── exercise.css
    └── tutorial-code
    │   ├── styles.css
    │   └── styles.scss
├── day-08
    ├── base
    │   ├── day-8.html
    │   ├── dummy.css
    │   └── styles.scss
    ├── exercise-answer
    │   └── answer.scss
    ├── exercise-code
    │   └── exercise.scss
    └── tutorial-code
    │   ├── day-8.html
    │   ├── dummy.css
    │   ├── general
    │       ├── general.css
    │       └── general.scss
    │   ├── layout.css
    │   ├── layout.scss
    │   ├── styles.css
    │   └── styles.scss
├── day-09
    ├── base
    │   ├── day-9.html
    │   ├── general
    │   │   └── general.scss
    │   ├── layout.scss
    │   └── styles.scss
    ├── exercise-answer
    │   └── answer.scss
    ├── exercise-code
    │   └── exercise.scss
    └── tutorial-code
    │   ├── _layout.scss
    │   ├── day-9.html
    │   ├── general
    │       └── _general.scss
    │   ├── styles.css
    │   └── styles.scss
├── day-10
    ├── base
    │   ├── day-10.html
    │   └── styles.scss
    ├── exercise-answer
    │   └── answer.scss
    ├── exercise-code
    │   └── exercise.scss
    └── tutorial-code
    │   ├── day-10.html
    │   ├── styles.css
    │   └── styles.scss
├── day-11
    ├── base
    │   └── styles.scss
    ├── exercise-answer
    │   └── answer.css
    ├── exercise-code
    │   └── exercise.scss
    └── tutorial-code
    │   ├── styles.css
    │   └── styles.scss
├── day-12
    ├── base
    │   └── styles.scss
    ├── exercise-answer
    │   └── answer.scss
    ├── exercise-code
    │   └── exercise.scss
    └── tutorial-code
    │   ├── styles.css
    │   └── styles.scss
├── day-13
    ├── base
    │   └── styles.scss
    ├── exercise-answer
    │   └── answer.scss
    ├── exercise-code
    │   └── exercise.css
    └── tutorial-code
    │   ├── styles.css
    │   └── styles.scss
└── day-14
    ├── base
        └── styles.scss
    ├── exercise-answer
        └── answer.scss
    ├── exercise-code
        └── exercise.css
    └── tutorial-code
        ├── styles.css
        └── styles.scss


/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2015, Tuts+
 2 | All rights reserved.
 3 | 
 4 | Redistribution and use in source and binary forms, with or without
 5 | modification, are permitted provided that the following conditions are met:
 6 | 
 7 | * Redistributions of source code must retain the above copyright notice, this
 8 |   list of conditions and the following disclaimer.
 9 | 
10 | * Redistributions in binary form must reproduce the above copyright notice,
11 |   this list of conditions and the following disclaimer in the documentation
12 |   and/or other materials provided with the distribution.
13 | 
14 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
15 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
16 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
17 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
18 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
19 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
20 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
21 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
22 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
23 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
24 | 
25 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ### Tuts+ Course: 14 Days to Learn Sass
 2 | #### Instructor: Adi Purdila
 3 | 
 4 | In this course you’ll learn the basics of Sass, in 14 days. Each day you’ll learn something new and you will get a small exercise that will help you consolidate your knowledge. The course also provides solutions for all exercises so you can compare the results.
 5 | 
 6 | This course is for beginners so you don’t need any previous experience with Sass, but you do need experience with CSS since Sass is an extension of it.
 7 | 
 8 | #### Source Files Description:
 9 | 
10 | The source files are organized into 14 folders, one for each day. Inside you’ll find the files that have been created in the video lesson, as well as an exercise folder. Inside that, you’ll find the files relevant to that particular lesson exercise as well as the answer so you can compare results.
11 | 
12 | **Available on Tuts+ November 2015**
13 | 


--------------------------------------------------------------------------------
/day-01/base/styles-sass.sass:
--------------------------------------------------------------------------------
1 | /* Day 1 - Syntax */
2 | 


--------------------------------------------------------------------------------
/day-01/base/styles-scss.scss:
--------------------------------------------------------------------------------
1 | /* Day 1 - Syntax
2 | 


--------------------------------------------------------------------------------
/day-01/exercise-answer/answer.sass:
--------------------------------------------------------------------------------
 1 | // Day 1 Exercise Answer
 2 | 
 3 | *
 4 |     box-sizing: border-box
 5 | 
 6 | /* Body styles
 7 | body
 8 |     font-family: "Helvetica", Arial, sans-serif
 9 |     color: #cccccc
10 | 
11 |     p
12 |         color: #888
13 |         line-height: 1.5
14 | 
15 | .container
16 |     clear: both
17 | 
18 | main
19 |     :float left
20 |     :width 75%
21 | 
22 | #sidebar
23 |     float: right
24 |     margin-left: 5%
25 |     width: 20%
26 | 
27 | /* Footer styles.
28 | 
29 |     These should be placed last.
30 | footer
31 |     margin-top: 2em
32 |     padding: 1em
33 | 


--------------------------------------------------------------------------------
/day-01/exercise-code/exercise.scss:
--------------------------------------------------------------------------------
 1 | // Day 1 Exercise
 2 | //
 3 | // The following code uses the SCSS syntax.
 4 | //
 5 | // Your assignment is to translate it into code that uses the Sass syntax.
 6 | // On at least two properties, use the alternative property syntax.
 7 | //
 8 | // In the end, compare it with the result from the /exercise-answer folder.
 9 | // Good luck!
10 | 
11 | * { box-sizing: border-box; }
12 | 
13 | /* Body styles */
14 | body {
15 |     font-family: "Helvetica", Arial, sans-serif;
16 |     color: #cccccc;
17 | }
18 | 
19 |     body p {
20 |         color: #888;
21 |         line-height: 1.5;
22 |     }
23 | 
24 | .container { clear: both; }
25 | 
26 | main {
27 |     float: left;
28 |     width: 75%;
29 | }
30 | 
31 | #sidebar {
32 |     float: right;
33 |     margin-left: 5%;
34 |     width: 20%;
35 | }
36 | 
37 | /* Footer styles.
38 |  *
39 |  * These should be placed last. */
40 | footer { margin-top: 2em; padding: 1em; }
41 | 


--------------------------------------------------------------------------------
/day-01/tutorial-code/styles-sass.css:
--------------------------------------------------------------------------------
 1 | /* Day 1 - Syntax */
 2 | /* styles-scss.css
 3 |  *
 4 |  * This is the file generated by styles-scss.scss,
 5 |  * using the newer syntax.
 6 |  *
 7 |  * As you can see, this comment is shown in the CSS output because
 8 |  * it uses the normal CSS syntax.
 9 |  * The comments that use a double slash (//) are not being outputed
10 |  * in the CSS file. */
11 | body {
12 |   background-color: #fff;
13 |   color: #ccc; }
14 |   body p {
15 |     color: #e6e6e6; }
16 | 
17 | .container {
18 |   margin: 3em;
19 |   padding: 0.75em; }
20 | 
21 | #sidebar ol li,
22 | footer {
23 |   padding: 1.5em; }
24 | 


--------------------------------------------------------------------------------
/day-01/tutorial-code/styles-sass.sass:
--------------------------------------------------------------------------------
 1 | /* Day 1 - Syntax
 2 | 
 3 | /* styles-scss.css
 4 | 
 5 |     This is the file generated by styles-scss.scss,
 6 |     using the newer syntax.
 7 | 
 8 |     As you can see, this comment is shown in the CSS output because
 9 |     it uses the normal CSS syntax.
10 |     The comments that use a double slash (//) are not being outputed
11 |     in the CSS file.
12 | 
13 | // Here's some sample code written using Sass syntax.
14 |     And this is a comment that will not show up in the
15 |     final CSS file.
16 | 
17 | $bg-color: #fff
18 | $text-color: #ccc
19 | $baseline: 1.5em
20 | 
21 | body
22 |     background-color: $bg-color
23 |     color: $text-color
24 | 
25 |     p
26 |         color: lighten($text-color, 10%)
27 | 
28 | .container
29 |     :margin $baseline * 2
30 |     :padding $baseline / 2
31 | 
32 | #sidebar ol li,
33 | footer
34 |     padding: $baseline
35 | 


--------------------------------------------------------------------------------
/day-01/tutorial-code/styles-scss.css:
--------------------------------------------------------------------------------
 1 | /* Day 1 - Syntax */
 2 | /* styles-scss.css
 3 |  *
 4 |  * This is the file generated by styles-scss.scss,
 5 |  * using the newer syntax.
 6 |  *
 7 |  * As you can see, this comment is shown in the CSS output because
 8 |  * it uses the normal CSS syntax.
 9 |  * The comments that use a double slash (//) are not being outputed
10 |  * in the CSS file. */
11 | body {
12 |   background-color: #fff;
13 |   color: #ccc; }
14 |   body p {
15 |     color: #e6e6e6; }
16 | 
17 | .container {
18 |   margin: 3em;
19 |   padding: 0.75em; }
20 | 
21 | #sidebar ol li,
22 | footer {
23 |   padding: 1.5em; }
24 | 


--------------------------------------------------------------------------------
/day-01/tutorial-code/styles-scss.scss:
--------------------------------------------------------------------------------
 1 | /* Day 1 - Syntax */
 2 | 
 3 | /* styles-scss.css
 4 |  *
 5 |  * This is the file generated by styles-scss.scss,
 6 |  * using the newer syntax.
 7 |  *
 8 |  * As you can see, this comment is shown in the CSS output because
 9 |  * it uses the normal CSS syntax.
10 |  * The comments that use a double slash (//) are not being outputed
11 |  * in the CSS file. */
12 | 
13 | // Here's some sample code written using Scss syntax
14 | 
15 | $bg-color: #fff;
16 | $text-color: #ccc;
17 | $baseline: 1.5em;
18 | 
19 | body {
20 |     background-color: $bg-color;
21 |     color: $text-color;
22 | 
23 |     p {
24 |         color: lighten($text-color, 10%);
25 |     }
26 | }
27 | 
28 | .container {
29 |     margin: $baseline * 2; padding: $baseline / 2;
30 | }
31 | 
32 | #sidebar ol li,
33 | footer {
34 |     padding: $baseline;
35 | }
36 | 


--------------------------------------------------------------------------------
/day-02/base/day-2.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |     <head>
  4 |         <meta charset="utf-8">
  5 |         <title>14 Days to Learn Sass - Day 2</title>
  6 | 
  7 |         <link rel="stylesheet" href="styles.css" media="screen">
  8 |     </head>
  9 |     <body class="boxed-layout">
 10 |         <div class="container">
 11 |             <header>
 12 |                 <h1>Project Acme</h1>
 13 |                 <h2>Documentation</h2>
 14 | 
 15 |                 <hr>
 16 |             </header>
 17 | 
 18 |             <nav>
 19 |                 <ul>
 20 |                     <li><a href="#introduction">Introduction</a></li>
 21 |                     <li><a href="#how-to">How to use this document</a></li>
 22 |                     <li><a href="#ch-1">Chapter 1</a></li>
 23 |                     <li><a href="#ch-2">Chapter 2</a></li>
 24 |                     <li><a href="#ch-3">Chapter 3</a></li>
 25 |                     <li><a href="#credits">Credits</a></li>
 26 |                 </ul>
 27 |             </nav>
 28 | 
 29 |             <main>
 30 |                 <section id="introduction">
 31 |                     <header>
 32 |                         <h1>Introduction</h1>
 33 |                     </header>
 34 | 
 35 |                     <hr>
 36 | 
 37 |                     <p>
 38 |                         Grumpy wizards make toxic brew for the evil Queen and Jack. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
 39 | 
 40 |                         <a href="#">He lay on his armour-like back</a>, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.
 41 | 
 42 |                         The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.
 43 |                     </p>
 44 | 
 45 |                     <h2>Subchapter 1</h2>
 46 | 
 47 |                     <p>
 48 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in <a href="#">voluptate</a> velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 49 |                     </p>
 50 | 
 51 |                     <h3>Other type of content</h3>
 52 | 
 53 |                     <p>
 54 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="#">Duis aute irure dolor</a> in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 55 |                     </p>
 56 |                 </section>
 57 | 
 58 |                 <section id="how-to">
 59 |                     <header>
 60 |                         <h1>How to use this document</h1>
 61 |                     </header>
 62 | 
 63 |                     <hr>
 64 | 
 65 |                     <p>
 66 |                         Grumpy wizards make toxic brew for the evil Queen and Jack. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
 67 | 
 68 |                         He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.
 69 | 
 70 |                         The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.
 71 |                     </p>
 72 |                     <p>
 73 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 74 |                     </p>
 75 | 
 76 |                     <pre>
 77 |                         <code>
 78 | &lt;header&gt;
 79 |     &lt;h1&gt;How to use this document&lt;/h1&gt;
 80 | &lt;/header&gt;
 81 |                         </code>
 82 |                     </pre>
 83 |                 </section>
 84 | 
 85 |                 <section id="ch-1">
 86 |                     <header>
 87 |                         <h1>Chapter 1</h1>
 88 |                     </header>
 89 | 
 90 |                     <hr>
 91 | 
 92 |                     <p>
 93 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 94 |                     </p>
 95 |                     <p>
 96 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 97 |                     </p>
 98 |                 </section>
 99 | 
100 |                 <section id="ch-2">
101 |                     <header>
102 |                         <h1>Chapter 2</h1>
103 |                     </header>
104 | 
105 |                     <hr>
106 | 
107 |                     <p>
108 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
109 |                     </p>
110 |                     <p>
111 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
112 |                     </p>
113 |                 </section>
114 | 
115 |                 <section id="ch-3">
116 |                     <header>
117 |                         <h1>Chapter 3</h1>
118 |                     </header>
119 | 
120 |                     <hr>
121 | 
122 |                     <p>
123 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
124 |                     </p>
125 |                     <p>
126 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
127 |                     </p>
128 |                     <p>
129 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
130 |                     </p>
131 |                 </section>
132 | 
133 |                 <section id="credits">
134 |                     <header>
135 |                         <h1>Credits</h1>
136 |                     </header>
137 | 
138 |                     <hr>
139 | 
140 |                     <p>
141 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
142 |                     </p>
143 |                     <p>
144 |                         <strong>Credits go to:</strong>
145 |                     </p>
146 | 
147 |                     <ul>
148 |                         <li>John Doe</li>
149 |                         <li>Jane Doe</li>
150 |                         <li>James Smith</li>
151 |                     </ul>
152 |                 </section>
153 | 
154 |             </main>
155 | 
156 |             <footer>
157 |                 <p>
158 |                     <small>Copyright (c) 2015 ACME All Rights Reserved.</small>
159 |                 </p>
160 |             </footer>
161 |         </div> <!-- end container -->
162 |     </body>
163 | </html>
164 | 


--------------------------------------------------------------------------------
/day-02/base/styles.scss:
--------------------------------------------------------------------------------
 1 | /* Day 2 - Nesting */
 2 | 
 3 | /* General styles */
 4 | * { box-sizing: border-box; }
 5 | 
 6 | body {
 7 |     margin: 0;
 8 |     padding: 0;
 9 |     font-family: Helvetica, Arial, sans-serif;
10 |     font-size: 1.125em;
11 |     line-height: 1.5;
12 |     font-weight: 400;
13 |     -webkit-font-smoothing: antialiased;
14 |     color: #333;
15 | }
16 | 
17 | p {
18 |     margin-bottom: 1.3em;
19 |     color: #666;
20 | }
21 | 
22 | a {
23 |     text-decoration: none;
24 | }
25 | 
26 | h1,
27 | h2,
28 | h3,
29 | h4 {
30 |     margin: 1.414em 0 .5em;
31 |     font-weight: inherit;
32 |     line-height: 1.2;
33 | }
34 | 
35 | h1 {
36 |     margin-top: 0;
37 |     font-size: 3.157em;
38 | }
39 | 
40 | h2 { font-size: 2.369em; }
41 | 
42 | h3 { font-size: 1.777em; }
43 | 
44 | h4 { font-size: 1.333em; }
45 | 
46 | small { font-size: .75em; }
47 | 
48 | 
49 | 
50 | /* Layout specific */
51 | .container {
52 |     width: 90%;
53 |     margin: 0 auto;
54 | }
55 | 


--------------------------------------------------------------------------------
/day-02/exercise-answer/answer.scss:
--------------------------------------------------------------------------------
 1 | /* Day 2 Exercise Answer */
 2 | 
 3 | body {
 4 |     font-family: Arial, sans-serif;
 5 |     font-size: 16px;
 6 |     line-height: 1.45;
 7 | }
 8 | 
 9 | p {
10 |     margin-bottom: 1.5em;
11 | 
12 |     a {
13 |         text-decoration: none;
14 |         color: #CD746A;
15 | 
16 |         &:hover {
17 |             color: #fff;
18 |             background-color: #333;
19 |         }
20 |     }
21 | }
22 | 
23 | blockquote {
24 |     font-style: italic;
25 | 
26 |     cite {
27 |         a {
28 |             color: #333;
29 | 
30 |             &:hover {
31 |                 color: #CD746A;
32 |                 text-decoration: underline;
33 |             }
34 |         }
35 | 
36 |         &:before {
37 |             content: "- ";
38 |         }
39 |     }
40 | }
41 | 
42 | .container {
43 |     width: 960px;
44 |     margin: 0 auto;
45 | 
46 |     .fluid-layout & {
47 |         width: 85%;
48 |     }
49 | }
50 | 


--------------------------------------------------------------------------------
/day-02/exercise-code/exercise.css:
--------------------------------------------------------------------------------
 1 | /* Day 2 Exercise
 2 |  *
 3 |  * This is a CSS file compiled from an Scss file.
 4 |  *
 5 |  * Your assignment is to create the original .scss file using
 6 |  * nesting and the parent selector.
 7 |  *
 8 |  * In the end, compare it with the result from the /exercise-answer folder.
 9 |  * Good luck! */
10 | 
11 | body {
12 |     font-family: Arial, sans-serif;
13 |     font-size: 16px;
14 |     line-height: 1.45;
15 | }
16 | 
17 | p { margin-bottom: 1.5em; }
18 | 
19 |     p a {
20 |         text-decoration: none;
21 |         color: #CD746A;
22 |     }
23 |         p a:hover {
24 |             color: #fff;
25 |             background-color: #333;
26 |         }
27 | 
28 | blockquote {
29 |     font-style: italic;
30 | }
31 | 
32 |     blockquote cite a {
33 |         color: #333;
34 |     }
35 | 
36 |         blockquote cite a:hover {
37 |             color: #CD746A;
38 |             text-decoration: underline;
39 |         }
40 | 
41 |     blockquote cite:before {
42 |         content: "- ";
43 |     }
44 | 
45 | .container {
46 |     width: 960px;
47 |     margin: 0 auto;
48 | }
49 | 
50 |     .fluid-layout .container {
51 |         width: 85%;
52 |     }
53 | 


--------------------------------------------------------------------------------
/day-02/tutorial-code/day-2.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |     <head>
  4 |         <meta charset="utf-8">
  5 |         <title>14 Days to Learn Sass - Day 2</title>
  6 | 
  7 |         <link rel="stylesheet" href="styles.css" media="screen">
  8 |     </head>
  9 |     <body class="boxed-layout">
 10 |         <div class="container">
 11 |             <header>
 12 |                 <h1>Project Acme</h1>
 13 |                 <h2>Documentation</h2>
 14 | 
 15 |                 <hr>
 16 |             </header>
 17 | 
 18 |             <nav>
 19 |                 <ul>
 20 |                     <li><a href="#introduction">Introduction</a></li>
 21 |                     <li><a href="#how-to">How to use this document</a></li>
 22 |                     <li><a href="#ch-1">Chapter 1</a></li>
 23 |                     <li><a href="#ch-2">Chapter 2</a></li>
 24 |                     <li><a href="#ch-3">Chapter 3</a></li>
 25 |                     <li><a href="#credits">Credits</a></li>
 26 |                 </ul>
 27 |             </nav>
 28 | 
 29 |             <main>
 30 |                 <section id="introduction">
 31 |                     <header>
 32 |                         <h1>Introduction</h1>
 33 |                     </header>
 34 | 
 35 |                     <hr>
 36 | 
 37 |                     <p>
 38 |                         Grumpy wizards make toxic brew for the evil Queen and Jack. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
 39 | 
 40 |                         <a href="#">He lay on his armour-like back</a>, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.
 41 | 
 42 |                         The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.
 43 |                     </p>
 44 | 
 45 |                     <h2>Subchapter 1</h2>
 46 | 
 47 |                     <p>
 48 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in <a href="#">voluptate</a> velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 49 |                     </p>
 50 | 
 51 |                     <h3>Other type of content</h3>
 52 | 
 53 |                     <p>
 54 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="#">Duis aute irure dolor</a> in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 55 |                     </p>
 56 |                 </section>
 57 | 
 58 |                 <section id="how-to">
 59 |                     <header>
 60 |                         <h1>How to use this document</h1>
 61 |                     </header>
 62 | 
 63 |                     <hr>
 64 | 
 65 |                     <p>
 66 |                         Grumpy wizards make toxic brew for the evil Queen and Jack. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
 67 | 
 68 |                         He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.
 69 | 
 70 |                         The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.
 71 |                     </p>
 72 |                     <p>
 73 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 74 |                     </p>
 75 | 
 76 |                     <pre>
 77 |                         <code>
 78 | &lt;header&gt;
 79 |     &lt;h1&gt;How to use this document&lt;/h1&gt;
 80 | &lt;/header&gt;
 81 |                         </code>
 82 |                     </pre>
 83 |                 </section>
 84 | 
 85 |                 <section id="ch-1">
 86 |                     <header>
 87 |                         <h1>Chapter 1</h1>
 88 |                     </header>
 89 | 
 90 |                     <hr>
 91 | 
 92 |                     <p>
 93 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 94 |                     </p>
 95 |                     <p>
 96 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 97 |                     </p>
 98 |                 </section>
 99 | 
100 |                 <section id="ch-2">
101 |                     <header>
102 |                         <h1>Chapter 2</h1>
103 |                     </header>
104 | 
105 |                     <hr>
106 | 
107 |                     <p>
108 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
109 |                     </p>
110 |                     <p>
111 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
112 |                     </p>
113 |                 </section>
114 | 
115 |                 <section id="ch-3">
116 |                     <header>
117 |                         <h1>Chapter 3</h1>
118 |                     </header>
119 | 
120 |                     <hr>
121 | 
122 |                     <p>
123 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
124 |                     </p>
125 |                     <p>
126 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
127 |                     </p>
128 |                     <p>
129 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
130 |                     </p>
131 |                 </section>
132 | 
133 |                 <section id="credits">
134 |                     <header>
135 |                         <h1>Credits</h1>
136 |                     </header>
137 | 
138 |                     <hr>
139 | 
140 |                     <p>
141 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
142 |                     </p>
143 |                     <p>
144 |                         <strong>Credits go to:</strong>
145 |                     </p>
146 | 
147 |                     <ul>
148 |                         <li>John Doe</li>
149 |                         <li>Jane Doe</li>
150 |                         <li>James Smith</li>
151 |                     </ul>
152 |                 </section>
153 | 
154 |             </main>
155 | 
156 |             <footer>
157 |                 <p>
158 |                     <small>Copyright (c) 2015 ACME All Rights Reserved.</small>
159 |                 </p>
160 |             </footer>
161 |         </div> <!-- end container -->
162 |     </body>
163 | </html>
164 | 


--------------------------------------------------------------------------------
/day-02/tutorial-code/styles.css:
--------------------------------------------------------------------------------
 1 | /* Day 2 - Nesting */
 2 | /* General styles */
 3 | * {
 4 |   box-sizing: border-box; }
 5 | 
 6 | body {
 7 |   margin: 0;
 8 |   padding: 0;
 9 |   font-family: Helvetica, Arial, sans-serif;
10 |   font-size: 1.125em;
11 |   line-height: 1.5;
12 |   font-weight: 400;
13 |   -webkit-font-smoothing: antialiased;
14 |   color: #333; }
15 |   body.boxed-layout {
16 |     background-color: #F9F9F9; }
17 | 
18 | p {
19 |   margin-bottom: 1.3em;
20 |   color: #666; }
21 |   p a {
22 |     color: #589ED3; }
23 | 
24 | a {
25 |   text-decoration: none; }
26 |   a:hover {
27 |     text-decoration: underline; }
28 | 
29 | h1,
30 | h2,
31 | h3,
32 | h4 {
33 |   margin: 1.414em 0 .5em;
34 |   font-weight: inherit;
35 |   line-height: 1.2; }
36 | 
37 | h1 {
38 |   margin-top: 0;
39 |   font-size: 3.157em; }
40 | 
41 | h2 {
42 |   font-size: 2.369em; }
43 | 
44 | h3 {
45 |   font-size: 1.777em; }
46 | 
47 | h4 {
48 |   font-size: 1.333em; }
49 | 
50 | small {
51 |   font-size: .75em; }
52 | 
53 | /* Layout specific */
54 | .container {
55 |   width: 90%;
56 |   margin: 0 auto; }
57 |   .boxed-layout .container {
58 |     background-color: #fff;
59 |     padding: 3em;
60 |     border: 1px solid #eaeaea;
61 |     border-width: 0 1px; }
62 |   .container > header h1 {
63 |     font-size: 4em;
64 |     font-weight: 800; }
65 | 
66 | nav {
67 |   padding: 3em 0; }
68 |   nav ul {
69 |     list-style: none;
70 |     padding: 0;
71 |     overflow: hidden; }
72 |     nav ul li {
73 |       float: left; }
74 |       nav ul li a {
75 |         display: inline-block;
76 |         color: #333;
77 |         padding: 1em; }
78 |         nav ul li a:hover {
79 |           text-decoration: none;
80 |           background-color: #eaeaea; }
81 |       nav ul li:after {
82 |         content: "";
83 |         border: 1px dotted #ccc;
84 |         width: 1px;
85 |         height: 100%; }
86 | 
87 | #demo-child {
88 |   margin: .5em; }
89 | #demochild {
90 |   margin: .5em; }
91 | #demo.child {
92 |   margin: .5em; }
93 | #demo .child {
94 |   margin: .5em; }
95 | 


--------------------------------------------------------------------------------
/day-02/tutorial-code/styles.scss:
--------------------------------------------------------------------------------
  1 | /* Day 2 - Nesting */
  2 | 
  3 | /* General styles */
  4 | * { box-sizing: border-box; }
  5 | 
  6 | body {
  7 |     margin: 0;
  8 |     padding: 0;
  9 |     font-family: Helvetica, Arial, sans-serif;
 10 |     font-size: 1.125em;
 11 |     line-height: 1.5;
 12 |     font-weight: 400;
 13 |     -webkit-font-smoothing: antialiased;
 14 |     color: #333;
 15 | 
 16 |     &.boxed-layout {
 17 |         background-color: #F9F9F9;
 18 |     }
 19 | }
 20 | 
 21 | p {
 22 |     margin-bottom: 1.3em;
 23 |     color: #666;
 24 | 
 25 |     a {
 26 |         color: #589ED3;
 27 |     }
 28 | }
 29 | 
 30 | a {
 31 |     text-decoration: none;
 32 | 
 33 |     &:hover {
 34 |         text-decoration: underline;
 35 |     }
 36 | }
 37 | 
 38 | h1,
 39 | h2,
 40 | h3,
 41 | h4 {
 42 |     margin: 1.414em 0 .5em;
 43 |     font-weight: inherit;
 44 |     line-height: 1.2;
 45 | }
 46 | 
 47 | h1 {
 48 |     margin-top: 0;
 49 |     font-size: 3.157em;
 50 | }
 51 | 
 52 | h2 { font-size: 2.369em; }
 53 | 
 54 | h3 { font-size: 1.777em; }
 55 | 
 56 | h4 { font-size: 1.333em; }
 57 | 
 58 | small { font-size: .75em; }
 59 | 
 60 | 
 61 | 
 62 | /* Layout specific */
 63 | .container {
 64 |     width: 90%;
 65 |     margin: 0 auto;
 66 | 
 67 |     .boxed-layout & {
 68 |         background-color: #fff;
 69 |         padding: 3em;
 70 |         border: 1px solid #eaeaea;
 71 |         border-width: 0 1px;
 72 |     }
 73 | 
 74 |     > header {
 75 |         h1 {
 76 |             font-size: 4em;
 77 |             font-weight: 800;
 78 |         }
 79 |     }
 80 | }
 81 | 
 82 | nav {
 83 |     padding: 3em 0;
 84 | 
 85 |     ul {
 86 |         list-style: none;
 87 |         padding: 0;
 88 |         overflow: hidden;
 89 | 
 90 |         li {
 91 |             float: left;
 92 | 
 93 |             a {
 94 |                 display: inline-block;
 95 | 
 96 |                 color: #333;
 97 |                 padding: 1em;
 98 | 
 99 |                 &:hover {
100 |                     text-decoration: none;
101 |                     background-color: #eaeaea;
102 |                 }
103 |             }
104 | 
105 |             &:after {
106 |                 content: "";
107 |                 border: 1px dotted #ccc;
108 |                 width: 1px;
109 |                 height: 100%;
110 |             }
111 |         }
112 |     }
113 | }
114 | 
115 | 
116 | 
117 | // The parent selector can be used in a few different ways
118 | #demo {
119 |     &-child { margin: .5em; }
120 |     &child { margin: .5em; }
121 |     &.child { margin: .5em; }
122 |     & .child { margin: .5em; }
123 | }
124 | 


--------------------------------------------------------------------------------
/day-03/base/day-3.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |     <head>
  4 |         <meta charset="utf-8">
  5 |         <title>14 Days to Learn Sass - Day 3</title>
  6 | 
  7 |         <link rel="stylesheet" href="styles.css" media="screen">
  8 |     </head>
  9 |     <body class="boxed-layout">
 10 |         <div class="container">
 11 |             <header>
 12 |                 <h1>Project Acme</h1>
 13 |                 <h2>Documentation</h2>
 14 | 
 15 |                 <hr>
 16 |             </header>
 17 | 
 18 |             <nav>
 19 |                 <ul>
 20 |                     <li><a href="#introduction">Introduction</a></li>
 21 |                     <li><a href="#how-to">How to use this document</a></li>
 22 |                     <li><a href="#ch-1">Chapter 1</a></li>
 23 |                     <li><a href="#ch-2">Chapter 2</a></li>
 24 |                     <li><a href="#ch-3">Chapter 3</a></li>
 25 |                     <li><a href="#credits">Credits</a></li>
 26 |                 </ul>
 27 |             </nav>
 28 | 
 29 |             <main>
 30 |                 <section id="introduction">
 31 |                     <header>
 32 |                         <h1>Introduction</h1>
 33 |                     </header>
 34 | 
 35 |                     <hr>
 36 | 
 37 |                     <p>
 38 |                         Grumpy wizards make toxic brew for the evil Queen and Jack. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
 39 | 
 40 |                         <a href="#">He lay on his armour-like back</a>, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.
 41 | 
 42 |                         The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.
 43 |                     </p>
 44 | 
 45 |                     <h2>Subchapter 1</h2>
 46 | 
 47 |                     <p>
 48 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in <a href="#">voluptate</a> velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 49 |                     </p>
 50 | 
 51 |                     <h3>Other type of content</h3>
 52 | 
 53 |                     <p>
 54 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="#">Duis aute irure dolor</a> in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 55 |                     </p>
 56 |                 </section>
 57 | 
 58 |                 <section id="how-to">
 59 |                     <header>
 60 |                         <h1>How to use this document</h1>
 61 |                     </header>
 62 | 
 63 |                     <hr>
 64 | 
 65 |                     <p>
 66 |                         Grumpy wizards make toxic brew for the evil Queen and Jack. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
 67 | 
 68 |                         He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.
 69 | 
 70 |                         The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.
 71 |                     </p>
 72 |                     <p>
 73 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 74 |                     </p>
 75 | 
 76 |                     <pre>
 77 |                         <code>
 78 | &lt;header&gt;
 79 |     &lt;h1&gt;How to use this document&lt;/h1&gt;
 80 | &lt;/header&gt;
 81 |                         </code>
 82 |                     </pre>
 83 |                 </section>
 84 | 
 85 |                 <section id="ch-1">
 86 |                     <header>
 87 |                         <h1>Chapter 1</h1>
 88 |                     </header>
 89 | 
 90 |                     <hr>
 91 | 
 92 |                     <p>
 93 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 94 |                     </p>
 95 |                     <p>
 96 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 97 |                     </p>
 98 |                 </section>
 99 | 
100 |                 <section id="ch-2">
101 |                     <header>
102 |                         <h1>Chapter 2</h1>
103 |                     </header>
104 | 
105 |                     <hr>
106 | 
107 |                     <p>
108 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
109 |                     </p>
110 |                     <p>
111 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
112 |                     </p>
113 |                 </section>
114 | 
115 |                 <section id="ch-3">
116 |                     <header>
117 |                         <h1>Chapter 3</h1>
118 |                     </header>
119 | 
120 |                     <hr>
121 | 
122 |                     <p>
123 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
124 |                     </p>
125 |                     <p>
126 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
127 |                     </p>
128 |                     <p>
129 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
130 |                     </p>
131 |                 </section>
132 | 
133 |                 <section id="credits">
134 |                     <header>
135 |                         <h1>Credits</h1>
136 |                     </header>
137 | 
138 |                     <hr>
139 | 
140 |                     <p>
141 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
142 |                     </p>
143 |                     <p>
144 |                         <strong>Credits go to:</strong>
145 |                     </p>
146 | 
147 |                     <ul>
148 |                         <li>John Doe</li>
149 |                         <li>Jane Doe</li>
150 |                         <li>James Smith</li>
151 |                     </ul>
152 |                 </section>
153 | 
154 |             </main>
155 | 
156 |             <footer>
157 |                 <p>
158 |                     <small>Copyright (c) 2015 ACME All Rights Reserved.</small>
159 |                 </p>
160 |             </footer>
161 |         </div> <!-- end container -->
162 |     </body>
163 | </html>
164 | 


--------------------------------------------------------------------------------
/day-03/base/styles.scss:
--------------------------------------------------------------------------------
  1 | /* Day 3 - Nested properties */
  2 | 
  3 | /* General styles */
  4 | * { box-sizing: border-box; }
  5 | 
  6 | body {
  7 |     margin: 0;
  8 |     padding: 0;
  9 |     font-family: Helvetica, Arial, sans-serif;
 10 |     font-size: 1.125em;
 11 |     line-height: 1.5;
 12 |     font-weight: 400;
 13 |     -webkit-font-smoothing: antialiased;
 14 |     color: #333;
 15 | 
 16 |     &.boxed-layout {
 17 |         background-color: #F9F9F9;
 18 |     }
 19 | }
 20 | 
 21 | p {
 22 |     margin-bottom: 1.3em;
 23 |     color: #666;
 24 | 
 25 |     a {
 26 |         color: #589ED3;
 27 |     }
 28 | }
 29 | 
 30 | a {
 31 |     text-decoration: none;
 32 | 
 33 |     &:hover {
 34 |         text-decoration: underline;
 35 |     }
 36 | }
 37 | 
 38 | h1,
 39 | h2,
 40 | h3,
 41 | h4 {
 42 |     margin: 1.414em 0 .5em;
 43 |     font-weight: inherit;
 44 |     line-height: 1.2;
 45 | }
 46 | 
 47 | h1 {
 48 |     margin-top: 0;
 49 |     font-size: 3.157em;
 50 | }
 51 | 
 52 | h2 { font-size: 2.369em; }
 53 | 
 54 | h3 { font-size: 1.777em; }
 55 | 
 56 | h4 { font-size: 1.333em; }
 57 | 
 58 | small { font-size: .75em; }
 59 | 
 60 | 
 61 | 
 62 | /* Layout specific */
 63 | .container {
 64 |     width: 90%;
 65 |     margin: 0 auto;
 66 | 
 67 |     .boxed-layout & {
 68 |         background-color: #fff;
 69 |         padding: 3em;
 70 |         border: 1px solid #eaeaea;
 71 |         border-width: 0 1px;
 72 |     }
 73 | 
 74 |     > header {
 75 |         h1 {
 76 |             font-size: 4em;
 77 |             font-weight: 800;
 78 |         }
 79 |     }
 80 | }
 81 | 
 82 | nav {
 83 |     padding: 3em 0;
 84 | 
 85 |     ul {
 86 |         list-style: none;
 87 |         padding: 0;
 88 |         overflow: hidden;
 89 | 
 90 |         li {
 91 |             float: left;
 92 | 
 93 |             a {
 94 |                 display: inline-block;
 95 | 
 96 |                 color: #333;
 97 |                 padding: 1em;
 98 | 
 99 |                 &:hover {
100 |                     text-decoration: none;
101 |                     background-color: #eaeaea;
102 |                 }
103 |             }
104 | 
105 |             &:after {
106 |                 content: "";
107 |                 border: 1px dotted #ccc;
108 |                 width: 1px;
109 |                 height: 100%;
110 |             }
111 |         }
112 |     }
113 | }
114 | 
115 | 
116 | 
117 | // The parent selector can be used in a few different ways
118 | #demo {
119 |     &-child { margin: .5em; }
120 |     &child { margin: .5em; }
121 |     &.child { margin: .5em; }
122 |     & .child { margin: .5em; }
123 | }
124 | 


--------------------------------------------------------------------------------
/day-03/exercise-answer/answer.scss:
--------------------------------------------------------------------------------
 1 | /* Day 3 Exercise Answer */
 2 | 
 3 | body {
 4 |      font: {
 5 |          family: Arial, sans-serif;
 6 |          size: 16px;
 7 |          weight: normal;
 8 |      }
 9 | 
10 |      line-height: 1.45;
11 | }
12 | 
13 | p {
14 |     margin-bottom: 1.5em;
15 | 
16 |     a {
17 |         text-decoration: none;
18 |         color: #CD746A;
19 | 
20 |         &:hover {
21 |             color: #fff;
22 |             background-color: #333;
23 |         }
24 |     }
25 | }
26 | 
27 | blockquote {
28 |     font: {
29 |         family: serif;
30 |         size: 150%;
31 |         style: italic;
32 |     }
33 | 
34 |     cite {
35 |         a {
36 |             color: #333;
37 | 
38 |             &:hover {
39 |                 color: #CD746A;
40 | 
41 |                 text: {
42 |                     decoration: underline;
43 |                     transform: uppercase;
44 |                 }
45 |             }
46 |         }
47 | 
48 |         &:before {
49 |             content: "- ";
50 |         }
51 |     }
52 | }
53 | 
54 | .container {
55 |     width: 960px;
56 |     margin: 0 auto;
57 | 
58 |     .fluid-layout & {
59 |         width: 85%;
60 |     }
61 | }
62 | 


--------------------------------------------------------------------------------
/day-03/exercise-code/exercise.scss:
--------------------------------------------------------------------------------
 1 | /* Day 3 Exercise
 2 |  *
 3 |  * This is an SCSS file.
 4 |  *
 5 |  * Your assignment is to use nested properties wherever you see fit.
 6 |  *
 7 |  * In the end, compare it with the result from the /exercise-answer folder.
 8 |  * Good luck! */
 9 | 
10 | body {
11 |     font-family: Arial, sans-serif;
12 |     font-size: 16px;
13 |     font-weight: normal;
14 |     line-height: 1.45;
15 | }
16 | 
17 | p {
18 |     margin-bottom: 1.5em;
19 | 
20 |     a {
21 |         text-decoration: none;
22 |         color: #CD746A;
23 | 
24 |         &:hover {
25 |             color: #fff;
26 |             background-color: #333;
27 |         }
28 |     }
29 | }
30 | 
31 | blockquote {
32 |     font-family: serif;
33 |     font-size: 150%;
34 |     font-style: italic;
35 | 
36 |     cite {
37 |         a {
38 |             color: #333;
39 | 
40 |             &:hover {
41 |                 text-decoration: underline;
42 |                 color: #CD746A;
43 |                 text-transform: uppercase;
44 |             }
45 |         }
46 | 
47 |         &:before {
48 |             content: "- ";
49 |         }
50 |     }
51 | }
52 | 
53 | .container {
54 |     width: 960px;
55 |     margin: 0 auto;
56 | 
57 |     .fluid-layout & {
58 |         width: 85%;
59 |     }
60 | }
61 | 


--------------------------------------------------------------------------------
/day-03/tutorial-code/day-3.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |     <head>
  4 |         <meta charset="utf-8">
  5 |         <title>14 Days to Learn Sass - Day 3</title>
  6 | 
  7 |         <link rel="stylesheet" href="styles.css" media="screen">
  8 |     </head>
  9 |     <body class="boxed-layout">
 10 |         <div class="container">
 11 |             <header>
 12 |                 <h1>Project Acme</h1>
 13 |                 <h2>Documentation</h2>
 14 | 
 15 |                 <hr>
 16 |             </header>
 17 | 
 18 |             <nav>
 19 |                 <ul>
 20 |                     <li><a href="#introduction">Introduction</a></li>
 21 |                     <li><a href="#how-to">How to use this document</a></li>
 22 |                     <li><a href="#ch-1">Chapter 1</a></li>
 23 |                     <li><a href="#ch-2">Chapter 2</a></li>
 24 |                     <li><a href="#ch-3">Chapter 3</a></li>
 25 |                     <li><a href="#credits">Credits</a></li>
 26 |                 </ul>
 27 |             </nav>
 28 | 
 29 |             <main>
 30 |                 <section id="introduction">
 31 |                     <header>
 32 |                         <h1>Introduction</h1>
 33 |                     </header>
 34 | 
 35 |                     <hr>
 36 | 
 37 |                     <p>
 38 |                         Grumpy wizards make toxic brew for the evil Queen and Jack. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
 39 | 
 40 |                         <a href="#">He lay on his armour-like back</a>, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.
 41 | 
 42 |                         The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.
 43 |                     </p>
 44 | 
 45 |                     <h2>Subchapter 1</h2>
 46 | 
 47 |                     <p>
 48 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in <a href="#">voluptate</a> velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 49 |                     </p>
 50 | 
 51 |                     <h3>Other type of content</h3>
 52 | 
 53 |                     <p>
 54 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="#">Duis aute irure dolor</a> in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 55 |                     </p>
 56 |                 </section>
 57 | 
 58 |                 <section id="how-to">
 59 |                     <header>
 60 |                         <h1>How to use this document</h1>
 61 |                     </header>
 62 | 
 63 |                     <hr>
 64 | 
 65 |                     <p>
 66 |                         Grumpy wizards make toxic brew for the evil Queen and Jack. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
 67 | 
 68 |                         He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.
 69 | 
 70 |                         The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.
 71 |                     </p>
 72 |                     <p>
 73 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 74 |                     </p>
 75 | 
 76 |                     <pre>
 77 |                         <code>
 78 | &lt;header&gt;
 79 |     &lt;h1&gt;How to use this document&lt;/h1&gt;
 80 | &lt;/header&gt;
 81 |                         </code>
 82 |                     </pre>
 83 |                 </section>
 84 | 
 85 |                 <section id="ch-1">
 86 |                     <header>
 87 |                         <h1>Chapter 1</h1>
 88 |                     </header>
 89 | 
 90 |                     <hr>
 91 | 
 92 |                     <p>
 93 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 94 |                     </p>
 95 |                     <p>
 96 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 97 |                     </p>
 98 |                 </section>
 99 | 
100 |                 <section id="ch-2">
101 |                     <header>
102 |                         <h1>Chapter 2</h1>
103 |                     </header>
104 | 
105 |                     <hr>
106 | 
107 |                     <p>
108 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
109 |                     </p>
110 |                     <p>
111 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
112 |                     </p>
113 |                 </section>
114 | 
115 |                 <section id="ch-3">
116 |                     <header>
117 |                         <h1>Chapter 3</h1>
118 |                     </header>
119 | 
120 |                     <hr>
121 | 
122 |                     <p>
123 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
124 |                     </p>
125 |                     <p>
126 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
127 |                     </p>
128 |                     <p>
129 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
130 |                     </p>
131 |                 </section>
132 | 
133 |                 <section id="credits">
134 |                     <header>
135 |                         <h1>Credits</h1>
136 |                     </header>
137 | 
138 |                     <hr>
139 | 
140 |                     <p>
141 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
142 |                     </p>
143 |                     <p>
144 |                         <strong>Credits go to:</strong>
145 |                     </p>
146 | 
147 |                     <ul>
148 |                         <li>John Doe</li>
149 |                         <li>Jane Doe</li>
150 |                         <li>James Smith</li>
151 |                     </ul>
152 |                 </section>
153 | 
154 |             </main>
155 | 
156 |             <footer>
157 |                 <p>
158 |                     <small>Copyright (c) 2015 ACME All Rights Reserved.</small>
159 |                 </p>
160 |             </footer>
161 |         </div> <!-- end container -->
162 |     </body>
163 | </html>
164 | 


--------------------------------------------------------------------------------
/day-03/tutorial-code/styles.css:
--------------------------------------------------------------------------------
  1 | /* Day 3 - Nested properties */
  2 | /* General styles */
  3 | * {
  4 |   box-sizing: border-box; }
  5 | 
  6 | body {
  7 |   margin: 0;
  8 |   padding: 0;
  9 |   line-height: 1.5;
 10 |   font-family: Helvetica, Arial, sans-serif;
 11 |   font-size: 1.125em;
 12 |   font-weight: 400;
 13 |   font: 400 1.125em/1.5 Helvetica, Arial, sans-serif;
 14 |   -webkit-font-smoothing: antialiased;
 15 |   color: #333; }
 16 |   body.boxed-layout {
 17 |     background-color: #F9F9F9; }
 18 | 
 19 | p {
 20 |   margin-bottom: 1.3em;
 21 |   color: #666; }
 22 |   p a {
 23 |     color: #589ED3; }
 24 | 
 25 | a {
 26 |   text-decoration: none; }
 27 |   a:hover {
 28 |     text-decoration: underline; }
 29 | 
 30 | h1,
 31 | h2,
 32 | h3,
 33 | h4 {
 34 |   margin: 1.414em 0 .5em;
 35 |   font-weight: inherit;
 36 |   line-height: 1.2; }
 37 | 
 38 | h1 {
 39 |   margin-top: 0;
 40 |   font-size: 3.157em; }
 41 | 
 42 | h2 {
 43 |   font-size: 2.369em; }
 44 | 
 45 | h3 {
 46 |   font-size: 1.777em; }
 47 | 
 48 | h4 {
 49 |   font-size: 1.333em; }
 50 | 
 51 | small {
 52 |   font-size: .75em; }
 53 | 
 54 | /* Layout specific */
 55 | .container {
 56 |   width: 90%;
 57 |   margin: 0 auto; }
 58 |   .boxed-layout .container {
 59 |     background-color: #fff;
 60 |     padding: 3em;
 61 |     border-width: 0 1px;
 62 |     border-style: solid;
 63 |     border-color: #eaeaea; }
 64 |   .container > header h1 {
 65 |     font-size: 4em;
 66 |     font-weight: 800; }
 67 | 
 68 | nav {
 69 |   padding-top: 3em;
 70 |   padding-right: 0;
 71 |   padding-bottom: 3em;
 72 |   padding-left: 0; }
 73 |   nav ul {
 74 |     list-style: none;
 75 |     padding: 0;
 76 |     overflow: hidden; }
 77 |     nav ul li {
 78 |       float: left; }
 79 |       nav ul li a {
 80 |         display: inline-block;
 81 |         color: #333;
 82 |         padding: 1em; }
 83 |         nav ul li a:hover {
 84 |           text-decoration: none;
 85 |           background-color: #eaeaea; }
 86 |       nav ul li:after {
 87 |         content: "";
 88 |         border: 1px dotted #ccc;
 89 |         width: 1px;
 90 |         height: 100%; }
 91 | 
 92 | #demo-child {
 93 |   margin: .5em; }
 94 | #demochild {
 95 |   margin: .5em; }
 96 | #demo.child {
 97 |   margin: .5em; }
 98 | #demo .child {
 99 |   margin: .5em; }
100 | 


--------------------------------------------------------------------------------
/day-03/tutorial-code/styles.scss:
--------------------------------------------------------------------------------
  1 | /* Day 3 - Nested properties */
  2 | 
  3 | /* General styles */
  4 | * { box-sizing: border-box; }
  5 | 
  6 | body {
  7 |     margin: 0;
  8 |     padding: 0;
  9 |     line-height: 1.5;
 10 | 
 11 |     font: {
 12 |         family: Helvetica, Arial, sans-serif;
 13 |         size: 1.125em;
 14 |         weight: 400;
 15 |     }
 16 | 
 17 |     font: 400 1.125em/1.5 Helvetica, Arial, sans-serif;
 18 | 
 19 |     -webkit-font-smoothing: antialiased;
 20 |     color: #333;
 21 | 
 22 |     &.boxed-layout {
 23 |         background-color: #F9F9F9;
 24 |     }
 25 | }
 26 | 
 27 | p {
 28 |     margin-bottom: 1.3em;
 29 |     color: #666;
 30 | 
 31 |     a {
 32 |         color: #589ED3;
 33 |     }
 34 | }
 35 | 
 36 | a {
 37 |     text-decoration: none;
 38 | 
 39 |     &:hover {
 40 |         text-decoration: underline;
 41 |     }
 42 | }
 43 | 
 44 | h1,
 45 | h2,
 46 | h3,
 47 | h4 {
 48 |     margin: 1.414em 0 .5em;
 49 |     font-weight: inherit;
 50 |     line-height: 1.2;
 51 | }
 52 | 
 53 | h1 {
 54 |     margin-top: 0;
 55 |     font-size: 3.157em;
 56 | }
 57 | 
 58 | h2 { font-size: 2.369em; }
 59 | 
 60 | h3 { font-size: 1.777em; }
 61 | 
 62 | h4 { font-size: 1.333em; }
 63 | 
 64 | small { font-size: .75em; }
 65 | 
 66 | 
 67 | 
 68 | /* Layout specific */
 69 | .container {
 70 |     width: 90%;
 71 |     margin: 0 auto;
 72 | 
 73 |     .boxed-layout & {
 74 |         background-color: #fff;
 75 |         padding: 3em;
 76 |         border: {
 77 |             width: 0 1px;
 78 |             style: solid;
 79 |             color: #eaeaea;
 80 |         }
 81 |     }
 82 | 
 83 |     > header {
 84 |         h1 {
 85 |             font-size: 4em;
 86 |             font-weight: 800;
 87 |         }
 88 |     }
 89 | }
 90 | 
 91 | nav {
 92 |     padding: {
 93 |         top: 3em;
 94 |         right: 0;
 95 |         bottom: 3em;
 96 |         left: 0;
 97 |     }
 98 | 
 99 |     ul {
100 |         list-style: none;
101 |         padding: 0;
102 |         overflow: hidden;
103 | 
104 |         li {
105 |             float: left;
106 | 
107 |             a {
108 |                 display: inline-block;
109 | 
110 |                 color: #333;
111 |                 padding: 1em;
112 | 
113 |                 &:hover {
114 |                     text-decoration: none;
115 |                     background-color: #eaeaea;
116 |                 }
117 |             }
118 | 
119 |             &:after {
120 |                 content: "";
121 |                 border: 1px dotted #ccc;
122 |                 width: 1px;
123 |                 height: 100%;
124 |             }
125 |         }
126 |     }
127 | }
128 | 
129 | 
130 | 
131 | // The parent selector can be used in a few different ways
132 | #demo {
133 |     &-child { margin: .5em; }
134 |     &child { margin: .5em; }
135 |     &.child { margin: .5em; }
136 |     & .child { margin: .5em; }
137 | }
138 | 


--------------------------------------------------------------------------------
/day-04/base/day-4.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |     <head>
  4 |         <meta charset="utf-8">
  5 |         <title>14 Days to Learn Sass - Day 4</title>
  6 | 
  7 |         <link rel="stylesheet" href="styles.css" media="screen">
  8 |     </head>
  9 |     <body class="boxed-layout">
 10 |         <div class="container">
 11 |             <header>
 12 |                 <h1>Project Acme</h1>
 13 |                 <h2>Documentation</h2>
 14 | 
 15 |                 <hr>
 16 |             </header>
 17 | 
 18 |             <nav>
 19 |                 <ul>
 20 |                     <li><a href="#introduction">Introduction</a></li>
 21 |                     <li><a href="#how-to">How to use this document</a></li>
 22 |                     <li><a href="#ch-1">Chapter 1</a></li>
 23 |                     <li><a href="#ch-2">Chapter 2</a></li>
 24 |                     <li><a href="#ch-3">Chapter 3</a></li>
 25 |                     <li><a href="#credits">Credits</a></li>
 26 |                 </ul>
 27 |             </nav>
 28 | 
 29 |             <main>
 30 |                 <section id="introduction">
 31 |                     <header>
 32 |                         <h1>Introduction</h1>
 33 |                     </header>
 34 | 
 35 |                     <hr>
 36 | 
 37 |                     <p>
 38 |                         Grumpy wizards make toxic brew for the evil Queen and Jack. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
 39 | 
 40 |                         <a href="#">He lay on his armour-like back</a>, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.
 41 | 
 42 |                         The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.
 43 |                     </p>
 44 | 
 45 |                     <h2>Subchapter 1</h2>
 46 | 
 47 |                     <p>
 48 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in <a href="#">voluptate</a> velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 49 |                     </p>
 50 | 
 51 |                     <h3>Other type of content</h3>
 52 | 
 53 |                     <p>
 54 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="#">Duis aute irure dolor</a> in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 55 |                     </p>
 56 |                 </section>
 57 | 
 58 |                 <section id="how-to">
 59 |                     <header>
 60 |                         <h1>How to use this document</h1>
 61 |                     </header>
 62 | 
 63 |                     <hr>
 64 | 
 65 |                     <p>
 66 |                         Grumpy wizards make toxic brew for the evil Queen and Jack. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
 67 | 
 68 |                         He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.
 69 | 
 70 |                         The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.
 71 |                     </p>
 72 |                     <p>
 73 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 74 |                     </p>
 75 | 
 76 |                     <pre>
 77 |                         <code>
 78 | &lt;header&gt;
 79 |     &lt;h1&gt;How to use this document&lt;/h1&gt;
 80 | &lt;/header&gt;
 81 |                         </code>
 82 |                     </pre>
 83 |                 </section>
 84 | 
 85 |                 <section id="ch-1">
 86 |                     <header>
 87 |                         <h1>Chapter 1</h1>
 88 |                     </header>
 89 | 
 90 |                     <hr>
 91 | 
 92 |                     <p>
 93 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 94 |                     </p>
 95 |                     <p>
 96 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 97 |                     </p>
 98 |                 </section>
 99 | 
100 |                 <section id="ch-2">
101 |                     <header>
102 |                         <h1>Chapter 2</h1>
103 |                     </header>
104 | 
105 |                     <hr>
106 | 
107 |                     <p>
108 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
109 |                     </p>
110 |                     <p>
111 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
112 |                     </p>
113 |                 </section>
114 | 
115 |                 <section id="ch-3">
116 |                     <header>
117 |                         <h1>Chapter 3</h1>
118 |                     </header>
119 | 
120 |                     <hr>
121 | 
122 |                     <p>
123 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
124 |                     </p>
125 |                     <p>
126 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
127 |                     </p>
128 |                     <p>
129 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
130 |                     </p>
131 |                 </section>
132 | 
133 |                 <section id="credits">
134 |                     <header>
135 |                         <h1>Credits</h1>
136 |                     </header>
137 | 
138 |                     <hr>
139 | 
140 |                     <p>
141 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
142 |                     </p>
143 |                     <p>
144 |                         <strong>Credits go to:</strong>
145 |                     </p>
146 | 
147 |                     <ul>
148 |                         <li>John Doe</li>
149 |                         <li>Jane Doe</li>
150 |                         <li>James Smith</li>
151 |                     </ul>
152 |                 </section>
153 | 
154 |             </main>
155 | 
156 |             <footer>
157 |                 <p>
158 |                     <small>Copyright (c) 2015 ACME All Rights Reserved.</small>
159 |                 </p>
160 |             </footer>
161 |         </div> <!-- end container -->
162 |     </body>
163 | </html>
164 | 


--------------------------------------------------------------------------------
/day-04/base/styles.scss:
--------------------------------------------------------------------------------
  1 | /* Day 4 - Variables */
  2 | 
  3 | /* General styles */
  4 | * { box-sizing: border-box; }
  5 | 
  6 | body {
  7 |     margin: 0;
  8 |     padding: 0;
  9 |     font-family: Helvetica, Arial, sans-serif;
 10 |     font-size: 1.125em;
 11 |     line-height: 1.5;
 12 |     font-weight: 400;
 13 |     -webkit-font-smoothing: antialiased;
 14 |     color: #333;
 15 | 
 16 |     &.boxed-layout {
 17 |         background-color: #F9F9F9;
 18 |     }
 19 | }
 20 | 
 21 | p {
 22 |     margin-bottom: 1.3em;
 23 |     color: #666;
 24 | 
 25 |     a {
 26 |         color: #589ED3;
 27 |     }
 28 | }
 29 | 
 30 | a {
 31 |     text-decoration: none;
 32 | 
 33 |     &:hover {
 34 |         text-decoration: underline;
 35 |     }
 36 | }
 37 | 
 38 | h1,
 39 | h2,
 40 | h3,
 41 | h4 {
 42 |     margin: 1.414em 0 .5em;
 43 |     font-weight: inherit;
 44 |     line-height: 1.2;
 45 | }
 46 | 
 47 | h1 {
 48 |     margin-top: 0;
 49 |     font-size: 3.157em;
 50 | }
 51 | 
 52 | h2 { font-size: 2.369em; }
 53 | 
 54 | h3 { font-size: 1.777em; }
 55 | 
 56 | h4 { font-size: 1.333em; }
 57 | 
 58 | small { font-size: .75em; }
 59 | 
 60 | 
 61 | 
 62 | /* Layout specific */
 63 | .container {
 64 |     width: 90%;
 65 |     margin: 0 auto;
 66 | 
 67 |     .boxed-layout & {
 68 |         background-color: #fff;
 69 |         padding: 3em;
 70 |         border: 1px solid #eaeaea;
 71 |         border-width: 0 1px;
 72 |     }
 73 | 
 74 |     > header {
 75 |         h1 {
 76 |             font-size: 4em;
 77 |             font-weight: 800;
 78 |         }
 79 |     }
 80 | }
 81 | 
 82 | nav {
 83 |     padding: 3em 0;
 84 | 
 85 |     ul {
 86 |         list-style: none;
 87 |         padding: 0;
 88 |         overflow: hidden;
 89 | 
 90 |         li {
 91 |             float: left;
 92 | 
 93 |             a {
 94 |                 display: inline-block;
 95 | 
 96 |                 color: #333;
 97 |                 padding: 1em;
 98 | 
 99 |                 &:hover {
100 |                     text-decoration: none;
101 |                     background-color: #eaeaea;
102 |                 }
103 |             }
104 | 
105 |             &:after {
106 |                 content: "";
107 |                 border: 1px dotted #ccc;
108 |                 width: 1px;
109 |                 height: 100%;
110 |             }
111 |         }
112 |     }
113 | }
114 | 


--------------------------------------------------------------------------------
/day-04/exercise-answer/answer.scss:
--------------------------------------------------------------------------------
 1 | /* Day 4 Exercise Answer */
 2 | 
 3 | // Variables
 4 | $base-font-size: 1em;
 5 | $base-line-height: 1.5;
 6 | $baseline: $base-font-size * $base-line-height;
 7 | 
 8 | $body-typeface: Arial, sans-serif;
 9 | $special-typeface: serif;
10 | 
11 | $accent-color: #CD746A;
12 | $dark-text-color: #333;
13 | 
14 | $fixed-layout-width: 960px;
15 | $fluid-layout-width: 85%;
16 | 
17 | body {
18 |     font-family: $body-typeface;
19 |     font-size: $base-font-size;
20 |     line-height: $base-line-height;
21 | }
22 | 
23 | p {
24 |     margin-bottom: $baseline;
25 | 
26 |     a {
27 |         text-decoration: none;
28 |         color: $accent-color;
29 | 
30 |         &:hover {
31 |             color: #fff;
32 |             background-color: $dark-text-color;
33 |         }
34 |     }
35 | }
36 | 
37 | blockquote {
38 |     font-family: $special-typeface;
39 |     font-size: 150%;
40 |     font-style: italic;
41 |     padding: $baseline * 2 $baseline;
42 |     margin: $baseline * 2;
43 | 
44 |     cite {
45 |         a {
46 |             color: $dark-text-color;
47 | 
48 |             &:hover {
49 |                 color: $accent-color;
50 |                 text-decoration: underline;
51 |                 text-transform: uppercase;
52 |             }
53 |         }
54 | 
55 |         &:before {
56 |             content: "- ";
57 |         }
58 |     }
59 | }
60 | 
61 | .container {
62 |     width: $fixed-layout-width;
63 |     margin: 0 auto;
64 | 
65 |     .fluid-layout & {
66 |         width: $fluid-layout-width;
67 |     }
68 | }
69 | 


--------------------------------------------------------------------------------
/day-04/exercise-code/exercise.scss:
--------------------------------------------------------------------------------
 1 | /* Day 4 Exercise
 2 |  *
 3 |  * This is an SCSS file.
 4 |  *
 5 |  * Your assignment is to use variables wherever you see fit to make this code
 6 |  * easier to maintain.
 7 |  *
 8 |  * In the end, compare it with the result from the /exercise-answer folder.
 9 |  * Good luck! */
10 | 
11 | body {
12 |     font-family: Arial, sans-serif;
13 |     font-size: 1em;
14 |     line-height: 1.5;
15 | }
16 | 
17 | p {
18 |     margin-bottom: 1.5em;
19 | 
20 |     a {
21 |         text-decoration: none;
22 |         color: #CD746A;
23 | 
24 |         &:hover {
25 |             color: #fff;
26 |             background-color: #333;
27 |         }
28 |     }
29 | }
30 | 
31 | blockquote {
32 |     font-family: serif;
33 |     font-size: 150%;
34 |     font-style: italic;
35 |     padding: 3em 1.5em;
36 |     margin: 3em;
37 | 
38 |     cite {
39 |         a {
40 |             color: #333;
41 | 
42 |             &:hover {
43 |                 color: #CD746A;
44 |                 text-decoration: underline;
45 |                 text-transform: uppercase;
46 |             }
47 |         }
48 | 
49 |         &:before {
50 |             content: "- ";
51 |         }
52 |     }
53 | }
54 | 
55 | .container {
56 |     width: 960px;
57 |     margin: 0 auto;
58 | 
59 |     .fluid-layout & {
60 |         width: 85%;
61 |     }
62 | }
63 | 


--------------------------------------------------------------------------------
/day-04/tutorial-code/day-4.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |     <head>
  4 |         <meta charset="utf-8">
  5 |         <title>14 Days to Learn Sass - Day 4</title>
  6 | 
  7 |         <link rel="stylesheet" href="styles.css" media="screen">
  8 |     </head>
  9 |     <body class="boxed-layout">
 10 |         <div class="container">
 11 |             <header>
 12 |                 <h1>Project Acme</h1>
 13 |                 <h2>Documentation</h2>
 14 | 
 15 |                 <hr>
 16 |             </header>
 17 | 
 18 |             <nav>
 19 |                 <ul>
 20 |                     <li><a href="#introduction">Introduction</a></li>
 21 |                     <li><a href="#how-to">How to use this document</a></li>
 22 |                     <li><a href="#ch-1">Chapter 1</a></li>
 23 |                     <li><a href="#ch-2">Chapter 2</a></li>
 24 |                     <li><a href="#ch-3">Chapter 3</a></li>
 25 |                     <li><a href="#credits">Credits</a></li>
 26 |                 </ul>
 27 |             </nav>
 28 | 
 29 |             <main>
 30 |                 <section id="introduction">
 31 |                     <header>
 32 |                         <h1>Introduction</h1>
 33 |                     </header>
 34 | 
 35 |                     <hr>
 36 | 
 37 |                     <p>
 38 |                         Grumpy wizards make toxic brew for the evil Queen and Jack. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
 39 | 
 40 |                         <a href="#">He lay on his armour-like back</a>, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.
 41 | 
 42 |                         The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.
 43 |                     </p>
 44 | 
 45 |                     <h2>Subchapter 1</h2>
 46 | 
 47 |                     <p>
 48 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in <a href="#">voluptate</a> velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 49 |                     </p>
 50 | 
 51 |                     <h3>Other type of content</h3>
 52 | 
 53 |                     <p>
 54 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="#">Duis aute irure dolor</a> in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 55 |                     </p>
 56 |                 </section>
 57 | 
 58 |                 <section id="how-to">
 59 |                     <header>
 60 |                         <h1>How to use this document</h1>
 61 |                     </header>
 62 | 
 63 |                     <hr>
 64 | 
 65 |                     <p>
 66 |                         Grumpy wizards make toxic brew for the evil Queen and Jack. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
 67 | 
 68 |                         He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.
 69 | 
 70 |                         The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.
 71 |                     </p>
 72 |                     <p>
 73 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 74 |                     </p>
 75 | 
 76 |                     <pre>
 77 |                         <code>
 78 | &lt;header&gt;
 79 |     &lt;h1&gt;How to use this document&lt;/h1&gt;
 80 | &lt;/header&gt;
 81 |                         </code>
 82 |                     </pre>
 83 |                 </section>
 84 | 
 85 |                 <section id="ch-1">
 86 |                     <header>
 87 |                         <h1>Chapter 1</h1>
 88 |                     </header>
 89 | 
 90 |                     <hr>
 91 | 
 92 |                     <p>
 93 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 94 |                     </p>
 95 |                     <p>
 96 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 97 |                     </p>
 98 |                 </section>
 99 | 
100 |                 <section id="ch-2">
101 |                     <header>
102 |                         <h1>Chapter 2</h1>
103 |                     </header>
104 | 
105 |                     <hr>
106 | 
107 |                     <p>
108 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
109 |                     </p>
110 |                     <p>
111 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
112 |                     </p>
113 |                 </section>
114 | 
115 |                 <section id="ch-3">
116 |                     <header>
117 |                         <h1>Chapter 3</h1>
118 |                     </header>
119 | 
120 |                     <hr>
121 | 
122 |                     <p>
123 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
124 |                     </p>
125 |                     <p>
126 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
127 |                     </p>
128 |                     <p>
129 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
130 |                     </p>
131 |                 </section>
132 | 
133 |                 <section id="credits">
134 |                     <header>
135 |                         <h1>Credits</h1>
136 |                     </header>
137 | 
138 |                     <hr>
139 | 
140 |                     <p>
141 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
142 |                     </p>
143 |                     <p>
144 |                         <strong>Credits go to:</strong>
145 |                     </p>
146 | 
147 |                     <ul>
148 |                         <li>John Doe</li>
149 |                         <li>Jane Doe</li>
150 |                         <li>James Smith</li>
151 |                     </ul>
152 |                 </section>
153 | 
154 |             </main>
155 | 
156 |             <footer>
157 |                 <p>
158 |                     <small>Copyright (c) 2015 ACME All Rights Reserved.</small>
159 |                 </p>
160 |             </footer>
161 |         </div> <!-- end container -->
162 |     </body>
163 | </html>
164 | 


--------------------------------------------------------------------------------
/day-04/tutorial-code/styles.css:
--------------------------------------------------------------------------------
 1 | /* Day 4 - Variables */
 2 | /* General styles */
 3 | * {
 4 |   box-sizing: border-box; }
 5 | 
 6 | body {
 7 |   margin: 0;
 8 |   padding: 0;
 9 |   font-family: Helvetica, Arial, sans-serif;
10 |   font-size: 1.125em;
11 |   line-height: 1.5;
12 |   font-weight: 400;
13 |   -webkit-font-smoothing: antialiased;
14 |   color: #333; }
15 |   body.boxed-layout {
16 |     background-color: #F9F9F9; }
17 | 
18 | p {
19 |   margin-bottom: 1.3em;
20 |   color: #666; }
21 |   p a {
22 |     color: #589ED3; }
23 | 
24 | a {
25 |   text-decoration: none; }
26 |   a:hover {
27 |     text-decoration: underline; }
28 | 
29 | h1,
30 | h2,
31 | h3,
32 | h4 {
33 |   margin: 1.414em 0 .5em;
34 |   font-weight: inherit;
35 |   line-height: 1.2; }
36 | 
37 | h1 {
38 |   margin-top: 0;
39 |   font-size: 3.157em; }
40 | 
41 | h2 {
42 |   font-size: 2.369em; }
43 | 
44 | h3 {
45 |   font-size: 1.777em; }
46 | 
47 | h4 {
48 |   font-size: 1.333em; }
49 | 
50 | small {
51 |   font-size: .75em; }
52 | 
53 | /* Layout specific */
54 | .container {
55 |   width: 90%;
56 |   margin: 0 auto; }
57 |   .boxed-layout .container {
58 |     background-color: #fff;
59 |     padding: 3em;
60 |     border: 1px solid #eaeaea;
61 |     border-width: 0 1px; }
62 |   .container > header h1 {
63 |     font-size: 4em;
64 |     font-weight: 800; }
65 | 
66 | nav {
67 |   padding: 3em 0; }
68 |   nav ul {
69 |     list-style: none;
70 |     padding: 0;
71 |     overflow: hidden; }
72 |     nav ul li {
73 |       float: left; }
74 |       nav ul li a {
75 |         display: inline-block;
76 |         color: #333;
77 |         padding: 1em; }
78 |         nav ul li a:hover {
79 |           text-decoration: none;
80 |           background-color: #eaeaea; }
81 |       nav ul li:after {
82 |         content: "";
83 |         border: 1px dotted #ccc;
84 |         width: 1px;
85 |         height: 100%; }
86 | 


--------------------------------------------------------------------------------
/day-04/tutorial-code/styles.scss:
--------------------------------------------------------------------------------
  1 | /* Day 4 - Variables */
  2 | 
  3 | // Variable
  4 | $text-color: #333;
  5 | $text-font-family: Helvetica, Arial, sans-serif;
  6 | $white: #ffffff;
  7 | $baseline: 1.5em;
  8 | 
  9 | /* General styles */
 10 | * { box-sizing: border-box; }
 11 | 
 12 | body {
 13 |     margin: 0;
 14 |     padding: 0;
 15 |     font-family: $text-font-family;
 16 |     font-size: 1.125em;
 17 |     line-height: 1.5;
 18 |     font-weight: 400;
 19 |     -webkit-font-smoothing: antialiased;
 20 |     color: $text-color;
 21 | 
 22 |     &.boxed-layout {
 23 |         background-color: #F9F9F9;
 24 |     }
 25 | }
 26 | 
 27 | p {
 28 |     margin-bottom: 1.3em;
 29 |     color: #666;
 30 | 
 31 |     a {
 32 |         color: #589ED3;
 33 |     }
 34 | }
 35 | 
 36 | a {
 37 |     text-decoration: none;
 38 | 
 39 |     &:hover {
 40 |         text-decoration: underline;
 41 |     }
 42 | }
 43 | 
 44 | h1,
 45 | h2,
 46 | h3,
 47 | h4 {
 48 |     margin: 1.414em 0 .5em;
 49 |     font-weight: inherit;
 50 |     line-height: 1.2;
 51 | }
 52 | 
 53 | h1 {
 54 |     margin-top: 0;
 55 |     font-size: 3.157em;
 56 | }
 57 | 
 58 | h2 { font-size: 2.369em; }
 59 | 
 60 | h3 { font-size: 1.777em; }
 61 | 
 62 | h4 { font-size: 1.333em; }
 63 | 
 64 | small { font-size: .75em; }
 65 | 
 66 | 
 67 | 
 68 | /* Layout specific */
 69 | .container {
 70 |     width: 90%;
 71 |     margin: 0 auto;
 72 | 
 73 |     .boxed-layout & {
 74 |         // Variable designed inside a selector
 75 |         $border-color: #eaeaea !global;
 76 | 
 77 |         background-color: #fff;
 78 |         padding: $baseline * 2;
 79 |         border: 1px solid $border-color;
 80 |         border-width: 0 1px;
 81 |     }
 82 | 
 83 |     > header {
 84 |         h1 {
 85 |             font-size: 4em;
 86 |             font-weight: 800;
 87 |         }
 88 |     }
 89 | }
 90 | 
 91 | nav {
 92 |     padding: 3em 0;
 93 | 
 94 |     ul {
 95 |         list-style: none;
 96 |         padding: 0;
 97 |         overflow: hidden;
 98 | 
 99 |         li {
100 |             float: left;
101 | 
102 |             a {
103 |                 display: inline-block;
104 | 
105 |                 color: $text-color;
106 |                 padding: 1em;
107 | 
108 |                 &:hover {
109 |                     text-decoration: none;
110 |                     background-color: $border-color;
111 |                 }
112 |             }
113 | 
114 |             &:after {
115 |                 content: "";
116 |                 border: 1px dotted #ccc;
117 |                 width: 1px;
118 |                 height: 100%;
119 |             }
120 |         }
121 |     }
122 | }
123 | 


--------------------------------------------------------------------------------
/day-05/base/styles.scss:
--------------------------------------------------------------------------------
  1 | /* Day 5 - Interpolation */
  2 | 
  3 | // Variables
  4 | $text-color: #333;
  5 | $text-font-family: Helvetica, Arial, sans-serif;
  6 | $white: #ffffff;
  7 | $baseline: 1.5em;
  8 | 
  9 | /* General styles */
 10 | * { box-sizing: border-box; }
 11 | 
 12 | body {
 13 |     margin: 0;
 14 |     padding: 0;
 15 |     font-family: $text-font-family;
 16 |     font-size: 1.125em;
 17 |     line-height: 1.5;
 18 |     font-weight: 400;
 19 |     -webkit-font-smoothing: antialiased;
 20 |     color: $text-color;
 21 | 
 22 |     &.boxed-layout {
 23 |         background-color: #F9F9F9;
 24 |     }
 25 | }
 26 | 
 27 | p {
 28 |     margin-bottom: 1.3em;
 29 |     color: #666;
 30 | 
 31 |     a {
 32 |         color: #589ED3;
 33 |     }
 34 | }
 35 | 
 36 | a {
 37 |     text-decoration: none;
 38 | 
 39 |     &:hover {
 40 |         text-decoration: underline;
 41 |     }
 42 | }
 43 | 
 44 | h1,
 45 | h2,
 46 | h3,
 47 | h4 {
 48 |     margin: 1.414em 0 .5em;
 49 |     font-weight: inherit;
 50 |     line-height: 1.2;
 51 | }
 52 | 
 53 | h1 {
 54 |     margin-top: 0;
 55 |     font-size: 3.157em;
 56 | }
 57 | 
 58 | h2 { font-size: 2.369em; }
 59 | 
 60 | h3 { font-size: 1.777em; }
 61 | 
 62 | h4 { font-size: 1.333em; }
 63 | 
 64 | small { font-size: .75em; }
 65 | 
 66 | blockquote {
 67 |     font-size: 150%;
 68 |     font-style: italic;
 69 | 
 70 |     cite {
 71 |         display: block;
 72 |         font-size: 1rem;
 73 |         font-style: normal;
 74 | 
 75 |         &:before {
 76 |             content: "- ";
 77 |         }
 78 |     }
 79 | }
 80 | 
 81 | 
 82 | 
 83 | /* Layout specific */
 84 | .container {
 85 |     width: 90%;
 86 |     margin: 0 auto;
 87 | 
 88 |     .boxed-layout & {
 89 |         // Variable defined inside a selector
 90 |         $border-color: #eaeaea !global;
 91 | 
 92 |         background-color: $white;
 93 |         padding: $baseline * 2;
 94 |         border: 1px solid $border-color;
 95 |         border-width: 0 1px;
 96 |     }
 97 | 
 98 |     > header {
 99 |         h1 {
100 |             font-size: 4em;
101 |             font-weight: 800;
102 |         }
103 |     }
104 | }
105 | 
106 | nav {
107 |     padding: $baseline * 2 0;
108 | 
109 |     ul {
110 |         list-style: none;
111 |         padding: 0;
112 |         overflow: hidden;
113 | 
114 |         li {
115 |             float: left;
116 | 
117 |             a {
118 |                 display: inline-block;
119 | 
120 |                 color: $text-color;
121 |                 padding: 1em;
122 | 
123 |                 &:hover {
124 |                     text-decoration: none;
125 |                     background-color: $border-color;
126 |                 }
127 |             }
128 | 
129 |             &:after {
130 |                 content: "";
131 |                 border: 1px dotted #ccc;
132 |                 width: 1px;
133 |                 height: 100%;
134 |             }
135 |         }
136 |     }
137 | }
138 | 


--------------------------------------------------------------------------------
/day-05/exercise-answer/answer.scss:
--------------------------------------------------------------------------------
 1 | /* Day 5 Exercise Answer */
 2 | 
 3 | // Variables
 4 | $base-font-family: Helvetica, Arial, sans-serif;
 5 | $base-font-size: 1em;
 6 | $base-line-height: 1.5;
 7 | 
 8 | $color-1: #89C3AB;
 9 | $color-2: #686868;
10 | 
11 | $btn-name-1: "primary";
12 | $btn-name-2: "default";
13 | 
14 | body {
15 |     font: #{$base-font-size}/#{$base-line-height} $base-font-family;
16 | }
17 | 
18 | .btn {
19 |     display: inline-block;
20 |     padding: .5em 1em;
21 | 
22 |     &-#{$btn-name-1} {
23 |         background-color: $color-1;
24 |         color: #fff;
25 |     }
26 | 
27 |     &-#{$btn-name-2} {
28 |         background-color: $color-2;
29 |         color: #fff;
30 |     }
31 | }
32 | 


--------------------------------------------------------------------------------
/day-05/exercise-code/exercise.css:
--------------------------------------------------------------------------------
 1 | /* Day 5 Exercise
 2 |  *
 3 |  * This is a CSS file.
 4 |  *
 5 |  * Your assignment is to create the .scss file that compiles into this. The requirement
 6 |  * is that the button class names, color values, font family, size and line height are all
 7 |  * taken from variables. For this, you can use any kind of knowledge you've gained so far.
 8 |  *
 9 |  * Also, you should use as few Sass code lines as possible (around 22 without blank lines).
10 |  *
11 |  * In the end, compare it with the result from the /exercise-answer folder.
12 |  * Good luck! */
13 | 
14 | body {
15 |     font: 1em/1.5 Helvetica, Arial, sans-serif;
16 | }
17 | 
18 | .btn {
19 |     display: inline-block;
20 |     padding: .5em 1em;
21 | }
22 | 
23 | .btn-primary {
24 |     background-color: #89C3AB;
25 |     color: #fff;
26 | }
27 | 
28 | .btn-default {
29 |     background-color: #686868;
30 |     color: #fff;
31 | }
32 | 


--------------------------------------------------------------------------------
/day-05/tutorial-code/styles.css:
--------------------------------------------------------------------------------
 1 | /* Day 5 - Interpolation */
 2 | /* General styles */
 3 | * {
 4 |   box-sizing: border-box; }
 5 | 
 6 | body {
 7 |   margin: 0;
 8 |   padding: 0;
 9 |   line-height: 1.5;
10 |   font: 400 1.125em/1.5 Helvetica, Arial, sans-serif;
11 |   -webkit-font-smoothing: antialiased;
12 |   color: #333; }
13 |   body.boxed-layout {
14 |     background-color: #F9F9F9; }
15 | 
16 | p {
17 |   margin-bottom: 1.3em;
18 |   color: #666; }
19 |   p a {
20 |     color: #589ED3; }
21 | 
22 | a {
23 |   text-decoration: none; }
24 |   a:hover {
25 |     text-decoration: underline; }
26 | 
27 | h1,
28 | h2,
29 | h3,
30 | h4 {
31 |   margin: 1.414em 0 .5em;
32 |   font-weight: inherit;
33 |   line-height: 1.2; }
34 | 
35 | h1 {
36 |   margin-top: 0;
37 |   font-size: 3.157em; }
38 | 
39 | h2 {
40 |   font-size: 2.369em; }
41 | 
42 | h3 {
43 |   font-size: 1.777em; }
44 | 
45 | h4 {
46 |   font-size: 1.333em; }
47 | 
48 | small {
49 |   font-size: .75em; }
50 | 
51 | blockquote {
52 |   font-size: 150%;
53 |   font-style: italic; }
54 |   blockquote cite {
55 |     display: block;
56 |     font-size: 1rem;
57 |     font-style: normal; }
58 |     blockquote cite:before {
59 |       content: "- Author: "; }
60 | 
61 | /* Layout specific */
62 | .container {
63 |   width: 90%;
64 |   margin: 0 auto; }
65 |   .boxed-layout .container {
66 |     background-color: #ffffff;
67 |     padding: 3em;
68 |     border: 1px solid #eaeaea;
69 |     border-width: 0 1px; }
70 |   .container > header h1 {
71 |     font-size: 4em;
72 |     font-weight: 800; }
73 | 
74 | nav {
75 |   padding: 3em 0; }
76 |   nav ul {
77 |     list-style: none;
78 |     padding: 0;
79 |     overflow: hidden; }
80 |     nav ul li {
81 |       float: left; }
82 |       nav ul li a {
83 |         display: inline-block;
84 |         color: #333;
85 |         padding: 1em; }
86 |         nav ul li a:hover {
87 |           text-decoration: none;
88 |           background-color: #eaeaea; }
89 |       nav ul li:after {
90 |         content: "";
91 |         border: 1px dotted #ccc;
92 |         width: 1px;
93 |         height: 100%; }
94 | 
95 | .sidebar-widget {
96 |   padding: 1.5em; }
97 | 


--------------------------------------------------------------------------------
/day-05/tutorial-code/styles.scss:
--------------------------------------------------------------------------------
  1 | /* Day 5 - Interpolation */
  2 | 
  3 | // Variables
  4 | $text-color: #333;
  5 | $text-font-family: Helvetica, Arial, sans-serif;
  6 | $white: #ffffff;
  7 | $baseline: 1.5em;
  8 | $line-height: 1.5;
  9 | $base-font-size: 1.125em;
 10 | 
 11 | $cite-before: "Author: ";
 12 | 
 13 | /* General styles */
 14 | * { box-sizing: border-box; }
 15 | 
 16 | body {
 17 |     margin: 0;
 18 |     padding: 0;
 19 |     line-height: 1.5;
 20 |     font: 400 #{$base-font-size}/#{$line-height} $text-font-family;
 21 |     -webkit-font-smoothing: antialiased;
 22 |     color: $text-color;
 23 | 
 24 |     &.boxed-layout {
 25 |         background-color: #F9F9F9;
 26 |     }
 27 | }
 28 | 
 29 | p {
 30 |     margin-bottom: 1.3em;
 31 |     color: #666;
 32 | 
 33 |     a {
 34 |         color: #589ED3;
 35 |     }
 36 | }
 37 | 
 38 | a {
 39 |     text-decoration: none;
 40 | 
 41 |     &:hover {
 42 |         text-decoration: underline;
 43 |     }
 44 | }
 45 | 
 46 | h1,
 47 | h2,
 48 | h3,
 49 | h4 {
 50 |     margin: 1.414em 0 .5em;
 51 |     font-weight: inherit;
 52 |     line-height: 1.2;
 53 | }
 54 | 
 55 | h1 {
 56 |     margin-top: 0;
 57 |     font-size: 3.157em;
 58 | }
 59 | 
 60 | h2 { font-size: 2.369em; }
 61 | 
 62 | h3 { font-size: 1.777em; }
 63 | 
 64 | h4 { font-size: 1.333em; }
 65 | 
 66 | small { font-size: .75em; }
 67 | 
 68 | blockquote {
 69 |     font-size: 150%;
 70 |     font-style: italic;
 71 | 
 72 |     cite {
 73 |         display: block;
 74 |         font-size: 1rem;
 75 |         font-style: normal;
 76 | 
 77 |         &:before {
 78 |             content: "- #{$cite-before}";
 79 |         }
 80 |     }
 81 | }
 82 | 
 83 | 
 84 | 
 85 | /* Layout specific */
 86 | .container {
 87 |     width: 90%;
 88 |     margin: 0 auto;
 89 | 
 90 |     .boxed-layout & {
 91 |         // Variable defined inside a selector
 92 |         $border-color: #eaeaea !global;
 93 | 
 94 |         background-color: $white;
 95 |         padding: $baseline * 2;
 96 |         border: 1px solid $border-color;
 97 |         border-width: 0 1px;
 98 |     }
 99 | 
100 |     > header {
101 |         h1 {
102 |             font-size: 4em;
103 |             font-weight: 800;
104 |         }
105 |     }
106 | }
107 | 
108 | nav {
109 |     padding: $baseline * 2 0;
110 | 
111 |     ul {
112 |         list-style: none;
113 |         padding: 0;
114 |         overflow: hidden;
115 | 
116 |         li {
117 |             float: left;
118 | 
119 |             a {
120 |                 display: inline-block;
121 | 
122 |                 color: $text-color;
123 |                 padding: 1em;
124 | 
125 |                 &:hover {
126 |                     text-decoration: none;
127 |                     background-color: $border-color;
128 |                 }
129 |             }
130 | 
131 |             &:after {
132 |                 content: "";
133 |                 border: 1px dotted #ccc;
134 |                 width: 1px;
135 |                 height: 100%;
136 |             }
137 |         }
138 |     }
139 | }
140 | 
141 | // Unrelated simple demo
142 | $child: "widget";
143 | 
144 | .sidebar-#{$child} {
145 |     padding: $baseline;
146 | }
147 | 


--------------------------------------------------------------------------------
/day-06/base/styles.scss:
--------------------------------------------------------------------------------
1 | /* Day 6 - Data types */
2 | 


--------------------------------------------------------------------------------
/day-06/exercise-answer/answer.scss:
--------------------------------------------------------------------------------
 1 | /* Day 6 Exercise Answer */
 2 | 
 3 | $theme-sans: (
 4 |     family: (Arial, sans-serif),
 5 |     size: 1.125em,
 6 |     line-height: 1.5
 7 | );
 8 | 
 9 | $theme-serif: (
10 |     family: (Georgia, serif),
11 |     size: 1.5em,
12 |     line-height: 1.4
13 | );
14 | 
15 | body {
16 |     &.theme-sans {
17 |         // Interpolation also works with SassScript functions
18 |         font: #{map_get($theme-sans, size)}/#{map_get($theme-sans, line-height)} map_get($theme-sans, family);
19 |     }
20 | 
21 |     &.theme-serif {
22 |         // Interpolation also works with SassScript functions
23 |         font: #{map_get($theme-serif, size)}/#{map_get($theme-serif, line-height)} map_get($theme-serif, family);
24 |     }
25 | }
26 | 


--------------------------------------------------------------------------------
/day-06/exercise-code/exercise.scss:
--------------------------------------------------------------------------------
 1 | /* Day 6 Exercise
 2 |  *
 3 |  * Create an .scss file that allows you to change the typography theme of a page
 4 |  * by adding the class of .theme-sans or .theme-serif to the <body> tag.
 5 |  *
 6 |  * The two themes should be easily changeable. The output should be similar to the one below.
 7 |  *
 8 |  * body.theme-sans {
 9 |  *     font: 1.125em/1.5 Arial, sans-serif;
10 |  * }
11 |  * body.theme-serif {
12 |  *     font: 1.5em/1.4 Georgia, serif;
13 |  * }
14 |  *
15 |  * In the end, compare it with the result from the /exercise-answer folder.
16 |  * Good luck! */
17 | 


--------------------------------------------------------------------------------
/day-06/tutorial-code/styles.css:
--------------------------------------------------------------------------------
 1 | /* Day 6 - Data types */
 2 | body {
 3 |   margin: 100px;
 4 |   line-height: 1.5;
 5 |   font-weight: 800;
 6 |   padding: 1%; }
 7 | 
 8 | .container {
 9 |   font-family: "Helvetica", Arial, sans-serif;
10 |   font-weight: bold; }
11 |   .container:before {
12 |     content: "This is a pseudo-element"; }
13 | 
14 | .parent-element {
15 |   padding: 1em; }
16 | 
17 | .btn {
18 |   color: #cccccc;
19 |   background-color: white;
20 |   border-color: rgba(0, 0, 0, 0.5);
21 |   border-top-color: #88c3ab;
22 |   border-bottom-color: blue; }
23 | 
24 | .sidebar {
25 |   padding: 3em;
26 |   margin: 1em 2em 3em 4em;
27 |   font-family: Helvetica, Arial, sans-serif;
28 |   box-shadow: 0 0 3px #999, 10px 10px 20px #555; }
29 | 
30 | body.serif {
31 |   font: 400 15px/1.5 Georgia, serif; }
32 | 
33 | footer {
34 |   background-color: #89C3AB;
35 |   border-color: blue;
36 |   margin: 30px;
37 |   padding: 10px 20px;
38 |   font-family: Arial, sans-serif; }
39 | 


--------------------------------------------------------------------------------
/day-06/tutorial-code/styles.scss:
--------------------------------------------------------------------------------
 1 | /* Day 6 - Data types */
 2 | 
 3 | // Numbers
 4 | body {
 5 |     margin: 100px; // numbers with units
 6 |     line-height: 1.5; // decimal numbers without units
 7 |     font-weight: 800; // whole numbers without units
 8 |     padding: 1%; // percentages
 9 | }
10 | 
11 | 
12 | 
13 | // Strings
14 | .container {
15 |     font-family: "Helvetica", Arial, sans-serif;
16 |     font-weight: bold;
17 | 
18 |     &:before {
19 |         content: "This is a pseudo-element";
20 |     }
21 | }
22 | 
23 | $string: "element";
24 | 
25 | .parent-#{$string} {
26 |     padding: 1em;
27 | }
28 | 
29 | 
30 | 
31 | // Colors
32 | .btn {
33 |     color: #cccccc;
34 |     background-color: rgb(255, 255, 255);
35 |     border-color: rgba(0, 0, 0, .5);
36 |     border-top-color: hsl(155, 33%, 65%);
37 |     border-bottom-color: blue;
38 | }
39 | 
40 | 
41 | 
42 | // Lists
43 | .sidebar {
44 |     padding: 3em;
45 |     margin: 1em 2em 3em 4em;
46 |     font-family: Helvetica, Arial, sans-serif;
47 |     box-shadow: 0 0 3px #999, 10px 10px 20px #555;
48 | }
49 | 
50 | body.serif {
51 |     font: 400 15px/1.5 Georgia, serif;
52 | }
53 | 
54 | 
55 | 
56 | // Maps
57 | $colors: (
58 |     1: #89C3AB,
59 |     2: #636363
60 | );
61 | 
62 | $additional-colors: (
63 |     'color-1': red,
64 |     'color-2': blue
65 | );
66 | 
67 | $margins: (
68 |     tight: 10px 20px,
69 |     compact: 30px,
70 |     large: 5em
71 | );
72 | 
73 | // If the inner lists have the same separator as the outer list, use parantheses
74 | $fonts: (
75 |     option-1: (Arial, sans-serif),
76 |     option-2: (Helvetica, sans-serif)
77 | );
78 | 
79 | footer {
80 |     background-color: map-get($colors, 1);
81 |     border-color: map-get($additional-colors, 'color-2');
82 |     margin: map-get($margins, compact);
83 |     padding: map-get($margins, tight);
84 |     font-family: map-get($fonts, option-1);
85 | }
86 | 


--------------------------------------------------------------------------------
/day-07/base/styles.scss:
--------------------------------------------------------------------------------
1 | /* Day 7 - Operations */
2 | 


--------------------------------------------------------------------------------
/day-07/exercise-answer/answer.scss:
--------------------------------------------------------------------------------
 1 | /* Day 7 Exercise Answer */
 2 | 
 3 | $settings: (
 4 |     main-font: Helvetica,
 5 |     fallback-font: (Arial, sans-serif),
 6 |     font-size: 1em,
 7 |     line-height: 1.5,
 8 |     text-color: #999,
 9 |     cite-before: "- ",
10 |     small-text-multiplier: .75,
11 |     large-text-multiplier: 2
12 | );
13 | 
14 | $baseline: map-get($settings, font-size) * map-get($settings, line-height);
15 | 
16 | body {
17 |     font: #{map-get($settings, font-size)}/#{map-get($settings, line-height)} map-get($settings, main-font) + ", " + map-get($settings, fallback-font);
18 |     color: map-get($settings, text-color);
19 | }
20 | 
21 | .large-text {
22 |     font-size: 100% * map-get($settings, large-text-multiplier);
23 | }
24 | 
25 | .small-text {
26 |     font-size: 100% * map-get($settings, small-text-multiplier);
27 | }
28 | 
29 | blockquote {
30 |     padding: $baseline;
31 |     margin: $baseline + $baseline;
32 | 
33 |     cite {
34 |         &:before {
35 |             content: map-get($settings, cite-before);
36 |         }
37 |     }
38 | }
39 | 


--------------------------------------------------------------------------------
/day-07/exercise-code/exercise.css:
--------------------------------------------------------------------------------
 1 | /* Day 7 Exercise
 2 |  *
 3 |  * This is a CSS file.
 4 |  *
 5 |  * Your assignment is to write the corresponding .scss file while respecting a few rules:
 6 |  *
 7 |  * 1. You're not allowed to use any number or string inside the property value. You can
 8 |  * only use the value of 100%, the function map-get(); and any kind of operations you might see fit.
 9 |  * 2. All the values are to be retrieved from a map.
10 |  *
11 |  * In the end, compare it with the result from the /exercise-answer folder.
12 |  * Good luck! */
13 | 
14 | body {
15 |     font: 1em/1.5 Helvetica, Arial, sans-serif;
16 |     color: #999;
17 | }
18 | 
19 | .large-text {
20 |     font-size: 200%;
21 | }
22 | 
23 | .small-text {
24 |     font-size: 75%;
25 | }
26 | 
27 | blockquote {
28 |     padding: 1.5em;
29 |     margin: 3em;
30 | }
31 | blockquote cite:before {
32 |     content: "- ";
33 | }
34 | 


--------------------------------------------------------------------------------
/day-07/tutorial-code/styles.css:
--------------------------------------------------------------------------------
 1 | /* Day 7 - Operations */
 2 | body {
 3 |   margin: 30px;
 4 |   padding: 40px;
 5 |   font-size: 29px; }
 6 | 
 7 | .container {
 8 |   font: 20px/1.5;
 9 |   margin-bottom: 1em;
10 |   margin-top: 1em;
11 |   padding: 20px;
12 |   margin-right: 10px;
13 |   margin-left: 12px; }
14 |   .container:after {
15 |     content: false; }
16 | 
17 | .button {
18 |   font-family: sans-serif;
19 |   font-family: "sans-serif"; }
20 |   .button:before {
21 |     content: "ClickMe"; }
22 |   .button:after {
23 |     content: "This is a default button with a width of 115px."; }
24 | 


--------------------------------------------------------------------------------
/day-07/tutorial-code/styles.scss:
--------------------------------------------------------------------------------
 1 | /* Day 7 - Operations */
 2 | 
 3 | // Number operations
 4 | body {
 5 |     margin: 10px + 20px;
 6 |     padding: 20px * 2;
 7 |     font-size: 39px - 10px;
 8 | }
 9 | 
10 | .container {
11 |     font: 20px/1.5;
12 | 
13 |     $baseline: 2em;
14 | 
15 |     margin-bottom: $baseline / 2;
16 |     margin-top: (2em / 2);
17 | 
18 |     padding: 10px + 20px / 2;
19 | 
20 |     &:after {
21 |         content: 10px > 20px;
22 |     }
23 | 
24 |     margin-right: 1px + 3px * 3;
25 |     margin-left: (1px + 3px) * 3;
26 | }
27 | 
28 | 
29 | 
30 | // String operations
31 | .button {
32 |     font-family: sans + "-serif";
33 |     font-family: "sans" + -serif;
34 | 
35 |     &:before {
36 |         content: "Click" + "Me";
37 |     }
38 | 
39 |     &:after {
40 |         $content: "default";
41 | 
42 |         content: "This is a #{$content} button with a width of #{5 * 23}px.";
43 |     }
44 | }
45 | 


--------------------------------------------------------------------------------
/day-08/base/day-8.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |     <head>
  4 |         <meta charset="utf-8">
  5 |         <title>14 Days to Learn Sass - Day 8</title>
  6 | 
  7 |         <link rel="stylesheet" href="styles.css" media="screen">
  8 |     </head>
  9 |     <body class="boxed-layout">
 10 |         <div class="container">
 11 |             <header>
 12 |                 <h1>Project Acme</h1>
 13 |                 <h2>Documentation</h2>
 14 | 
 15 |                 <hr>
 16 |             </header>
 17 | 
 18 |             <nav>
 19 |                 <ul>
 20 |                     <li><a href="#introduction">Introduction</a></li>
 21 |                     <li><a href="#how-to">How to use this document</a></li>
 22 |                     <li><a href="#ch-1">Chapter 1</a></li>
 23 |                     <li><a href="#ch-2">Chapter 2</a></li>
 24 |                     <li><a href="#ch-3">Chapter 3</a></li>
 25 |                     <li><a href="#credits">Credits</a></li>
 26 |                 </ul>
 27 |             </nav>
 28 | 
 29 |             <main>
 30 |                 <section id="introduction">
 31 |                     <header>
 32 |                         <h1>Introduction</h1>
 33 |                     </header>
 34 | 
 35 |                     <hr>
 36 | 
 37 |                     <p>
 38 |                         Grumpy wizards make toxic brew for the evil Queen and Jack. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
 39 | 
 40 |                         <a href="#">He lay on his armour-like back</a>, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.
 41 | 
 42 |                         The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.
 43 |                     </p>
 44 | 
 45 |                     <blockquote>
 46 |                         Wow, this is great stuff. Love it!
 47 | 
 48 |                         <cite>Adi, Envato</cite>
 49 |                     </blockquote>
 50 | 
 51 |                     <h2>Subchapter 1</h2>
 52 | 
 53 |                     <p>
 54 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in <a href="#">voluptate</a> velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 55 |                     </p>
 56 | 
 57 |                     <h3>Other type of content</h3>
 58 | 
 59 |                     <p>
 60 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="#">Duis aute irure dolor</a> in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 61 |                     </p>
 62 |                 </section>
 63 | 
 64 |                 <section id="how-to">
 65 |                     <header>
 66 |                         <h1>How to use this document</h1>
 67 |                     </header>
 68 | 
 69 |                     <hr>
 70 | 
 71 |                     <p>
 72 |                         Grumpy wizards make toxic brew for the evil Queen and Jack. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
 73 | 
 74 |                         He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.
 75 | 
 76 |                         The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.
 77 |                     </p>
 78 |                     <p>
 79 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 80 |                     </p>
 81 | 
 82 |                     <pre>
 83 |                         <code>
 84 | &lt;header&gt;
 85 |     &lt;h1&gt;How to use this document&lt;/h1&gt;
 86 | &lt;/header&gt;
 87 |                         </code>
 88 |                     </pre>
 89 |                 </section>
 90 | 
 91 |                 <section id="ch-1">
 92 |                     <header>
 93 |                         <h1>Chapter 1</h1>
 94 |                     </header>
 95 | 
 96 |                     <hr>
 97 | 
 98 |                     <p>
 99 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
100 |                     </p>
101 |                     <p>
102 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
103 |                     </p>
104 |                 </section>
105 | 
106 |                 <section id="ch-2">
107 |                     <header>
108 |                         <h1>Chapter 2</h1>
109 |                     </header>
110 | 
111 |                     <hr>
112 | 
113 |                     <p>
114 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
115 |                     </p>
116 |                     <p>
117 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
118 |                     </p>
119 |                 </section>
120 | 
121 |                 <section id="ch-3">
122 |                     <header>
123 |                         <h1>Chapter 3</h1>
124 |                     </header>
125 | 
126 |                     <hr>
127 | 
128 |                     <p>
129 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
130 |                     </p>
131 |                     <p>
132 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
133 |                     </p>
134 |                     <p>
135 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
136 |                     </p>
137 |                 </section>
138 | 
139 |                 <section id="credits">
140 |                     <header>
141 |                         <h1>Credits</h1>
142 |                     </header>
143 | 
144 |                     <hr>
145 | 
146 |                     <p>
147 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
148 |                     </p>
149 |                     <p>
150 |                         <strong>Credits go to:</strong>
151 |                     </p>
152 | 
153 |                     <ul>
154 |                         <li>John Doe</li>
155 |                         <li>Jane Doe</li>
156 |                         <li>James Smith</li>
157 |                     </ul>
158 |                 </section>
159 | 
160 |             </main>
161 | 
162 |             <footer>
163 |                 <p>
164 |                     <small>Copyright (c) 2015 ACME All Rights Reserved.</small>
165 |                 </p>
166 |             </footer>
167 |         </div> <!-- end container -->
168 |     </body>
169 | </html>
170 | 


--------------------------------------------------------------------------------
/day-08/base/dummy.css:
--------------------------------------------------------------------------------
 1 | /* Hey, this is a dummy CSS file. */
 2 | 
 3 | .row { clear: both; }
 4 | 
 5 | .col-left {
 6 |     float: left;
 7 |     width: 60%;
 8 | }
 9 | 
10 | .col-right {
11 |     float: right;
12 |     width: 40%;
13 | }
14 | 


--------------------------------------------------------------------------------
/day-08/base/styles.scss:
--------------------------------------------------------------------------------
  1 | /* Day 8 - @import directive */
  2 | 
  3 | // Variables
  4 | $text-color: #333;
  5 | $text-font-family: Helvetica, Arial, sans-serif;
  6 | $white: #ffffff;
  7 | $baseline: 1.5em;
  8 | $line-height: 1.5;
  9 | $base-font-size: 1.125em;
 10 | 
 11 | $cite-before: "Author: ";
 12 | 
 13 | /* General styles */
 14 | * { box-sizing: border-box; }
 15 | 
 16 | body {
 17 |     margin: 0;
 18 |     padding: 0;
 19 |     font: #{$base-font-size}/#{$line-height} $text-font-family;
 20 |     font-weight: 400;
 21 |     -webkit-font-smoothing: antialiased;
 22 |     color: $text-color;
 23 | 
 24 |     &.boxed-layout {
 25 |         background-color: #F9F9F9;
 26 |     }
 27 | }
 28 | 
 29 | p {
 30 |     margin-bottom: 1.3em;
 31 |     color: #666;
 32 | 
 33 |     a {
 34 |         color: #589ED3;
 35 |     }
 36 | }
 37 | 
 38 | a {
 39 |     text-decoration: none;
 40 | 
 41 |     &:hover {
 42 |         text-decoration: underline;
 43 |     }
 44 | }
 45 | 
 46 | h1,
 47 | h2,
 48 | h3,
 49 | h4 {
 50 |     margin: 1.414em 0 .5em;
 51 |     font-weight: inherit;
 52 |     line-height: 1.2;
 53 | }
 54 | 
 55 | h1 {
 56 |     margin-top: 0;
 57 |     font-size: 3.157em;
 58 | }
 59 | 
 60 | h2 { font-size: 2.369em; }
 61 | 
 62 | h3 { font-size: 1.777em; }
 63 | 
 64 | h4 { font-size: 1.333em; }
 65 | 
 66 | small { font-size: .75em; }
 67 | 
 68 | blockquote {
 69 |     font-size: 150%;
 70 |     font-style: italic;
 71 | 
 72 |     cite {
 73 |         display: block;
 74 |         font-size: 1rem;
 75 |         font-style: normal;
 76 | 
 77 |         &:before {
 78 |             content: "- #{$cite-before}";
 79 |             // content: "- " + $cite-before; -- also works
 80 |         }
 81 |     }
 82 | }
 83 | 
 84 | 
 85 | 
 86 | /* Layout specific */
 87 | .container {
 88 |     width: 90%;
 89 |     margin: 0 auto;
 90 | 
 91 |     .boxed-layout & {
 92 |         // Variable defined inside a selector
 93 |         $border-color: #eaeaea !global;
 94 | 
 95 |         background-color: $white;
 96 |         padding: $baseline * 2;
 97 |         border: 1px solid $border-color;
 98 |         border-width: 0 1px;
 99 |     }
100 | 
101 |     > header {
102 |         h1 {
103 |             font-size: 4em;
104 |             font-weight: 800;
105 |         }
106 |     }
107 | }
108 | 
109 | nav {
110 |     padding: $baseline * 2 0;
111 | 
112 |     ul {
113 |         list-style: none;
114 |         padding: 0;
115 |         overflow: hidden;
116 | 
117 |         li {
118 |             float: left;
119 | 
120 |             a {
121 |                 display: inline-block;
122 | 
123 |                 color: $text-color;
124 |                 padding: 1em;
125 | 
126 |                 &:hover {
127 |                     text-decoration: none;
128 |                     background-color: $border-color;
129 |                 }
130 |             }
131 | 
132 |             &:after {
133 |                 content: "";
134 |                 border: 1px dotted #ccc;
135 |                 width: 1px;
136 |                 height: 100%;
137 |             }
138 |         }
139 |     }
140 | }
141 | 


--------------------------------------------------------------------------------
/day-08/exercise-answer/answer.scss:
--------------------------------------------------------------------------------
 1 | /* Day 8 Exercise Answer */
 2 | 
 3 | /*** QUESTION 1 ***/
 4 | /*** The following two imports have the same result. True or false? ***/
 5 | @import "typography.scss";
 6 | @import "typography";
 7 | 
 8 | /*** True ***/
 9 | 
10 | 
11 | 
12 | /*** QUESTION 2 ***/
13 | /*** Will the following Sass @import create a CSS @import? Answer with Yes or No. ***/
14 | @import "typography" screen;
15 | 
16 | /*** Yes ***/
17 | 
18 | 
19 | 
20 | /*** QUESTION 3 ***/
21 | /*** Is the following @import correct? Answer with Yes or No. ***/
22 | @import "reset.sass", "settings/variables";
23 | 
24 | /*** Yes ***/
25 | 
26 | 
27 | 
28 | /*** QUESTION 4 ***/
29 | /*** This statement will import the contents of "reset.scss" correctly. True of false? ***/
30 | @import url("reset.scss");
31 | 
32 | /*** False ***/
33 | 
34 | 
35 | 
36 | /*** QUESTION 5 ***/
37 | /*** The following statements will generate two separate CSS files. True or false? ***/
38 | @import "reset.scss";
39 | @import "typography";
40 | 
41 | /*** False ***/
42 | 


--------------------------------------------------------------------------------
/day-08/exercise-code/exercise.scss:
--------------------------------------------------------------------------------
 1 | /* Day 8 Exercise
 2 |  *
 3 |  * This is an .scss file.
 4 |  *
 5 |  * Your assignment is to answer the questions below and typing your answer in the
 6 |  * designated commented area.
 7 |  *
 8 |  * In the end, compare it with the result from the /exercise-answer folder.
 9 |  * Good luck! */
10 | 
11 | /*** QUESTION 1 ***/
12 | /*** The following two imports have the same result. True or false? ***/
13 | @import "typography.scss";
14 | @import "typography";
15 | 
16 | /*** Type your answer here ***/
17 | 
18 | 
19 | 
20 | /*** QUESTION 2 ***/
21 | /*** Will the following Sass @import create a CSS @import? Answer with Yes or No. ***/
22 | @import "typography" screen;
23 | 
24 | /*** Type your answer here ***/
25 | 
26 | 
27 | 
28 | /*** QUESTION 3 ***/
29 | /*** Is the following @import correct? Answer with Yes or No. ***/
30 | @import "reset.sass", "settings/variables";
31 | 
32 | /*** Type your answer here ***/
33 | 
34 | 
35 | 
36 | /*** QUESTION 4 ***/
37 | /*** This statement will import the contents of "reset.scss" correctly. True of false? ***/
38 | @import url("reset.scss");
39 | 
40 | /*** Type your answer here ***/
41 | 
42 | 
43 | 
44 | /*** QUESTION 5 ***/
45 | /*** The following statements will generate two separate CSS files. True or false? ***/
46 | @import "reset.scss";
47 | @import "typography";
48 | 
49 | /*** Type your answer here ***/
50 | 


--------------------------------------------------------------------------------
/day-08/tutorial-code/day-8.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |     <head>
  4 |         <meta charset="utf-8">
  5 |         <title>14 Days to Learn Sass - Day 8</title>
  6 | 
  7 |         <link rel="stylesheet" href="styles.css" media="screen">
  8 |     </head>
  9 |     <body class="boxed-layout">
 10 |         <div class="container">
 11 |             <header>
 12 |                 <h1>Project Acme</h1>
 13 |                 <h2>Documentation</h2>
 14 | 
 15 |                 <hr>
 16 |             </header>
 17 | 
 18 |             <nav>
 19 |                 <ul>
 20 |                     <li><a href="#introduction">Introduction</a></li>
 21 |                     <li><a href="#how-to">How to use this document</a></li>
 22 |                     <li><a href="#ch-1">Chapter 1</a></li>
 23 |                     <li><a href="#ch-2">Chapter 2</a></li>
 24 |                     <li><a href="#ch-3">Chapter 3</a></li>
 25 |                     <li><a href="#credits">Credits</a></li>
 26 |                 </ul>
 27 |             </nav>
 28 | 
 29 |             <main>
 30 |                 <section id="introduction">
 31 |                     <header>
 32 |                         <h1>Introduction</h1>
 33 |                     </header>
 34 | 
 35 |                     <hr>
 36 | 
 37 |                     <p>
 38 |                         Grumpy wizards make toxic brew for the evil Queen and Jack. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
 39 | 
 40 |                         <a href="#">He lay on his armour-like back</a>, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.
 41 | 
 42 |                         The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.
 43 |                     </p>
 44 | 
 45 |                     <blockquote>
 46 |                         Wow, this is great stuff. Love it!
 47 | 
 48 |                         <cite>Adi, Envato</cite>
 49 |                     </blockquote>
 50 | 
 51 |                     <h2>Subchapter 1</h2>
 52 | 
 53 |                     <p>
 54 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in <a href="#">voluptate</a> velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 55 |                     </p>
 56 | 
 57 |                     <h3>Other type of content</h3>
 58 | 
 59 |                     <p>
 60 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="#">Duis aute irure dolor</a> in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 61 |                     </p>
 62 |                 </section>
 63 | 
 64 |                 <section id="how-to">
 65 |                     <header>
 66 |                         <h1>How to use this document</h1>
 67 |                     </header>
 68 | 
 69 |                     <hr>
 70 | 
 71 |                     <p>
 72 |                         Grumpy wizards make toxic brew for the evil Queen and Jack. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
 73 | 
 74 |                         He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.
 75 | 
 76 |                         The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.
 77 |                     </p>
 78 |                     <p>
 79 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 80 |                     </p>
 81 | 
 82 |                     <pre>
 83 |                         <code>
 84 | &lt;header&gt;
 85 |     &lt;h1&gt;How to use this document&lt;/h1&gt;
 86 | &lt;/header&gt;
 87 |                         </code>
 88 |                     </pre>
 89 |                 </section>
 90 | 
 91 |                 <section id="ch-1">
 92 |                     <header>
 93 |                         <h1>Chapter 1</h1>
 94 |                     </header>
 95 | 
 96 |                     <hr>
 97 | 
 98 |                     <p>
 99 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
100 |                     </p>
101 |                     <p>
102 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
103 |                     </p>
104 |                 </section>
105 | 
106 |                 <section id="ch-2">
107 |                     <header>
108 |                         <h1>Chapter 2</h1>
109 |                     </header>
110 | 
111 |                     <hr>
112 | 
113 |                     <p>
114 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
115 |                     </p>
116 |                     <p>
117 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
118 |                     </p>
119 |                 </section>
120 | 
121 |                 <section id="ch-3">
122 |                     <header>
123 |                         <h1>Chapter 3</h1>
124 |                     </header>
125 | 
126 |                     <hr>
127 | 
128 |                     <p>
129 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
130 |                     </p>
131 |                     <p>
132 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
133 |                     </p>
134 |                     <p>
135 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
136 |                     </p>
137 |                 </section>
138 | 
139 |                 <section id="credits">
140 |                     <header>
141 |                         <h1>Credits</h1>
142 |                     </header>
143 | 
144 |                     <hr>
145 | 
146 |                     <p>
147 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
148 |                     </p>
149 |                     <p>
150 |                         <strong>Credits go to:</strong>
151 |                     </p>
152 | 
153 |                     <ul>
154 |                         <li>John Doe</li>
155 |                         <li>Jane Doe</li>
156 |                         <li>James Smith</li>
157 |                     </ul>
158 |                 </section>
159 | 
160 |             </main>
161 | 
162 |             <footer>
163 |                 <p>
164 |                     <small>Copyright (c) 2015 ACME All Rights Reserved.</small>
165 |                 </p>
166 |             </footer>
167 |         </div> <!-- end container -->
168 |     </body>
169 | </html>
170 | 


--------------------------------------------------------------------------------
/day-08/tutorial-code/dummy.css:
--------------------------------------------------------------------------------
 1 | /* Hey, this is a dummy CSS file. */
 2 | 
 3 | .row { clear: both; }
 4 | 
 5 | .col-left {
 6 |     float: left;
 7 |     width: 60%;
 8 | }
 9 | 
10 | .col-right {
11 |     float: right;
12 |     width: 40%;
13 | }
14 | 


--------------------------------------------------------------------------------
/day-08/tutorial-code/general/general.css:
--------------------------------------------------------------------------------
 1 | /*
 2 | Error: Undefined variable: "$base-font-size".
 3 |         on line 7 of tutorial-code/general/general.scss
 4 | 
 5 | 2: * { box-sizing: border-box; }
 6 | 3: 
 7 | 4: body {
 8 | 5:     margin: 0;
 9 | 6:     padding: 0;
10 | 7:     font: #{$base-font-size}/#{$line-height} $text-font-family;
11 | 8:     font-weight: 400;
12 | 9:     -webkit-font-smoothing: antialiased;
13 | 10:     color: $text-color;
14 | 11: 
15 | 12:     &.boxed-layout {
16 | 
17 | Backtrace:
18 | tutorial-code/general/general.scss:7
19 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/script/tree/variable.rb:49:in `_perform'
20 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/script/tree/node.rb:50:in `perform'
21 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/script/tree/interpolation.rb:100:in `_perform'
22 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/script/tree/node.rb:50:in `perform'
23 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/tree/visitors/perform.rb:394:in `visit_prop'
24 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/tree/visitors/base.rb:36:in `visit'
25 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/tree/visitors/perform.rb:158:in `block in visit'
26 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/stack.rb:79:in `block in with_base'
27 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/stack.rb:115:in `with_frame'
28 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/stack.rb:79:in `with_base'
29 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/tree/visitors/perform.rb:158:in `visit'
30 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/tree/visitors/perform.rb:430:in `block (2 levels) in visit_rule'
31 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/tree/visitors/perform.rb:430:in `map'
32 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/tree/visitors/perform.rb:430:in `block in visit_rule'
33 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/tree/visitors/perform.rb:179:in `with_environment'
34 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/tree/visitors/perform.rb:428:in `visit_rule'
35 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/tree/visitors/base.rb:36:in `visit'
36 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/tree/visitors/perform.rb:158:in `block in visit'
37 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/stack.rb:79:in `block in with_base'
38 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/stack.rb:115:in `with_frame'
39 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/stack.rb:79:in `with_base'
40 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/tree/visitors/perform.rb:158:in `visit'
41 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/tree/visitors/base.rb:52:in `block in visit_children'
42 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/tree/visitors/base.rb:52:in `map'
43 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/tree/visitors/base.rb:52:in `visit_children'
44 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/tree/visitors/perform.rb:167:in `block in visit_children'
45 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/tree/visitors/perform.rb:179:in `with_environment'
46 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/tree/visitors/perform.rb:166:in `visit_children'
47 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/tree/visitors/base.rb:36:in `block in visit'
48 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/tree/visitors/perform.rb:186:in `visit_root'
49 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/tree/visitors/base.rb:36:in `visit'
50 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/tree/visitors/perform.rb:157:in `visit'
51 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/tree/visitors/perform.rb:8:in `visit'
52 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/tree/root_node.rb:36:in `css_tree'
53 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/tree/root_node.rb:20:in `render'
54 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/engine.rb:268:in `render'
55 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/plugin/compiler.rb:492:in `update_stylesheet'
56 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/plugin/compiler.rb:215:in `block in update_stylesheets'
57 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/plugin/compiler.rb:209:in `each'
58 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/plugin/compiler.rb:209:in `update_stylesheets'
59 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/plugin/compiler.rb:470:in `on_file_changed'
60 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/lib/sass/plugin/compiler.rb:328:in `block in watch'
61 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/vendor/listen/lib/listen/listener.rb:252:in `call'
62 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/vendor/listen/lib/listen/listener.rb:252:in `on_change'
63 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/vendor/listen/lib/listen/listener.rb:290:in `block in initialize_adapter'
64 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/vendor/listen/lib/listen/adapter.rb:254:in `call'
65 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/vendor/listen/lib/listen/adapter.rb:254:in `report_changes'
66 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/vendor/listen/lib/listen/adapter.rb:323:in `poll_changed_directories'
67 | /Library/Ruby/Gems/2.0.0/gems/sass-3.4.14/vendor/listen/lib/listen/adapter.rb:299:in `block in start_poller'
68 | */
69 | body:before {
70 |   white-space: pre;
71 |   font-family: monospace;
72 |   content: "Error: Undefined variable: \"$base-font-size\".\A         on line 7 of tutorial-code/general/general.scss\A \A 2: * { box-sizing: border-box; }\A 3: \A 4: body {\A 5:     margin: 0;\A 6:     padding: 0;\A 7:     font: #{$base-font-size}/#{$line-height} $text-font-family;\A 8:     font-weight: 400;\A 9:     -webkit-font-smoothing: antialiased;\A 10:     color: $text-color;\A 11: \A 12:     &.boxed-layout {"; }
73 | 


--------------------------------------------------------------------------------
/day-08/tutorial-code/general/general.scss:
--------------------------------------------------------------------------------
 1 | /* General styles */
 2 | * { box-sizing: border-box; }
 3 | 
 4 | body {
 5 |     margin: 0;
 6 |     padding: 0;
 7 |     font: #{$base-font-size}/#{$line-height} $text-font-family;
 8 |     font-weight: 400;
 9 |     -webkit-font-smoothing: antialiased;
10 |     color: $text-color;
11 | 
12 |     &.boxed-layout {
13 |         background-color: #F9F9F9;
14 |     }
15 | }
16 | 
17 | p {
18 |     margin-bottom: 1.3em;
19 |     color: #666;
20 | 
21 |     a {
22 |         color: #589ED3;
23 |     }
24 | }
25 | 
26 | a {
27 |     text-decoration: none;
28 | 
29 |     &:hover {
30 |         text-decoration: underline;
31 |     }
32 | }
33 | 
34 | h1,
35 | h2,
36 | h3,
37 | h4 {
38 |     margin: 1.414em 0 .5em;
39 |     font-weight: inherit;
40 |     line-height: 1.2;
41 | }
42 | 
43 | h1 {
44 |     margin-top: 0;
45 |     font-size: 3.157em;
46 | }
47 | 
48 | h2 { font-size: 2.369em; }
49 | 
50 | h3 { font-size: 1.777em; }
51 | 
52 | h4 { font-size: 1.333em; }
53 | 
54 | small { font-size: .75em; }
55 | 
56 | blockquote {
57 |     font-size: 150%;
58 |     font-style: italic;
59 | 
60 |     cite {
61 |         display: block;
62 |         font-size: 1rem;
63 |         font-style: normal;
64 | 
65 |         &:before {
66 |             content: "- #{$cite-before}";
67 |             // content: "- " + $cite-before; -- also works
68 |         }
69 |     }
70 | }
71 | 


--------------------------------------------------------------------------------
/day-08/tutorial-code/layout.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tutsplus/14-days-to-learn-sass/10dc8e7c3d8729ae87aff2f9f4ccaa67d4491fdc/day-08/tutorial-code/layout.css


--------------------------------------------------------------------------------
/day-08/tutorial-code/layout.scss:
--------------------------------------------------------------------------------
 1 | /* Layout specific */
 2 | .container {
 3 |     width: 90%;
 4 |     margin: 0 auto;
 5 | 
 6 |     .boxed-layout & {
 7 |         // Variable defined inside a selector
 8 |         $border-color: #eaeaea !global;
 9 | 
10 |         background-color: $white;
11 |         padding: $baseline * 2;
12 |         border: 1px solid $border-color;
13 |         border-width: 0 1px;
14 |     }
15 | 
16 |     > header {
17 |         h1 {
18 |             font-size: 4em;
19 |             font-weight: 800;
20 |         }
21 |     }
22 | }
23 | 
24 | nav {
25 |     padding: $baseline * 2 0;
26 | 
27 |     ul {
28 |         list-style: none;
29 |         padding: 0;
30 |         overflow: hidden;
31 | 
32 |         li {
33 |             float: left;
34 | 
35 |             a {
36 |                 display: inline-block;
37 | 
38 |                 color: $text-color;
39 |                 padding: 1em;
40 | 
41 |                 &:hover {
42 |                     text-decoration: none;
43 |                     background-color: $border-color;
44 |                 }
45 |             }
46 | 
47 |             &:after {
48 |                 content: "";
49 |                 border: 1px dotted #ccc;
50 |                 width: 1px;
51 |                 height: 100%;
52 |             }
53 |         }
54 |     }
55 | }
56 | 


--------------------------------------------------------------------------------
/day-08/tutorial-code/styles.css:
--------------------------------------------------------------------------------
 1 | /* Day 8 - @import directive */
 2 | /* General styles */
 3 | @import url(dummy.css);
 4 | @import url("http://fonts.googleapis.com/css?family=Oswald");
 5 | @import "layout" print;
 6 | @import "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css";
 7 | * {
 8 |   box-sizing: border-box; }
 9 | 
10 | body {
11 |   margin: 0;
12 |   padding: 0;
13 |   font: 1.125em/1.5 Helvetica, Arial, sans-serif;
14 |   font-weight: 400;
15 |   -webkit-font-smoothing: antialiased;
16 |   color: #333; }
17 |   body.boxed-layout {
18 |     background-color: #F9F9F9; }
19 | 
20 | p {
21 |   margin-bottom: 1.3em;
22 |   color: #666; }
23 |   p a {
24 |     color: #589ED3; }
25 | 
26 | a {
27 |   text-decoration: none; }
28 |   a:hover {
29 |     text-decoration: underline; }
30 | 
31 | h1,
32 | h2,
33 | h3,
34 | h4 {
35 |   margin: 1.414em 0 .5em;
36 |   font-weight: inherit;
37 |   line-height: 1.2; }
38 | 
39 | h1 {
40 |   margin-top: 0;
41 |   font-size: 3.157em; }
42 | 
43 | h2 {
44 |   font-size: 2.369em; }
45 | 
46 | h3 {
47 |   font-size: 1.777em; }
48 | 
49 | h4 {
50 |   font-size: 1.333em; }
51 | 
52 | small {
53 |   font-size: .75em; }
54 | 
55 | blockquote {
56 |   font-size: 150%;
57 |   font-style: italic; }
58 |   blockquote cite {
59 |     display: block;
60 |     font-size: 1rem;
61 |     font-style: normal; }
62 |     blockquote cite:before {
63 |       content: "- Author: "; }
64 | 
65 | /* Layout specific */
66 | .container {
67 |   width: 90%;
68 |   margin: 0 auto; }
69 |   .boxed-layout .container {
70 |     background-color: #ffffff;
71 |     padding: 3em;
72 |     border: 1px solid #eaeaea;
73 |     border-width: 0 1px; }
74 |   .container > header h1 {
75 |     font-size: 4em;
76 |     font-weight: 800; }
77 | 
78 | nav {
79 |   padding: 3em 0; }
80 |   nav ul {
81 |     list-style: none;
82 |     padding: 0;
83 |     overflow: hidden; }
84 |     nav ul li {
85 |       float: left; }
86 |       nav ul li a {
87 |         display: inline-block;
88 |         color: #333;
89 |         padding: 1em; }
90 |         nav ul li a:hover {
91 |           text-decoration: none;
92 |           background-color: #eaeaea; }
93 |       nav ul li:after {
94 |         content: "";
95 |         border: 1px dotted #ccc;
96 |         width: 1px;
97 |         height: 100%; }
98 | 


--------------------------------------------------------------------------------
/day-08/tutorial-code/styles.scss:
--------------------------------------------------------------------------------
 1 | /* Day 8 - @import directive */
 2 | 
 3 | // Variables
 4 | $text-color: #333;
 5 | $text-font-family: Helvetica, Arial, sans-serif;
 6 | $white: #ffffff;
 7 | $baseline: 1.5em;
 8 | $line-height: 1.5;
 9 | $base-font-size: 1.125em;
10 | 
11 | $cite-before: "Author: ";
12 | 
13 | @import "general/general", "layout";
14 | 
15 | // These will generate CSS @import rules.
16 | @import "dummy.css";
17 | @import url("http://fonts.googleapis.com/css?family=Oswald");
18 | @import "layout" print;
19 | @import "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css";
20 | 


--------------------------------------------------------------------------------
/day-09/base/day-9.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |     <head>
  4 |         <meta charset="utf-8">
  5 |         <title>14 Days to Learn Sass - Day 9</title>
  6 | 
  7 |         <link rel="stylesheet" href="styles.css" media="screen">
  8 |     </head>
  9 |     <body class="boxed-layout">
 10 |         <div class="container">
 11 |             <header>
 12 |                 <h1>Project Acme</h1>
 13 |                 <h2>Documentation</h2>
 14 | 
 15 |                 <hr>
 16 |             </header>
 17 | 
 18 |             <nav>
 19 |                 <ul>
 20 |                     <li><a href="#introduction">Introduction</a></li>
 21 |                     <li><a href="#how-to">How to use this document</a></li>
 22 |                     <li><a href="#ch-1">Chapter 1</a></li>
 23 |                     <li><a href="#ch-2">Chapter 2</a></li>
 24 |                     <li><a href="#ch-3">Chapter 3</a></li>
 25 |                     <li><a href="#credits">Credits</a></li>
 26 |                 </ul>
 27 |             </nav>
 28 | 
 29 |             <main>
 30 |                 <section id="introduction">
 31 |                     <header>
 32 |                         <h1>Introduction</h1>
 33 |                     </header>
 34 | 
 35 |                     <hr>
 36 | 
 37 |                     <p>
 38 |                         Grumpy wizards make toxic brew for the evil Queen and Jack. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
 39 | 
 40 |                         <a href="#">He lay on his armour-like back</a>, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.
 41 | 
 42 |                         The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.
 43 |                     </p>
 44 | 
 45 |                     <blockquote>
 46 |                         Wow, this is great stuff. Love it!
 47 | 
 48 |                         <cite>Adi, Envato</cite>
 49 |                     </blockquote>
 50 | 
 51 |                     <h2>Subchapter 1</h2>
 52 | 
 53 |                     <p>
 54 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in <a href="#">voluptate</a> velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 55 |                     </p>
 56 | 
 57 |                     <h3>Other type of content</h3>
 58 | 
 59 |                     <p>
 60 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="#">Duis aute irure dolor</a> in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 61 |                     </p>
 62 |                 </section>
 63 | 
 64 |                 <section id="how-to">
 65 |                     <header>
 66 |                         <h1>How to use this document</h1>
 67 |                     </header>
 68 | 
 69 |                     <hr>
 70 | 
 71 |                     <p>
 72 |                         Grumpy wizards make toxic brew for the evil Queen and Jack. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
 73 | 
 74 |                         He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.
 75 | 
 76 |                         The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.
 77 |                     </p>
 78 |                     <p>
 79 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 80 |                     </p>
 81 | 
 82 |                     <pre>
 83 |                         <code>
 84 | &lt;header&gt;
 85 |     &lt;h1&gt;How to use this document&lt;/h1&gt;
 86 | &lt;/header&gt;
 87 |                         </code>
 88 |                     </pre>
 89 |                 </section>
 90 | 
 91 |                 <section id="ch-1">
 92 |                     <header>
 93 |                         <h1>Chapter 1</h1>
 94 |                     </header>
 95 | 
 96 |                     <hr>
 97 | 
 98 |                     <p>
 99 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
100 |                     </p>
101 |                     <p>
102 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
103 |                     </p>
104 |                 </section>
105 | 
106 |                 <section id="ch-2">
107 |                     <header>
108 |                         <h1>Chapter 2</h1>
109 |                     </header>
110 | 
111 |                     <hr>
112 | 
113 |                     <p>
114 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
115 |                     </p>
116 |                     <p>
117 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
118 |                     </p>
119 |                 </section>
120 | 
121 |                 <section id="ch-3">
122 |                     <header>
123 |                         <h1>Chapter 3</h1>
124 |                     </header>
125 | 
126 |                     <hr>
127 | 
128 |                     <p>
129 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
130 |                     </p>
131 |                     <p>
132 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
133 |                     </p>
134 |                     <p>
135 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
136 |                     </p>
137 |                 </section>
138 | 
139 |                 <section id="credits">
140 |                     <header>
141 |                         <h1>Credits</h1>
142 |                     </header>
143 | 
144 |                     <hr>
145 | 
146 |                     <p>
147 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
148 |                     </p>
149 |                     <p>
150 |                         <strong>Credits go to:</strong>
151 |                     </p>
152 | 
153 |                     <ul>
154 |                         <li>John Doe</li>
155 |                         <li>Jane Doe</li>
156 |                         <li>James Smith</li>
157 |                     </ul>
158 |                 </section>
159 | 
160 |             </main>
161 | 
162 |             <footer>
163 |                 <p>
164 |                     <small>Copyright (c) 2015 ACME All Rights Reserved.</small>
165 |                 </p>
166 |             </footer>
167 |         </div> <!-- end container -->
168 |     </body>
169 | </html>
170 | 


--------------------------------------------------------------------------------
/day-09/base/general/general.scss:
--------------------------------------------------------------------------------
 1 | /* General styles */
 2 | * { box-sizing: border-box; }
 3 | 
 4 | body {
 5 |     margin: 0;
 6 |     padding: 0;
 7 |     font: #{$base-font-size}/#{$line-height} $text-font-family;
 8 |     font-weight: 400;
 9 |     -webkit-font-smoothing: antialiased;
10 |     color: $text-color;
11 | 
12 |     &.boxed-layout {
13 |         background-color: #F9F9F9;
14 |     }
15 | }
16 | 
17 | p {
18 |     margin-bottom: 1.3em;
19 |     color: #666;
20 | 
21 |     a {
22 |         color: #589ED3;
23 |     }
24 | }
25 | 
26 | a {
27 |     text-decoration: none;
28 | 
29 |     &:hover {
30 |         text-decoration: underline;
31 |     }
32 | }
33 | 
34 | h1,
35 | h2,
36 | h3,
37 | h4 {
38 |     margin: 1.414em 0 .5em;
39 |     font-weight: inherit;
40 |     line-height: 1.2;
41 | }
42 | 
43 | h1 {
44 |     margin-top: 0;
45 |     font-size: 3.157em;
46 | }
47 | 
48 | h2 { font-size: 2.369em; }
49 | 
50 | h3 { font-size: 1.777em; }
51 | 
52 | h4 { font-size: 1.333em; }
53 | 
54 | small { font-size: .75em; }
55 | 
56 | blockquote {
57 |     font-size: 150%;
58 |     font-style: italic;
59 | 
60 |     cite {
61 |         display: block;
62 |         font-size: 1rem;
63 |         font-style: normal;
64 | 
65 |         &:before {
66 |             content: "- #{$cite-before}";
67 |             // content: "- " + $cite-before; -- also works
68 |         }
69 |     }
70 | }
71 | 


--------------------------------------------------------------------------------
/day-09/base/layout.scss:
--------------------------------------------------------------------------------
 1 | /* Layout specific */
 2 | .container {
 3 |     width: 90%;
 4 |     margin: 0 auto;
 5 | 
 6 |     .boxed-layout & {
 7 |         // Variable defined inside a selector
 8 |         $border-color: #eaeaea !global;
 9 | 
10 |         background-color: $white;
11 |         padding: $baseline * 2;
12 |         border: 1px solid $border-color;
13 |         border-width: 0 1px;
14 |     }
15 | 
16 |     > header {
17 |         h1 {
18 |             font-size: 4em;
19 |             font-weight: 800;
20 |         }
21 |     }
22 | }
23 | 
24 | nav {
25 |     padding: $baseline * 2 0;
26 | 
27 |     ul {
28 |         list-style: none;
29 |         padding: 0;
30 |         overflow: hidden;
31 | 
32 |         li {
33 |             float: left;
34 | 
35 |             a {
36 |                 display: inline-block;
37 | 
38 |                 color: $text-color;
39 |                 padding: 1em;
40 | 
41 |                 &:hover {
42 |                     text-decoration: none;
43 |                     background-color: $border-color;
44 |                 }
45 |             }
46 | 
47 |             &:after {
48 |                 content: "";
49 |                 border: 1px dotted #ccc;
50 |                 width: 1px;
51 |                 height: 100%;
52 |             }
53 |         }
54 |     }
55 | }
56 | 


--------------------------------------------------------------------------------
/day-09/base/styles.scss:
--------------------------------------------------------------------------------
 1 | /* Day 9 - Partials */
 2 | 
 3 | // Variables
 4 | $text-color: #333;
 5 | $text-font-family: Helvetica, Arial, sans-serif;
 6 | $white: #ffffff;
 7 | $baseline: 1.5em;
 8 | $line-height: 1.5;
 9 | $base-font-size: 1.125em;
10 | 
11 | $cite-before: "Author: ";
12 | 
13 | @import "general/general", "layout";
14 | 


--------------------------------------------------------------------------------
/day-09/exercise-answer/answer.scss:
--------------------------------------------------------------------------------
 1 | /* Day 9 Exercise Answer */
 2 | 
 3 | /*** QUESTION 1 ***/
 4 | /*** The following two imports have the same result. True or false? ***/
 5 | @import "reset";
 6 | @import "_reset.scss";
 7 | 
 8 | /*** True ***/
 9 | 
10 | 
11 | 
12 | /*** QUESTION 2 ***/
13 | /*** The following import is correct. True or false? ***/
14 | @import "_typography.sass";
15 | 
16 | /*** True ***/
17 | 
18 | 
19 | 
20 | /*** QUESTION 3 ***/
21 | /*** Is the following @import correct? Answer with Yes or No. ***/
22 | @import url("_typography.scss");
23 | 
24 | /*** No ***/
25 | 
26 | 
27 | 
28 | /*** QUESTION 4 ***/
29 | /*** This statement will import two partial files. True of false? ***/
30 | @import "variables", "utilities/settings";
31 | 
32 | /*** True ***/
33 | 
34 | 
35 | 
36 | /*** QUESTION 5 ***/
37 | /*** This statement is correct. True or false? ***/
38 | @import "_reset.scss";
39 | @import "reset.scss";
40 | 
41 | /*** False ***/
42 | 


--------------------------------------------------------------------------------
/day-09/exercise-code/exercise.scss:
--------------------------------------------------------------------------------
 1 | /* Day 9 Exercise
 2 |  *
 3 |  * This is an .scss file.
 4 |  *
 5 |  * Your assignment is to answer the questions below and typing your answer in the
 6 |  * designated commented area.
 7 |  *
 8 |  * In the end, compare it with the result from the /exercise-answer folder.
 9 |  * Good luck! */
10 | 
11 | /*** QUESTION 1 ***/
12 | /*** The following two imports have the same result. True or false? ***/
13 | @import "reset";
14 | @import "_reset.scss";
15 | 
16 | /*** Type your answer here ***/
17 | 
18 | 
19 | 
20 | /*** QUESTION 2 ***/
21 | /*** The following import is correct. True or false? ***/
22 | @import "_typography.sass";
23 | 
24 | /*** Type your answer here ***/
25 | 
26 | 
27 | 
28 | /*** QUESTION 3 ***/
29 | /*** Is the following @import correct? Answer with Yes or No. ***/
30 | @import url("_typography.scss");
31 | 
32 | /*** Type your answer here ***/
33 | 
34 | 
35 | 
36 | /*** QUESTION 4 ***/
37 | /*** This statement will import two partial files. True of false? ***/
38 | @import "variables", "utilities/settings";
39 | 
40 | /*** Type your answer here ***/
41 | 
42 | 
43 | 
44 | /*** QUESTION 5 ***/
45 | /*** This statement is correct. True or false? ***/
46 | @import "_reset.scss";
47 | @import "reset.scss";
48 | 
49 | /*** Type your answer here ***/
50 | 


--------------------------------------------------------------------------------
/day-09/tutorial-code/_layout.scss:
--------------------------------------------------------------------------------
 1 | /* Layout specific */
 2 | .container {
 3 |     width: 90%;
 4 |     margin: 0 auto;
 5 | 
 6 |     .boxed-layout & {
 7 |         // Variable defined inside a selector
 8 |         $border-color: #eaeaea !global;
 9 | 
10 |         background-color: $white;
11 |         padding: $baseline * 2;
12 |         border: 1px solid $border-color;
13 |         border-width: 0 1px;
14 |     }
15 | 
16 |     > header {
17 |         h1 {
18 |             font-size: 4em;
19 |             font-weight: 800;
20 |         }
21 |     }
22 | }
23 | 
24 | nav {
25 |     padding: $baseline * 2 0;
26 | 
27 |     ul {
28 |         list-style: none;
29 |         padding: 0;
30 |         overflow: hidden;
31 | 
32 |         li {
33 |             float: left;
34 | 
35 |             a {
36 |                 display: inline-block;
37 | 
38 |                 color: $text-color;
39 |                 padding: 1em;
40 | 
41 |                 &:hover {
42 |                     text-decoration: none;
43 |                     background-color: $border-color;
44 |                 }
45 |             }
46 | 
47 |             &:after {
48 |                 content: "";
49 |                 border: 1px dotted #ccc;
50 |                 width: 1px;
51 |                 height: 100%;
52 |             }
53 |         }
54 |     }
55 | }
56 | 


--------------------------------------------------------------------------------
/day-09/tutorial-code/day-9.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |     <head>
  4 |         <meta charset="utf-8">
  5 |         <title>14 Days to Learn Sass - Day 9</title>
  6 | 
  7 |         <link rel="stylesheet" href="styles.css" media="screen">
  8 |     </head>
  9 |     <body class="boxed-layout">
 10 |         <div class="container">
 11 |             <header>
 12 |                 <h1>Project Acme</h1>
 13 |                 <h2>Documentation</h2>
 14 | 
 15 |                 <hr>
 16 |             </header>
 17 | 
 18 |             <nav>
 19 |                 <ul>
 20 |                     <li><a href="#introduction">Introduction</a></li>
 21 |                     <li><a href="#how-to">How to use this document</a></li>
 22 |                     <li><a href="#ch-1">Chapter 1</a></li>
 23 |                     <li><a href="#ch-2">Chapter 2</a></li>
 24 |                     <li><a href="#ch-3">Chapter 3</a></li>
 25 |                     <li><a href="#credits">Credits</a></li>
 26 |                 </ul>
 27 |             </nav>
 28 | 
 29 |             <main>
 30 |                 <section id="introduction">
 31 |                     <header>
 32 |                         <h1>Introduction</h1>
 33 |                     </header>
 34 | 
 35 |                     <hr>
 36 | 
 37 |                     <p>
 38 |                         Grumpy wizards make toxic brew for the evil Queen and Jack. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
 39 | 
 40 |                         <a href="#">He lay on his armour-like back</a>, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.
 41 | 
 42 |                         The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.
 43 |                     </p>
 44 | 
 45 |                     <blockquote>
 46 |                         Wow, this is great stuff. Love it!
 47 | 
 48 |                         <cite>Adi, Envato</cite>
 49 |                     </blockquote>
 50 | 
 51 |                     <h2>Subchapter 1</h2>
 52 | 
 53 |                     <p>
 54 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in <a href="#">voluptate</a> velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 55 |                     </p>
 56 | 
 57 |                     <h3>Other type of content</h3>
 58 | 
 59 |                     <p>
 60 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="#">Duis aute irure dolor</a> in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 61 |                     </p>
 62 |                 </section>
 63 | 
 64 |                 <section id="how-to">
 65 |                     <header>
 66 |                         <h1>How to use this document</h1>
 67 |                     </header>
 68 | 
 69 |                     <hr>
 70 | 
 71 |                     <p>
 72 |                         Grumpy wizards make toxic brew for the evil Queen and Jack. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
 73 | 
 74 |                         He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.
 75 | 
 76 |                         The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.
 77 |                     </p>
 78 |                     <p>
 79 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 80 |                     </p>
 81 | 
 82 |                     <pre>
 83 |                         <code>
 84 | &lt;header&gt;
 85 |     &lt;h1&gt;How to use this document&lt;/h1&gt;
 86 | &lt;/header&gt;
 87 |                         </code>
 88 |                     </pre>
 89 |                 </section>
 90 | 
 91 |                 <section id="ch-1">
 92 |                     <header>
 93 |                         <h1>Chapter 1</h1>
 94 |                     </header>
 95 | 
 96 |                     <hr>
 97 | 
 98 |                     <p>
 99 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
100 |                     </p>
101 |                     <p>
102 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
103 |                     </p>
104 |                 </section>
105 | 
106 |                 <section id="ch-2">
107 |                     <header>
108 |                         <h1>Chapter 2</h1>
109 |                     </header>
110 | 
111 |                     <hr>
112 | 
113 |                     <p>
114 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
115 |                     </p>
116 |                     <p>
117 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
118 |                     </p>
119 |                 </section>
120 | 
121 |                 <section id="ch-3">
122 |                     <header>
123 |                         <h1>Chapter 3</h1>
124 |                     </header>
125 | 
126 |                     <hr>
127 | 
128 |                     <p>
129 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
130 |                     </p>
131 |                     <p>
132 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
133 |                     </p>
134 |                     <p>
135 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
136 |                     </p>
137 |                 </section>
138 | 
139 |                 <section id="credits">
140 |                     <header>
141 |                         <h1>Credits</h1>
142 |                     </header>
143 | 
144 |                     <hr>
145 | 
146 |                     <p>
147 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
148 |                     </p>
149 |                     <p>
150 |                         <strong>Credits go to:</strong>
151 |                     </p>
152 | 
153 |                     <ul>
154 |                         <li>John Doe</li>
155 |                         <li>Jane Doe</li>
156 |                         <li>James Smith</li>
157 |                     </ul>
158 |                 </section>
159 | 
160 |             </main>
161 | 
162 |             <footer>
163 |                 <p>
164 |                     <small>Copyright (c) 2015 ACME All Rights Reserved.</small>
165 |                 </p>
166 |             </footer>
167 |         </div> <!-- end container -->
168 |     </body>
169 | </html>
170 | 


--------------------------------------------------------------------------------
/day-09/tutorial-code/general/_general.scss:
--------------------------------------------------------------------------------
 1 | /* General styles */
 2 | * { box-sizing: border-box; }
 3 | 
 4 | body {
 5 |     margin: 0;
 6 |     padding: 0;
 7 |     font: #{$base-font-size}/#{$line-height} $text-font-family;
 8 |     font-weight: 400;
 9 |     -webkit-font-smoothing: antialiased;
10 |     color: $text-color;
11 | 
12 |     &.boxed-layout {
13 |         background-color: #F9F9F9;
14 |     }
15 | }
16 | 
17 | p {
18 |     margin-bottom: 1.3em;
19 |     color: #666;
20 | 
21 |     a {
22 |         color: #589ED3;
23 |     }
24 | }
25 | 
26 | a {
27 |     text-decoration: none;
28 | 
29 |     &:hover {
30 |         text-decoration: underline;
31 |     }
32 | }
33 | 
34 | h1,
35 | h2,
36 | h3,
37 | h4 {
38 |     margin: 1.414em 0 .5em;
39 |     font-weight: inherit;
40 |     line-height: 1.2;
41 | }
42 | 
43 | h1 {
44 |     margin-top: 0;
45 |     font-size: 3.157em;
46 | }
47 | 
48 | h2 { font-size: 2.369em; }
49 | 
50 | h3 { font-size: 1.777em; }
51 | 
52 | h4 { font-size: 1.333em; }
53 | 
54 | small { font-size: .75em; }
55 | 
56 | blockquote {
57 |     font-size: 150%;
58 |     font-style: italic;
59 | 
60 |     cite {
61 |         display: block;
62 |         font-size: 1rem;
63 |         font-style: normal;
64 | 
65 |         &:before {
66 |             content: "- #{$cite-before}";
67 |             // content: "- " + $cite-before; -- also works
68 |         }
69 |     }
70 | }
71 | 


--------------------------------------------------------------------------------
/day-09/tutorial-code/styles.css:
--------------------------------------------------------------------------------
 1 | /* Day 9 - Partials */
 2 | /* General styles */
 3 | * {
 4 |   box-sizing: border-box; }
 5 | 
 6 | body {
 7 |   margin: 0;
 8 |   padding: 0;
 9 |   font: 1.125em/1.5 Helvetica, Arial, sans-serif;
10 |   font-weight: 400;
11 |   -webkit-font-smoothing: antialiased;
12 |   color: #333; }
13 |   body.boxed-layout {
14 |     background-color: #F9F9F9; }
15 | 
16 | p {
17 |   margin-bottom: 1.3em;
18 |   color: #666; }
19 |   p a {
20 |     color: #589ED3; }
21 | 
22 | a {
23 |   text-decoration: none; }
24 |   a:hover {
25 |     text-decoration: underline; }
26 | 
27 | h1,
28 | h2,
29 | h3,
30 | h4 {
31 |   margin: 1.414em 0 .5em;
32 |   font-weight: inherit;
33 |   line-height: 1.2; }
34 | 
35 | h1 {
36 |   margin-top: 0;
37 |   font-size: 3.157em; }
38 | 
39 | h2 {
40 |   font-size: 2.369em; }
41 | 
42 | h3 {
43 |   font-size: 1.777em; }
44 | 
45 | h4 {
46 |   font-size: 1.333em; }
47 | 
48 | small {
49 |   font-size: .75em; }
50 | 
51 | blockquote {
52 |   font-size: 150%;
53 |   font-style: italic; }
54 |   blockquote cite {
55 |     display: block;
56 |     font-size: 1rem;
57 |     font-style: normal; }
58 |     blockquote cite:before {
59 |       content: "- Author: "; }
60 | 
61 | /* Layout specific */
62 | .container {
63 |   width: 90%;
64 |   margin: 0 auto; }
65 |   .boxed-layout .container {
66 |     background-color: #ffffff;
67 |     padding: 3em;
68 |     border: 1px solid #eaeaea;
69 |     border-width: 0 1px; }
70 |   .container > header h1 {
71 |     font-size: 4em;
72 |     font-weight: 800; }
73 | 
74 | nav {
75 |   padding: 3em 0; }
76 |   nav ul {
77 |     list-style: none;
78 |     padding: 0;
79 |     overflow: hidden; }
80 |     nav ul li {
81 |       float: left; }
82 |       nav ul li a {
83 |         display: inline-block;
84 |         color: #333;
85 |         padding: 1em; }
86 |         nav ul li a:hover {
87 |           text-decoration: none;
88 |           background-color: #eaeaea; }
89 |       nav ul li:after {
90 |         content: "";
91 |         border: 1px dotted #ccc;
92 |         width: 1px;
93 |         height: 100%; }
94 | 


--------------------------------------------------------------------------------
/day-09/tutorial-code/styles.scss:
--------------------------------------------------------------------------------
 1 | /* Day 9 - Partials */
 2 | 
 3 | // Variables
 4 | $text-color: #333;
 5 | $text-font-family: Helvetica, Arial, sans-serif;
 6 | $white: #ffffff;
 7 | $baseline: 1.5em;
 8 | $line-height: 1.5;
 9 | $base-font-size: 1.125em;
10 | 
11 | $cite-before: "Author: ";
12 | 
13 | @import "general/general", "layout";
14 | 


--------------------------------------------------------------------------------
/day-10/base/day-10.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |     <head>
  4 |         <meta charset="utf-8">
  5 |         <title>14 Days to Learn Sass - Day 10</title>
  6 | 
  7 |         <link rel="stylesheet" href="styles.css" media="screen">
  8 |     </head>
  9 |     <body class="boxed-layout">
 10 |         <div class="container">
 11 |             <header>
 12 |                 <h1>Project Acme</h1>
 13 |                 <h2>Documentation</h2>
 14 | 
 15 |                 <hr>
 16 |             </header>
 17 | 
 18 |             <nav>
 19 |                 <ul>
 20 |                     <li><a href="#introduction">Introduction</a></li>
 21 |                     <li><a href="#how-to">How to use this document</a></li>
 22 |                     <li><a href="#ch-1">Chapter 1</a></li>
 23 |                     <li><a href="#ch-2">Chapter 2</a></li>
 24 |                     <li><a href="#ch-3">Chapter 3</a></li>
 25 |                     <li><a href="#credits">Credits</a></li>
 26 |                 </ul>
 27 |             </nav>
 28 | 
 29 |             <main>
 30 |                 <section id="introduction">
 31 |                     <header>
 32 |                         <h1>Introduction</h1>
 33 |                     </header>
 34 | 
 35 |                     <hr>
 36 | 
 37 |                     <p>
 38 |                         Grumpy wizards make toxic brew for the evil Queen and Jack. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
 39 | 
 40 |                         <a href="#">He lay on his armour-like back</a>, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.
 41 | 
 42 |                         The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.
 43 |                     </p>
 44 | 
 45 |                     <blockquote>
 46 |                         Wow, this is great stuff. Love it!
 47 | 
 48 |                         <cite>Adi, Envato</cite>
 49 |                     </blockquote>
 50 | 
 51 |                     <h2>Subchapter 1</h2>
 52 | 
 53 |                     <p>
 54 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in <a href="#">voluptate</a> velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 55 |                     </p>
 56 | 
 57 |                     <h3>Other type of content</h3>
 58 | 
 59 |                     <p>
 60 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="#">Duis aute irure dolor</a> in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 61 |                     </p>
 62 |                 </section>
 63 | 
 64 |                 <section id="how-to">
 65 |                     <header>
 66 |                         <h1>How to use this document</h1>
 67 |                     </header>
 68 | 
 69 |                     <hr>
 70 | 
 71 |                     <p>
 72 |                         Grumpy wizards make toxic brew for the evil Queen and Jack. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
 73 | 
 74 |                         He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.
 75 | 
 76 |                         The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.
 77 |                     </p>
 78 |                     <p>
 79 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 80 |                     </p>
 81 | 
 82 |                     <pre>
 83 |                         <code>
 84 | &lt;header&gt;
 85 |     &lt;h1&gt;How to use this document&lt;/h1&gt;
 86 | &lt;/header&gt;
 87 |                         </code>
 88 |                     </pre>
 89 |                 </section>
 90 | 
 91 |                 <section id="ch-1">
 92 |                     <header>
 93 |                         <h1>Chapter 1</h1>
 94 |                     </header>
 95 | 
 96 |                     <hr>
 97 | 
 98 |                     <p>
 99 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
100 |                     </p>
101 |                     <p>
102 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
103 |                     </p>
104 |                 </section>
105 | 
106 |                 <section id="ch-2">
107 |                     <header>
108 |                         <h1>Chapter 2</h1>
109 |                     </header>
110 | 
111 |                     <hr>
112 | 
113 |                     <p>
114 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
115 |                     </p>
116 |                     <p>
117 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
118 |                     </p>
119 |                 </section>
120 | 
121 |                 <section id="ch-3">
122 |                     <header>
123 |                         <h1>Chapter 3</h1>
124 |                     </header>
125 | 
126 |                     <hr>
127 | 
128 |                     <p>
129 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
130 |                     </p>
131 |                     <p>
132 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
133 |                     </p>
134 |                     <p>
135 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
136 |                     </p>
137 |                 </section>
138 | 
139 |                 <section id="credits">
140 |                     <header>
141 |                         <h1>Credits</h1>
142 |                     </header>
143 | 
144 |                     <hr>
145 | 
146 |                     <p>
147 |                         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
148 |                     </p>
149 |                     <p>
150 |                         <strong>Credits go to:</strong>
151 |                     </p>
152 | 
153 |                     <ul>
154 |                         <li>John Doe</li>
155 |                         <li>Jane Doe</li>
156 |                         <li>James Smith</li>
157 |                     </ul>
158 |                 </section>
159 | 
160 |             </main>
161 | 
162 |             <footer>
163 |                 <p>
164 |                     <small>Copyright (c) 2015 ACME All Rights Reserved.</small>
165 |                 </p>
166 |             </footer>
167 |         </div> <!-- end container -->
168 |     </body>
169 | </html>
170 | 


--------------------------------------------------------------------------------
/day-10/base/styles.scss:
--------------------------------------------------------------------------------
  1 | /* Day 10 - @media directive */
  2 | 
  3 | // Variables
  4 | $text-color: #333;
  5 | $text-font-family: Helvetica, Arial, sans-serif;
  6 | $white: #ffffff;
  7 | $baseline: 1.5em;
  8 | $line-height: 1.5;
  9 | $base-font-size: 1.125em;
 10 | 
 11 | $cite-before: "Author: ";
 12 | 
 13 | /* General styles */
 14 | * { box-sizing: border-box; }
 15 | 
 16 | body {
 17 |     margin: 0;
 18 |     padding: 0;
 19 |     font: #{$base-font-size}/#{$line-height} $text-font-family;
 20 |     font-weight: 400;
 21 |     -webkit-font-smoothing: antialiased;
 22 |     color: $text-color;
 23 | 
 24 |     &.boxed-layout {
 25 |         background-color: #F9F9F9;
 26 |     }
 27 | }
 28 | 
 29 | p {
 30 |     margin-bottom: 1.3em;
 31 |     color: #666;
 32 | 
 33 |     a {
 34 |         color: #589ED3;
 35 |     }
 36 | }
 37 | 
 38 | a {
 39 |     text-decoration: none;
 40 | 
 41 |     &:hover {
 42 |         text-decoration: underline;
 43 |     }
 44 | }
 45 | 
 46 | h1,
 47 | h2,
 48 | h3,
 49 | h4 {
 50 |     margin: 1.414em 0 .5em;
 51 |     font-weight: inherit;
 52 |     line-height: 1.2;
 53 | }
 54 | 
 55 | h1 {
 56 |     margin-top: 0;
 57 |     font-size: 3.157em;
 58 | }
 59 | 
 60 | h2 { font-size: 2.369em; }
 61 | 
 62 | h3 { font-size: 1.777em; }
 63 | 
 64 | h4 { font-size: 1.333em; }
 65 | 
 66 | small { font-size: .75em; }
 67 | 
 68 | blockquote {
 69 |     font-size: 150%;
 70 |     font-style: italic;
 71 | 
 72 |     cite {
 73 |         display: block;
 74 |         font-size: 1rem;
 75 |         font-style: normal;
 76 | 
 77 |         &:before {
 78 |             content: "- #{$cite-before}";
 79 |             // content: "- " + $cite-before; -- also works
 80 |         }
 81 |     }
 82 | }
 83 | 
 84 | /* Layout specific */
 85 | .container {
 86 |     width: 90%;
 87 |     margin: 0 auto;
 88 | 
 89 |     .boxed-layout & {
 90 |         // Variable defined inside a selector
 91 |         $border-color: #eaeaea !global;
 92 | 
 93 |         background-color: $white;
 94 |         padding: $baseline * 2;
 95 |         border: 1px solid $border-color;
 96 |         border-width: 0 1px;
 97 |     }
 98 | 
 99 |     > header {
100 |         h1 {
101 |             font-size: 4em;
102 |             font-weight: 800;
103 |         }
104 |     }
105 | }
106 | 
107 | nav {
108 |     padding: $baseline * 2 0;
109 | 
110 |     ul {
111 |         list-style: none;
112 |         padding: 0;
113 |         overflow: hidden;
114 | 
115 |         li {
116 |             float: left;
117 | 
118 |             a {
119 |                 display: inline-block;
120 | 
121 |                 color: $text-color;
122 |                 padding: 1em;
123 | 
124 |                 &:hover {
125 |                     text-decoration: none;
126 |                     background-color: $border-color;
127 |                 }
128 |             }
129 | 
130 |             &:after {
131 |                 content: "";
132 |                 border: 1px dotted #ccc;
133 |                 width: 1px;
134 |                 height: 100%;
135 |             }
136 |         }
137 |     }
138 | }
139 | 


--------------------------------------------------------------------------------
/day-10/exercise-answer/answer.scss:
--------------------------------------------------------------------------------
 1 | /* Day 10 Exercise Answer */
 2 | 
 3 | // Breakpoint values
 4 | $breakpoints: (
 5 |     mobile: 480px,
 6 |     tablet: 768px,
 7 |     desktop: 1280px
 8 | );
 9 | 
10 | // Font size increments
11 | $font-increments: (
12 |     mobile: 1.4,
13 |     tablet: 1.2
14 | );
15 | 
16 | // Variables
17 | $default-bg: #fff;
18 | $boxed-body-bg: #eaeaea;
19 | $boxed-container-bg: #fff;
20 | $boxed-container-border: #d1d1d1;
21 | 
22 | $font-family: "Helvetica", Arial, sans-serif;
23 | $base-font-size: 1em;
24 | $line-height: 1.5;
25 | $baseline: $base-font-size * $line-height;
26 | 
27 | $content-width: 90%;
28 | 
29 | * {
30 |     box-sizing: border-box;
31 | }
32 | 
33 | body {
34 |     margin: 0;
35 |     padding: 0;
36 | 
37 |     font: #{$base-font-size}/#{$line-height} $font-family;
38 | 
39 |     &.boxed-layout {
40 |         background-color: $boxed-body-bg;
41 |     }
42 | 
43 |     @media all and (max-width: map-get($breakpoints, mobile)) {
44 |         font-size: $base-font-size * map-get($font-increments, mobile);
45 |         background-color: $default-bg;
46 |     }
47 | 
48 |     @media all and (min-width: map-get($breakpoints, tablet)) {
49 |         @media (max-width: map-get($breakpoints, desktop)) {
50 |             font-size: $base-font-size * map-get($font-increments, tablet);
51 |         }
52 |     }
53 | }
54 | 
55 | p {
56 |     margin-bottom: $baseline;
57 | }
58 | 
59 | .container {
60 |     width: $content-width;
61 |     margin: 0 auto;
62 |     overflow: hidden;
63 | 
64 |     .boxed-layout & {
65 |         @media all and (min-width: map-get($breakpoints, tablet)) {
66 |             background-color: $boxed-container-bg;
67 |             border: 1px solid $boxed-container-border;
68 |             border-width: 0 1px;
69 |             padding: $baseline * 2;
70 |         }
71 |     }
72 | }
73 | 
74 | .col-half {
75 |     float: left;
76 |     width: 45%;
77 |     margin: 0 2.5%;
78 |     padding: $baseline * 2;
79 | 
80 |     @media all and (max-width: map-get($breakpoints, mobile)) {
81 |         float: none;
82 |         width: 100%;
83 |         margin: 0;
84 |     }
85 | }
86 | 


--------------------------------------------------------------------------------
/day-10/exercise-code/exercise.scss:
--------------------------------------------------------------------------------
 1 | /* Day 10 Exercise
 2 |  *
 3 |  * This is a .css file.
 4 |  *
 5 |  * Your assignment is to write the corresponding .scss file while respecting a few rules.
 6 |  * 1. You need to use variables wherever you see fit.
 7 |  * 2. You need to use at least two maps.
 8 |  * 3. You need to nest @media rules at least once.
 9 |  * 4. You must use the * (multiplication) operator at least twice.
10 |  *
11 |  * In the end, compare it with the result from the /exercise-answer folder.
12 |  * Good luck! */
13 | 
14 | * {
15 |     box-sizing: border-box;
16 | }
17 | 
18 | body {
19 |     margin: 0;
20 |     padding: 0;
21 |     font: 1em/1.5 "Helvetica", Arial, sans-serif;
22 | }
23 | 
24 |     body.boxed-layout {
25 |         background-color: #eaeaea;
26 |     }
27 | 
28 | @media all and (max-width: 480px) {
29 |     body {
30 |         font-size: 1.4em;
31 |         background-color: #fff;
32 |     }
33 | }
34 | 
35 | @media all and (min-width: 768px) and (max-width: 1280px) {
36 |     body {
37 |         font-size: 1.2em;
38 |     }
39 | }
40 | 
41 | p {
42 |     margin-bottom: 1.5em;
43 | }
44 | 
45 | .container {
46 |     width: 90%;
47 |     margin: 0 auto;
48 |     overflow: hidden;
49 | }
50 | 
51 | @media all and (min-width: 768px) {
52 |     .boxed-layout .container {
53 |         background-color: #fff;
54 |         border: 1px solid #d1d1d1;
55 |         border-width: 0 1px;
56 |         padding: 3em;
57 |     }
58 | }
59 | 
60 | .col-half {
61 |     float: left;
62 |     width: 45%;
63 |     margin: 0 2.5%;
64 |     padding: 3em;
65 | }
66 | 
67 | @media all and (max-width: 480px) {
68 |     .col-half {
69 |         float: none;
70 |         width: 100%;
71 |         margin: 0;
72 |     }
73 | }
74 | 


--------------------------------------------------------------------------------
/day-10/tutorial-code/styles.css:
--------------------------------------------------------------------------------
  1 | /* Day 10 - @media directive */
  2 | /* General styles */
  3 | * {
  4 |   box-sizing: border-box; }
  5 | 
  6 | body {
  7 |   margin: 0;
  8 |   padding: 0;
  9 |   font: 1.125em/1.5 Helvetica, Arial, sans-serif;
 10 |   font-weight: 400;
 11 |   -webkit-font-smoothing: antialiased;
 12 |   color: #333; }
 13 |   body.boxed-layout {
 14 |     background-color: #F9F9F9; }
 15 | 
 16 | p {
 17 |   margin-bottom: 1.3em;
 18 |   color: #666; }
 19 |   p a {
 20 |     color: #589ED3; }
 21 | 
 22 | a {
 23 |   text-decoration: none; }
 24 |   a:hover {
 25 |     text-decoration: underline; }
 26 | 
 27 | h1,
 28 | h2,
 29 | h3,
 30 | h4 {
 31 |   margin: 1.414em 0 .5em;
 32 |   font-weight: inherit;
 33 |   line-height: 1.2; }
 34 | 
 35 | h1 {
 36 |   margin-top: 0;
 37 |   font-size: 3.157em; }
 38 | 
 39 | h2 {
 40 |   font-size: 2.369em; }
 41 | 
 42 | h3 {
 43 |   font-size: 1.777em; }
 44 | 
 45 | h4 {
 46 |   font-size: 1.333em; }
 47 | 
 48 | small {
 49 |   font-size: .75em; }
 50 | 
 51 | blockquote {
 52 |   font-size: 150%;
 53 |   font-style: italic; }
 54 |   blockquote cite {
 55 |     display: block;
 56 |     font-size: 1rem;
 57 |     font-style: normal; }
 58 |     blockquote cite:before {
 59 |       content: "- Author: "; }
 60 | 
 61 | /* Layout specific */
 62 | .container {
 63 |   width: 90%;
 64 |   margin: 0 auto; }
 65 |   .boxed-layout .container {
 66 |     background-color: #ffffff;
 67 |     padding: 3em;
 68 |     border: 1px solid #eaeaea;
 69 |     border-width: 0 1px; }
 70 |   .container > header h1 {
 71 |     font-size: 4em;
 72 |     font-weight: 800; }
 73 | 
 74 | nav {
 75 |   padding: 3em 0; }
 76 |   nav ul {
 77 |     list-style: none;
 78 |     padding: 0;
 79 |     overflow: hidden; }
 80 |     nav ul li {
 81 |       float: left; }
 82 |       nav ul li a {
 83 |         display: inline-block;
 84 |         color: #333;
 85 |         padding: 1em; }
 86 |         nav ul li a:hover {
 87 |           text-decoration: none;
 88 |           background-color: #eaeaea; }
 89 |       nav ul li:after {
 90 |         content: "";
 91 |         border: 1px dotted #ccc;
 92 |         width: 1px;
 93 |         height: 100%; }
 94 |       @media screen and (max-width: 768px) {
 95 |         nav ul li {
 96 |           float: none; }
 97 |           nav ul li a {
 98 |             display: block; }
 99 |           nav ul li:after {
100 |             border: none; } }
101 |   @media screen and (max-width: 768px) and (orientation: portrait) {
102 |     nav ul li {
103 |       border-bottom: 1px; } }
104 | 


--------------------------------------------------------------------------------
/day-10/tutorial-code/styles.scss:
--------------------------------------------------------------------------------
  1 | /* Day 10 - @media directive */
  2 | 
  3 | // Variables
  4 | $text-color: #333;
  5 | $text-font-family: Helvetica, Arial, sans-serif;
  6 | $white: #ffffff;
  7 | $baseline: 1.5em;
  8 | $line-height: 1.5;
  9 | $base-font-size: 1.125em;
 10 | 
 11 | $cite-before: "Author: ";
 12 | 
 13 | $tablet-breakpoint: "screen and (max-width: 768px)";
 14 | 
 15 | /* General styles */
 16 | * { box-sizing: border-box; }
 17 | 
 18 | body {
 19 |     margin: 0;
 20 |     padding: 0;
 21 |     font: #{$base-font-size}/#{$line-height} $text-font-family;
 22 |     font-weight: 400;
 23 |     -webkit-font-smoothing: antialiased;
 24 |     color: $text-color;
 25 | 
 26 |     &.boxed-layout {
 27 |         background-color: #F9F9F9;
 28 |     }
 29 | }
 30 | 
 31 | p {
 32 |     margin-bottom: 1.3em;
 33 |     color: #666;
 34 | 
 35 |     a {
 36 |         color: #589ED3;
 37 |     }
 38 | }
 39 | 
 40 | a {
 41 |     text-decoration: none;
 42 | 
 43 |     &:hover {
 44 |         text-decoration: underline;
 45 |     }
 46 | }
 47 | 
 48 | h1,
 49 | h2,
 50 | h3,
 51 | h4 {
 52 |     margin: 1.414em 0 .5em;
 53 |     font-weight: inherit;
 54 |     line-height: 1.2;
 55 | }
 56 | 
 57 | h1 {
 58 |     margin-top: 0;
 59 |     font-size: 3.157em;
 60 | }
 61 | 
 62 | h2 { font-size: 2.369em; }
 63 | 
 64 | h3 { font-size: 1.777em; }
 65 | 
 66 | h4 { font-size: 1.333em; }
 67 | 
 68 | small { font-size: .75em; }
 69 | 
 70 | blockquote {
 71 |     font-size: 150%;
 72 |     font-style: italic;
 73 | 
 74 |     cite {
 75 |         display: block;
 76 |         font-size: 1rem;
 77 |         font-style: normal;
 78 | 
 79 |         &:before {
 80 |             content: "- #{$cite-before}";
 81 |             // content: "- " + $cite-before; -- also works
 82 |         }
 83 |     }
 84 | }
 85 | 
 86 | /* Layout specific */
 87 | .container {
 88 |     width: 90%;
 89 |     margin: 0 auto;
 90 | 
 91 |     .boxed-layout & {
 92 |         // Variable defined inside a selector
 93 |         $border-color: #eaeaea !global;
 94 | 
 95 |         background-color: $white;
 96 |         padding: $baseline * 2;
 97 |         border: 1px solid $border-color;
 98 |         border-width: 0 1px;
 99 |     }
100 | 
101 |     > header {
102 |         h1 {
103 |             font-size: 4em;
104 |             font-weight: 800;
105 |         }
106 |     }
107 | }
108 | 
109 | nav {
110 |     padding: $baseline * 2 0;
111 | 
112 |     ul {
113 |         list-style: none;
114 |         padding: 0;
115 |         overflow: hidden;
116 | 
117 |         li {
118 |             float: left;
119 | 
120 |             a {
121 |                 display: inline-block;
122 | 
123 |                 color: $text-color;
124 |                 padding: 1em;
125 | 
126 |                 &:hover {
127 |                     text-decoration: none;
128 |                     background-color: $border-color;
129 |                 }
130 |             }
131 | 
132 |             &:after {
133 |                 content: "";
134 |                 border: 1px dotted #ccc;
135 |                 width: 1px;
136 |                 height: 100%;
137 |             }
138 | 
139 |             @media #{$tablet-breakpoint} {
140 |                 float: none;
141 | 
142 |                 a {
143 |                     display: block;
144 |                 }
145 | 
146 |                 &:after {
147 |                     border: none;
148 |                 }
149 | 
150 |                 @media (orientation: portrait) {
151 |                     border-bottom: 1px;
152 |                 }
153 |             }
154 |         }
155 |     }
156 | }
157 | 


--------------------------------------------------------------------------------
/day-11/base/styles.scss:
--------------------------------------------------------------------------------
1 | /* Day 11 - @extend directive */
2 | 


--------------------------------------------------------------------------------
/day-11/exercise-answer/answer.css:
--------------------------------------------------------------------------------
 1 | /* Day 11 Exercise Answer */
 2 | 
 3 | .alert,
 4 | .alert-error,
 5 | .emergency-alert,
 6 | .alert-info,
 7 | .alert-warning,
 8 | .alert-success,
 9 | .large-alert {
10 |     display: block;
11 |     background: #ccc;
12 |     border: 1px solid #C4C4C4;
13 |     padding: 1em;
14 | }
15 | 
16 | .alert-error,
17 | .emergency-alert {
18 |     background: #FFCCCC;
19 |     border-color: #E2A5A5;
20 | }
21 | 
22 | .alert-info {
23 |     background: #D1EEFC;
24 |     border-color: #ADD6EB;
25 | }
26 | 
27 | .alert-warning {
28 |     background: #FAEFD0;
29 |     border-color: #E2D2A6;
30 | }
31 | 
32 | .alert-success {
33 |     background: #F6FDCE;
34 |     border-color: #DCE5A4;
35 | }
36 | 
37 | .large-alert,
38 | .emergency-alert {
39 |     font-size: 120%;
40 |     padding: 2em;
41 | }
42 | 
43 | .floated-alert,
44 | .emergency-alert {
45 |     position: relative;
46 |     z-index: 999999;
47 |     top: 10%;
48 |     left: 0;
49 |     right: 0;
50 | }
51 | 


--------------------------------------------------------------------------------
/day-11/exercise-code/exercise.scss:
--------------------------------------------------------------------------------
 1 | /* Day 11 Exercise
 2 |  *
 3 |  * This is an .scss file.
 4 |  *
 5 |  * Your assignment is to write the corresponding CSS file that's generated -- without
 6 |  * compiling the Sass code.
 7 |  *
 8 |  * In the end, compare it with the result from the /exercise-answer folder.
 9 |  * Good luck! */
10 | 
11 | // Vars
12 | $default: #ccc;
13 | $error: #FFCCCC;
14 | $info: #D1EEFC;
15 | $warning: #FAEFD0;
16 | $success: #F6FDCE;
17 | $default-border: #C4C4C4;
18 | $error-border: #E2A5A5;
19 | $info-border: #ADD6EB;
20 | $warning-border: #E2D2A6;
21 | $success-border: #DCE5A4;
22 | 
23 | .alert {
24 |     display: block;
25 |     background: $default;
26 |     border: 1px solid $default-border;
27 |     padding: 1em;
28 | }
29 | 
30 | .alert-error {
31 |     @extend .alert;
32 | 
33 |     background: $error;
34 |     border-color: $error-border;
35 | }
36 | 
37 | .alert-info {
38 |     @extend .alert;
39 | 
40 |     background: $info;
41 |     border-color: $info-border;
42 | }
43 | 
44 | .alert-warning {
45 |     @extend .alert;
46 | 
47 |     background: $warning;
48 |     border-color: $warning-border;
49 | }
50 | 
51 | .alert-success {
52 |     @extend .alert;
53 | 
54 |     background: $success;
55 |     border-color: $success-border;
56 | }
57 | 
58 | .large-alert {
59 |     @extend .alert;
60 | 
61 |     font-size: 120%;
62 |     padding: 2em;
63 | }
64 | 
65 | .floated-alert {
66 |     position: relative;
67 |     z-index: 999999;
68 |     top: 10%;
69 |     left: 0;
70 |     right: 0;
71 | }
72 | 
73 | .emergency-alert {
74 |     @extend .large-alert;
75 |     @extend .alert-error;
76 |     @extend .floated-alert;
77 | }
78 | 


--------------------------------------------------------------------------------
/day-11/tutorial-code/styles.css:
--------------------------------------------------------------------------------
 1 | /* Day 11 - @extend directive */
 2 | .btn, .btn-large, .btn-xlarge, .btn-cta {
 3 |   display: inline-block;
 4 |   padding: 1em;
 5 |   font-size: 1rem;
 6 |   background-color: #FBFBFB;
 7 |   border: 1px solid #F6F6F6;
 8 |   border-radius: 5px; }
 9 | 
10 | .btn-large, .btn-xlarge, .btn-cta {
11 |   font-size: 2rem;
12 |   padding: 1em 2em;
13 |   border-radius: 10px; }
14 | 
15 | .btn-xlarge, .btn-cta {
16 |   font-size: 2.5rem; }
17 | 
18 | .btn-primary, .btn-cta {
19 |   background-color: tomato;
20 |   color: #fff;
21 |   text-transform: uppercase; }
22 | 
23 | @media screen and (max-width: 1000px) {
24 |   .submit, input[type="submit"] {
25 |     background-color: #ccc;
26 |     color: #999; } }
27 | 


--------------------------------------------------------------------------------
/day-11/tutorial-code/styles.scss:
--------------------------------------------------------------------------------
 1 | /* Day 11 - @extend directive */
 2 | 
 3 | .btn {
 4 |     display: inline-block;
 5 |     padding: 1em;
 6 |     font-size: 1rem;
 7 |     background-color: #FBFBFB;
 8 |     border: 1px solid #F6F6F6;
 9 |     border-radius: 5px;
10 | }
11 | 
12 | .btn-large {
13 |     @extend .btn;
14 | 
15 |     font-size: 2rem;
16 |     padding: 1em 2em;
17 |     border-radius: 10px;
18 | }
19 | 
20 | .btn-xlarge {
21 |     @extend .btn-large;
22 | 
23 |     font-size: 2.5rem;
24 | }
25 | 
26 | .btn-primary {
27 |     background-color: tomato;
28 |     color: #fff;
29 |     text-transform: uppercase;
30 | }
31 | 
32 | .btn-cta {
33 |     @extend .btn-xlarge;
34 |     @extend .btn-primary;
35 | }
36 | 
37 | @media screen and (max-width: 1000px) {
38 |     .submit {
39 |         background-color: #ccc;
40 |         color: #999;
41 |     }
42 | 
43 |     input[type="submit"] {
44 |         @extend .submit;
45 | 
46 |         // @extend .btn;
47 |     }
48 | }
49 | 


--------------------------------------------------------------------------------
/day-12/base/styles.scss:
--------------------------------------------------------------------------------
1 | /* Day 12 - @if and @for directives */
2 | 


--------------------------------------------------------------------------------
/day-12/exercise-answer/answer.scss:
--------------------------------------------------------------------------------
 1 | /* Day 12 Exercise Answer */
 2 | 
 3 | // $palette: light;
 4 | $palette: dark;
 5 | 
 6 | $palette-light: (
 7 |     1: #cccccc,
 8 |     2: #eaeaea,
 9 |     3: #F1F4F7,
10 |     4: #FFFAF7
11 | );
12 | 
13 | $palette-dark: (
14 |     1: #2B2B2B,
15 |     2: #F5F5F5,
16 |     3: #E5E5E5,
17 |     4: #DDB34E
18 | );
19 | 
20 | * {
21 |     box-sizing: border-box;
22 | }
23 | 
24 | body {
25 | 	font-size: 20px;
26 | }
27 | 
28 | .palette {
29 |     position: relative;
30 |     width: 17em;
31 |     height: 5em;
32 |     border: 1px solid #333;
33 | }
34 | 
35 | .palette-item {
36 |     width: 3em;
37 |     height: 3em;
38 |     display: inline-block;
39 |     position: absolute;
40 |     top: 1em;
41 |     left: 1em;
42 | }
43 | 
44 | @for $i from 1 through 4 {
45 |     #palette-item-#{$i} {
46 |         @if $palette == light {
47 |             background: map-get($palette-light, $i);
48 |         } @else if $palette == dark {
49 |             background: map-get($palette-dark, $i);
50 |         }
51 | 
52 |         left: (4em * $i) - 3em;
53 |     }
54 | }
55 | 


--------------------------------------------------------------------------------
/day-12/exercise-code/exercise.scss:
--------------------------------------------------------------------------------
 1 | /* Day 12 Exercise
 2 |  *
 3 |  * This is an .scss file.
 4 |  *
 5 |  * Your assignment is to display a color palette that can have two themes: light and dark.
 6 |  * Each of the two themes has four colors represented by their hex codes:
 7 |  *
 8 |  * light: #cccccc, #eaeaea, #f1f4f7, #fffaf7
 9 |  * dark: #2b2b2b, #f5f5f5, #e5e5e5, #ddb34e
10 |  *
11 |  * The palette should be represented by 4 elements inside the .palette container (use the code below).
12 |  * These 4 elements should be absolutely positioned and displayed in a single line, at 1em distance
13 |  * from one another.
14 |  *
15 |  * You should use the least amount of Sass code possible.
16 |  *
17 |  * In the end, compare it with the result from the /exercise-answer folder.
18 |  * Good luck! */
19 | 
20 | * {
21 |     box-sizing: border-box;
22 | }
23 | 
24 | body {
25 | 	font-size: 20px;
26 | }
27 | 
28 | .palette {
29 |     position: relative;
30 |     width: 17em;
31 |     height: 5em;
32 |     border: 1px solid #333;
33 | }
34 | 
35 | .palette-item {
36 |     width: 3em;
37 |     height: 3em;
38 |     display: inline-block;
39 |     position: absolute;
40 |     top: 1em;
41 |     left: 1em;
42 | }
43 | 


--------------------------------------------------------------------------------
/day-12/tutorial-code/styles.css:
--------------------------------------------------------------------------------
 1 | /* Day 12 - @if and @for directives */
 2 | body {
 3 |   font-family: Arial, sans-serif; }
 4 | 
 5 | .button {
 6 |   background-color: gray; }
 7 | 
 8 | .cell {
 9 |   background: blue; }
10 | 
11 | .cell {
12 |   background: blue; }
13 | 
14 | .cell {
15 |   background: blue; }
16 | 
17 | #comment-10:before {
18 |   content: "10"; }
19 | 
20 | #comment-9:before {
21 |   content: "9"; }
22 | 
23 | #comment-8:before {
24 |   content: "8"; }
25 | 
26 | #comment-7:before {
27 |   content: "7"; }
28 | 
29 | #comment-6:before {
30 |   content: "6"; }
31 | 
32 | #comment-5:before {
33 |   content: "5"; }
34 | 
35 | #comment-4:before {
36 |   content: "4"; }
37 | 
38 | #comment-3:before {
39 |   content: "3"; }
40 | 
41 | #comment-2:before {
42 |   content: "2"; }
43 | 
44 | #comment-1:before {
45 |   content: "1"; }
46 | 
47 | .bar, #bar-1, #bar-2, #bar-3, #bar-4 {
48 |   width: 2em;
49 |   display: inline-block;
50 |   background: #ccc;
51 |   margin-right: 1px;
52 |   float: left; }
53 | 
54 | #bar-1 {
55 |   height: 1em; }
56 | 
57 | #bar-2 {
58 |   height: 2em; }
59 | 
60 | #bar-3 {
61 |   height: 3em; }
62 | 
63 | #bar-4 {
64 |   height: 4em; }
65 | 


--------------------------------------------------------------------------------
/day-12/tutorial-code/styles.scss:
--------------------------------------------------------------------------------
 1 | /* Day 12 - @if and @for directives */
 2 | 
 3 | // serif or sans-serif
 4 | $type: sans-serif;
 5 | 
 6 | body {
 7 |     @if $type == serif {
 8 |         font-family: Georgia, serif;
 9 |     } @else if $type == sans-serif {
10 |         font-family: Arial, sans-serif;
11 |     }
12 | }
13 | 
14 | // cold, warm, neutral
15 | $theme: neutral;
16 | 
17 | .button {
18 |     @if $theme == warm {
19 |         background-color: orange;
20 |     } @else if $theme == cold {
21 |         background-color: blue;
22 |     } @else {
23 |         background-color: gray;
24 |     }
25 | }
26 | 
27 | 
28 | // @for $i from 1 to 3 {
29 | @for $i from 1 through 3 {
30 |     .cell {
31 |         background: blue;
32 |     }
33 | }
34 | 
35 | $comment-count: 10;
36 | 
37 | // @for $i from 1 through $comment-count {
38 | @for $i from $comment-count through 1 {
39 |     #comment-#{$i}:before {
40 |         content: "#{$i}";
41 |     }
42 | }
43 | 
44 | .bar {
45 |     width: 2em;
46 |     display: inline-block;
47 |     background: #ccc;
48 |     margin-right: 1px;
49 |     float: left;
50 | }
51 | 
52 | @for $j from 1 through 4 {
53 |     #bar-#{$j} {
54 |         @extend .bar;
55 | 
56 |         height: 1em * $j;
57 |     }
58 | }
59 | 


--------------------------------------------------------------------------------
/day-13/base/styles.scss:
--------------------------------------------------------------------------------
1 | /* Day 13 - @each and @while directives */
2 | 


--------------------------------------------------------------------------------
/day-13/exercise-answer/answer.scss:
--------------------------------------------------------------------------------
 1 | /* Day 13 Exercise Answer */
 2 | 
 3 | /* @each directive */
 4 | @each
 5 | $network, $color, $text in
 6 | (twitter, #58ABEC, "Follow us on Twitter"),
 7 | (facebook, #3E578D, "Connect with us on Facebook"),
 8 | (email, #96CC6B, "Email us") {
 9 |     #social-#{$network} {
10 |         background: url("images/icon-social-#{$network}.png");
11 |         color: $color;
12 | 
13 |         &:before {
14 |             content: $text;
15 |         }
16 |     }
17 | }
18 | 
19 | 
20 | 
21 | /* @while directive */
22 | $counter: 10;
23 | 
24 | @while $counter > 0 {
25 |     .element-#{$counter} {
26 |         height: 2.5em * $counter;
27 |     }
28 | 
29 |     $counter: $counter - 2;
30 | }
31 | 


--------------------------------------------------------------------------------
/day-13/exercise-code/exercise.css:
--------------------------------------------------------------------------------
 1 | /* Day 13 Exercise
 2 |  *
 3 |  * This is a .css file.
 4 |  *
 5 |  * Your assignment is to write the Sass code responsible for generating this.
 6 |  *
 7 |  * You should use the least amount of Sass code possible and don't use maps.
 8 |  *
 9 |  * In the end, compare it with the result from the /exercise-answer folder.
10 |  * Good luck! */
11 | 
12 | /* @each directive exercise outcome */
13 | #social-twitter {
14 |     background: url("images/icon-social-twitter.png");
15 |     color: #58ABEC;
16 | }
17 | #social-twitter:before {
18 |     content: "Follow us on Twitter";
19 | }
20 | 
21 | #social-facebook {
22 |     background: url("images/icon-social-facebook.png");
23 |     color: #3E578D;
24 | }
25 | #social-facebook:before {
26 |     content: "Connect with us on Facebook";
27 | }
28 | 
29 | #social-email {
30 |     background: url("images/icon-social-email.png");
31 |     color: #96CC6B;
32 | }
33 | #social-email:before {
34 |     content: "Email us";
35 | }
36 | 
37 | 
38 | 
39 | /* @while directive exercise outcome */
40 | .element-10 {
41 |     height: 25em;
42 | }
43 | 
44 | .element-8 {
45 |     height: 20em;
46 | }
47 | 
48 | .element-6 {
49 |     height: 15em;
50 | }
51 | 
52 | .element-4 {
53 |     height: 10em;
54 | }
55 | 
56 | .element-2 {
57 |     height: 5em;
58 | }
59 | 


--------------------------------------------------------------------------------
/day-13/tutorial-code/styles.css:
--------------------------------------------------------------------------------
 1 | /* Day 13 - @each and @while directives */
 2 | #featured-section {
 3 |   background-image: url("img/bg-featured.jpg"); }
 4 | 
 5 | #about-section {
 6 |   background-image: url("img/bg-about.jpg"); }
 7 | 
 8 | #contact-section {
 9 |   background-image: url("img/bg-contact.jpg"); }
10 | 
11 | .section-featured {
12 |   background-color: red; }
13 | 
14 | .section-about {
15 |   background-color: green; }
16 | 
17 | h1 {
18 |   font-size: 4em; }
19 | 
20 | h2 {
21 |   font-size: 2.8em; }
22 | 
23 | h3 {
24 |   font-size: 2em; }
25 | 
26 | h4 {
27 |   font-size: 1.2em; }
28 | 
29 | .item-1 {
30 |   top: 5em; }
31 | 
32 | .item-6 {
33 |   top: 30em; }
34 | 
35 | h1 {
36 |   font-size: 4em; }
37 | 
38 | h2 {
39 |   font-size: 2.8em; }
40 | 
41 | h3 {
42 |   font-size: 2em; }
43 | 
44 | h4 {
45 |   font-size: 1.2em; }
46 | 


--------------------------------------------------------------------------------
/day-13/tutorial-code/styles.scss:
--------------------------------------------------------------------------------
 1 | /* Day 13 - @each and @while directives */
 2 | 
 3 | @each $section in featured, about, contact {
 4 |     ##{$section}-section {
 5 |         background-image: url('img/bg-#{$section}.jpg');
 6 |     }
 7 | }
 8 | 
 9 | // @each $section, $color in (featured, red), (about, green) {
10 | //     .section-#{$section} {
11 | //         background-color: $color;
12 | //     }
13 | // }
14 | 
15 | $section-colors: (
16 |     featured: red,
17 |     about: green
18 | );
19 | 
20 | @each $section, $color in $section-colors {
21 |     .section-#{$section} {
22 |         background-color: $color;
23 |     }
24 | }
25 | 
26 | $headings: (
27 |     h1: 4em,
28 |     h2: 2.8em,
29 |     h3: 2em,
30 |     h4: 1.2em
31 | );
32 | 
33 | @each $element, $size in $headings {
34 |     #{$element} {
35 |         font-size: $size;
36 |     }
37 | }
38 | 
39 | $i: 1;
40 | 
41 | @while $i <= 10 {
42 |     .item-#{$i} {
43 |         top: 5em * $i;
44 |         $i: $i + 5;
45 |     }
46 | }
47 | 
48 | $j: 1;
49 | @while $j <= 4 {
50 |     h#{$j} {
51 |         font-size: map-get($headings, h#{$j});
52 |     }
53 | 
54 |     $j: $j + 1;
55 | }
56 | 


--------------------------------------------------------------------------------
/day-14/base/styles.scss:
--------------------------------------------------------------------------------
1 | /* Day 14 - Mixins */
2 | 


--------------------------------------------------------------------------------
/day-14/exercise-answer/answer.scss:
--------------------------------------------------------------------------------
 1 | /* Day 14 Exercise Answer */
 2 | 
 3 | @mixin gradient($from, $to) {
 4 |     background-color: $from;
 5 |     background-image: -webkit-linear-gradient(top, $from, $to);
 6 |     background-image: linear-gradient(to bottom, $from, $to);
 7 | }
 8 | 
 9 | @mixin rotate($amount) {
10 |     -webkit-transform: rotate($amount);
11 |     -ms-transform: rotate($amount);
12 |     transform: rotate($amount);
13 | }
14 | 
15 | @mixin 3dtransforms($perspective, $rotation, $style) {
16 |     -webkit-perspective: $perspective;
17 |     -ms-perspective: $perspective;
18 |     perspective: $perspective;
19 | 
20 |     -webkit-transform: rotateY($rotation);
21 |     -ms-transform: rotateY($rotation);
22 |     transform: rotateY($rotation);
23 | 
24 |     -webkit-transform-style: $style;
25 |     -ms-transform-style: $style;
26 |     transform-style: $style;
27 | }
28 | 


--------------------------------------------------------------------------------
/day-14/exercise-code/exercise.css:
--------------------------------------------------------------------------------
 1 | /* Day 14 Exercise
 2 |  *
 3 |  * This is a .css file.
 4 |  *
 5 |  * Your assignment is to write mixins for the following CSS3 properties.
 6 |  *
 7 |  * In the end, compare it with the result from the /exercise-answer folder.
 8 |  * Good luck! */
 9 | 
10 | .gradient {
11 |     background-color: #333333;
12 |     background-image: -webkit-linear-gradient(top, #333333, #888888);
13 |     background-image: linear-gradient(to bottom, #333333, #888888);
14 | }
15 | 
16 | .rotate {
17 |     -webkit-transform: rotate(45deg);
18 |     -ms-transform: rotate(45deg);
19 |     transform: rotate(45deg);
20 | }
21 | 
22 | .3dtransforms {
23 |     -webkit-perspective: 100px;
24 |     -ms-perspective: 100px;
25 |     perspective: 100px;
26 | 
27 |     -webkit-transform: rotateY(90deg);
28 |     -ms-transform: rotateY(90deg);
29 |     transform: rotateY(90deg);
30 | 
31 |     -webkit-transform-style: preserve-3d;
32 |     -ms-transform-style: preserve-3d;
33 |     transform-style: preserve-3d;
34 | }
35 | 


--------------------------------------------------------------------------------
/day-14/tutorial-code/styles.css:
--------------------------------------------------------------------------------
 1 | /* Day 14 - Mixins */
 2 | .section {
 3 |   font-size: 120%;
 4 |   font-weight: bold;
 5 |   border-color: #ff0000; }
 6 | 
 7 | .button {
 8 |   border-radius: 2em;
 9 |   font-size: 120%;
10 |   font-weight: bold;
11 |   border-color: #ff0000; }
12 | 
13 | .another-button {
14 |   border-radius: 10px;
15 |   font-size: 120%;
16 |   font-weight: bold;
17 |   border-color: #ff0000; }
18 | 
19 | * {
20 |   box-sizing: border-box; }
21 | 
22 | .element {
23 |   -webkit-box-shadow: 1px 1px 5px 0 #000000;
24 |   box-shadow: 1px 1px 5px 0 #000000; }
25 | 
26 | .element-2 {
27 |   -webkit-box-shadow: 1px 1px 5px 0 #000000, 2px 10px 15px rgba(0, 0, 0, 0.5);
28 |   box-shadow: 1px 1px 5px 0 #000000, 2px 10px 15px rgba(0, 0, 0, 0.5); }
29 | 


--------------------------------------------------------------------------------
/day-14/tutorial-code/styles.scss:
--------------------------------------------------------------------------------
 1 | /* Day 14 - Mixins */
 2 | 
 3 | @mixin featured {
 4 |     font-size: 120%;
 5 |     font-weight: bold;
 6 |     border-color: #ff0000;
 7 | }
 8 | 
 9 | .section {
10 |     // regular section CSS here
11 | 
12 |     @include featured;
13 | }
14 | 
15 | @mixin round($radius: 10px) {
16 |     border-radius: $radius;
17 | 
18 |     @include featured;
19 | }
20 | 
21 | .button {
22 |     @include round(2em);
23 | }
24 | 
25 | .another-button {
26 |     @include round;
27 | }
28 | 
29 | @mixin border-box {
30 |     * {
31 |         box-sizing: border-box;
32 |     }
33 | }
34 | 
35 | @include border-box;
36 | 
37 | @mixin box-shadow($args...) {
38 |     -webkit-box-shadow: $args;
39 |     box-shadow: $args;
40 | }
41 | 
42 | .element {
43 |     @include box-shadow(1px 1px 5px 0 #000000);
44 | }
45 | 
46 | .element-2 {
47 |     @include box-shadow(1px 1px 5px 0 #000000, 2px 10px 15px rgba(0, 0, 0, .5));
48 | }
49 | 


--------------------------------------------------------------------------------