Created
December 4, 2015 05:02
-
-
Save lukewatts/71a3e793133ae7e8e575 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| doctype html | |
| html(lang="en") | |
| head | |
| meta(charset="UTF-8") | |
| title Mastering Sass: Chapter 2 | |
| link(href="css/style.css" rel="stylesheet") | |
| body | |
| div | |
| - var i = 1 | |
| each heading in ["h1", "h2", "h3", "h4", "h5", "h6"] | |
| #{heading} Heading #{i} | |
| - i++ | |
| p | |
| | This is a paragraph with | |
| em emphasised | |
| | text, | |
| strong strong | |
| | text and a | |
| a(href="#") link. | |
| p | |
| img(src="http://placehold.it/600x300" alt="Image from Placehold.it") | |
| | Um yesbaby terry thomas admiral socially mobile brush mexican bad guy, groucho marx admiral um yesbaby rock n roll star sportacus mexican brush bad guy furry facial friend terry thomas socially mobile man markings, bad guy pit fighter sportacus terry thomas um yesbaby mexican cigars groucho marx man markings admiral challenge you to a duel robert winston rock n roll star brush socially mobile furry facial friend. Furry facial friend village people lady magnets I drink your milkshake louis xiii, sweat irrigator, glorious facial hair mustachioed east european louis xiii Freddie mercury hairy kiss. I drink your milkshake lady magnets furry facial friend village people basil fawlty, I drink your milkshake lady magnets louis xiii east european et village people sweat irrigator, mustachioed Freddie mercury hairy kiss. brandy basil fawlty jimi hendrix furry facial friend glorious facial hair. | |
| p | |
| img(src="http://placehold.it/300x200" alt="Image from Placehold.it" style="float:left;") | |
| | Mexican’t great dictator burt reynolds graeme souness, sportacus boogie nights got milk graeme souness caterpillar professor plum sam elliott mexican’t great dictator burt reynolds id furry facial friend, mexican’t got milk burt reynolds sam elliott id boogie nights sportacus waiter top gun caterpillar great dictator elit furry facial friend graeme souness professor plum? Waiter david seaman musketeer mr frothy-top knavish rogue, waiter doctor strange david seaman et sodales cum terry thomas iron tache waiter musketeer mr frothy-top knavish rogue tony stark, knavish rogue musketeer mark lawrenson iron tache terry thomas stiff upper lip waiter doctor strange waiter et sodales cum give him what-for handsome tony stark david seaman face mop mr frothy-top bruce forsyth circus strongman? | |
| ul | |
| - var n = 1 | |
| while n <= 4 | |
| li List Item #{n++} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // Sass (v3.4.14) | |
| // Compass (v1.0.3) | |
| // ---- | |
| // mastering-sass/ch02/scss/style.scss | |
| $base-font-family-sans: sans-serif; | |
| $base-font-family-serif: serif; | |
| $base-font-family-code: monospace; | |
| $base-font-size: 1rem; | |
| $base-line-height: 1.5; | |
| $base-font-family: $base-font-family-sans; | |
| $base-headings-font-family: $base-font-family-serif; | |
| $base-headings: (h1, $base-headings-font-family), (h2, $base-font-family), (h3, $base-headings-font-family), (h4, $base-headings-font-family), (h5, $base-headings-font-family), (h6, $base-headings-font-family); | |
| // ========================================================================================== | |
| // mastering-sass/ch02/scss/helpers/_mixins.scss | |
| // ========================================================================================== | |
| // @import helpers/functions | |
| // ============================== | |
| // FUNCTIONS | |
| // ============================== | |
| // mastering-sass/ch02/scss/helpers/_functions.scss | |
| @function base-font-size-calc($current-font-family: $base-font-family) { | |
| @if type-of($current-font-family) != string { | |
| @error "base-font-size-calc() takes a string as it's parameter. #{type-of($current-font-family)} given."; | |
| } | |
| @else { | |
| @return if($current-font-family == $base-font-family-serif, $base-font-size * 1.15, $base-font-size); | |
| } | |
| } | |
| // mastering-sass/ch02/scss/helpers/_functions.scss | |
| @function base-heading-sizes-calc($heading: 2, $font-family: $base-headings-font-family) { | |
| @if type-of($heading) != number { | |
| @warn "$heading must be a number, #{type-of($heading)} type was given."; | |
| @return null; | |
| } @else { | |
| $h4-font-size: base-font-size-calc($font-family); | |
| $h1-font-size: $h4-font-size * 2; | |
| $h2-font-size: $h1-font-size / 1.3333; | |
| $h3-font-size: $h2-font-size / 1.2821; | |
| $h5-font-size: $h4-font-size / 1.2048; | |
| $h6-font-size: $h5-font-size / 1.2388; | |
| $headings: $h1-font-size, $h2-font-size, $h3-font-size, $h4-font-size, $h5-font-size, $h6-font-size; | |
| @return nth($headings, $heading); | |
| }} | |
| .test-warn { | |
| content: base-heading-sizes-calc($base-font-family-sans, 2); | |
| } | |
| // mastering-sass/ch02/scss/helpers/_functions.scss | |
| @function base-heading-line-height($heading: 2, $font-family: $base-headings-font-family) { | |
| $h1-line-height: base-heading-sizes-calc(2, $font-family); | |
| $h2-line-height: base-heading-sizes-calc(3, $font-family); | |
| $h3-line-height: base-heading-sizes-calc(4, $font-family); | |
| $h4-line-height: base-heading-sizes-calc(5, $font-family); | |
| $h5-line-height: base-heading-sizes-calc(6, $font-family); | |
| $h6-line-height: base-heading-sizes-calc(6, $font-family) / $h1-line-height; | |
| $line-heights: $h1-line-height, $h2-line-height, $h3-line-height, $h4-line-height, $h5-line-height, $h6-line-height; | |
| @return nth($line-heights, $heading); | |
| } | |
| // ========================================================================================== | |
| // mastering-sass/ch02/scss/helpers/_mixins.scss | |
| // ========================================================================================== | |
| // @import helpers/mixins | |
| // ============================== | |
| // MIXINS | |
| // ============================== | |
| // mastering-sass/ch02/scss/helpers/_mixins.scss | |
| @mixin base-font-family-sizing($current-font-family: $base-font-family) { | |
| font-size: base-font-size-calc(); | |
| font-family: $current-font-family; | |
| line-height: $base-line-height; | |
| margin-bottom: $base-font-size * $base-line-height; | |
| } | |
| // mastering-sass/scss/helpers/_mixins.scss | |
| @mixin base-headings-font-family-sizing($heading: 2, $current-font-family: $base-headings-font-family) { | |
| font-family: $current-font-family; | |
| font-size: base-heading-sizes-calc($heading, $current-font-family); | |
| line-height: base-heading-line-height($heading, $current-font-family); | |
| } | |
| // mastering-sass/scss/helpers/_mixins.scss | |
| @mixin base-headings { | |
| $i: 1; | |
| @each $heading, $family in $base-headings { | |
| #{$heading} { | |
| @include base-headings-font-family-sizing($i, $family); | |
| } | |
| $i: $i + 1; | |
| } | |
| } | |
| // ========================================================================================== | |
| // mastering-sass/ch02/scss/style.scss | |
| // ========================================================================================== | |
| // ============================== | |
| // STYLE | |
| // ============================== | |
| *, *::before, *::after { | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| font-family: serif; | |
| font-size: 100%; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| html, body { | |
| padding: 0; | |
| margin: 0; | |
| } | |
| body > div { | |
| max-width: 38rem; | |
| margin: 0 auto; | |
| } | |
| p { | |
| @include base-font-family-sizing; | |
| } | |
| @include base-headings; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| *, *::before, *::after { | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| font-family: serif; | |
| font-size: 100%; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| html, body { | |
| padding: 0; | |
| margin: 0; | |
| } | |
| body > div { | |
| max-width: 38rem; | |
| margin: 0 auto; | |
| } | |
| p { | |
| font-size: 1rem; | |
| font-family: sans-serif; | |
| line-height: 1.5; | |
| margin-bottom: 1.5rem; | |
| } | |
| h1 { | |
| font-family: serif; | |
| font-size: 2.3rem; | |
| line-height: 1.72504rem; | |
| } | |
| h2 { | |
| font-family: sans-serif; | |
| font-size: 1.50004rem; | |
| line-height: 1.16998rem; | |
| } | |
| h3 { | |
| font-family: serif; | |
| font-size: 1.34548rem; | |
| line-height: 1.15rem; | |
| } | |
| h4 { | |
| font-family: serif; | |
| font-size: 1.15rem; | |
| line-height: 0.95452rem; | |
| } | |
| h5 { | |
| font-family: serif; | |
| font-size: 0.95452rem; | |
| line-height: 0.77052rem; | |
| } | |
| h6 { | |
| font-family: serif; | |
| font-size: 0.77052rem; | |
| line-height: 0.44666; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Mastering Sass: Chapter 2</title> | |
| <link href="css/style.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div> | |
| <h1>Heading 1</h1> | |
| <h2>Heading 2</h2> | |
| <h3>Heading 3</h3> | |
| <h4>Heading 4</h4> | |
| <h5>Heading 5</h5> | |
| <h6>Heading 6</h6> | |
| <p>This is a paragraph with <em>emphasised </em>text, <strong>strong </strong>text and a <a href="#">link.</a></p> | |
| <p><img src="http://placehold.it/600x300" alt="Image from Placehold.it">Um yesbaby terry thomas admiral socially mobile brush mexican bad guy, groucho marx admiral um yesbaby rock n roll star sportacus mexican brush bad guy furry facial friend terry thomas socially mobile man markings, bad guy pit fighter sportacus terry thomas um yesbaby mexican cigars groucho marx man markings admiral challenge you to a duel robert winston rock n roll star brush socially mobile furry facial friend. Furry facial friend village people lady magnets I drink your milkshake louis xiii, sweat irrigator, glorious facial hair mustachioed east european louis xiii Freddie mercury hairy kiss. I drink your milkshake lady magnets furry facial friend village people basil fawlty, I drink your milkshake lady magnets louis xiii east european et village people sweat irrigator, mustachioed Freddie mercury hairy kiss. brandy basil fawlty jimi hendrix furry facial friend glorious facial hair.</p> | |
| <p><img src="http://placehold.it/300x200" alt="Image from Placehold.it" style="float:left;">Mexican’t great dictator burt reynolds graeme souness, sportacus boogie nights got milk graeme souness caterpillar professor plum sam elliott mexican’t great dictator burt reynolds id furry facial friend, mexican’t got milk burt reynolds sam elliott id boogie nights sportacus waiter top gun caterpillar great dictator elit furry facial friend graeme souness professor plum? Waiter david seaman musketeer mr frothy-top knavish rogue, waiter doctor strange david seaman et sodales cum terry thomas iron tache waiter musketeer mr frothy-top knavish rogue tony stark, knavish rogue musketeer mark lawrenson iron tache terry thomas stiff upper lip waiter doctor strange waiter et sodales cum give him what-for handsome tony stark david seaman face mop mr frothy-top bruce forsyth circus strongman?</p> | |
| <ul> | |
| <li>List Item 1</li> | |
| <li>List Item 2</li> | |
| <li>List Item 3</li> | |
| <li>List Item 4</li> | |
| </ul> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment