Whenever we change our templates we still have to use our build script and this can get annoying. Thankfully with webpack-dev-server and BrowserSync we can fix this:
npm i -D browser-sync browser-sync-webpack-plugin webpack-dev-server
BrowserSync will act like a proxy, waiting for webpack to do its thing and then reloading the browser for us.
| // stolen from @charlotte_dann : https://twitter.com/charlotte_dann/status/557511812430983168 | |
| @mixin trim(){ | |
| > *:first-child { | |
| } | |
| > *:last-child { | |
| margin-bottom: 0; | |
| } | |
| } |
| /*Box sizing (the nuclear option) */ | |
| *, *:before, *:after { | |
| -ms-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing:border-box; | |
| box-sizing: border-box; | |
| } | |
| /* Fix font rendering defaults */ | |
| html, button { |
| .list--ticked-alt { | |
| @extend .cf; | |
| background-color: $color--red; | |
| width: percentage(25/100); | |
| } |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> | |
| </head> | |
| <body> | |
| <div> | |
| <h1 class="ex1">mask-image</h1> | |
| <h1 class="ex2">mask-image</h1> | |
| <h1 class="ex3">mask-image</h1> |
| @mixin sprite-bg($crop, $x:0, $y:$x, $hover:true) { | |
| $i:0; | |
| @each $part in $sprite { | |
| @if ($part == $crop) { | |
| $i:index($sprite, $part); | |
| } | |
| } | |
| @if $i == 0 { | |
| @warn "sprite-bg can't find '#{$crop}' in $sprite"; | |
| } |