Jason McCoy jasonkmccoy
jasonkmccoy
/ sass-display-inline-block-space-hack.css
Last active
August 29, 2015 14:16
— forked from blackfalcon/SassMeister-input-HTML.jade
display inline-block 0 space hack: This is a pretty simple hack, but one you don't commonly think of. When using display: inline-block there is a default 4px of space that shows up in the rendered output of the browser. This can be a real layout issue depending on how you are spacing your content blocks. And we really like display: inline-block …
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
| .block { | |
| width: 100%; | |
| height: 100px; | |
| background-color: orange; | |
| font-size: 0; } | |
| .cube { | |
| width: 20%; | |
| height: 100%; | |
| background-color: blue; |
jasonkmccoy
/ sass-at-root-feature.css
Last active
August 29, 2015 14:16
Sass 3.3 at-root feature. The new use of the & and @at-root in Sass is pretty much blowing my mind!
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
| @media print { | |
| .page { | |
| width: 8in; | |
| } | |
| } | |
| .page { | |
| color: red; | |
| } | |
| .block-name[role=navigation] { |
jasonkmccoy
/ sass-update-single-value-sass-map.css
Last active
August 29, 2015 14:16
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
| .block { | |
| color: orange; | |
| } | |
| .block { | |
| color: blue; | |
| } |
jasonkmccoy
/ sass-sticky-footer-example.html
Last active
August 29, 2015 14:16
The Box Model example. This is a simple example of how the Box Model works and reacts to different values of the box-sizing attribute.
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
| /* CSS output */ | |
| /* line 3, master.scss */ | |
| foo { color: blue; } | |
| @media screen and (max-width: 479px) { /* line 3, sass-map-breakpoints.scss */ | |
| foo { content: xSmall only; } } | |
| @media screen and (min-width: 480px) and (max-width: 749px) { /* line 3, sass-map-breakpoints.scss */ | |
| foo { content: small only; } } | |
| @media screen and (min-width: 750px) and (max-width: 959px) { /* line 3, sass-map-breakpoints.scss */ | |
| foo { content: medium only; } } |
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
| // ---- | |
| // libsass (v2.0.0) | |
| // ---- | |
| @import "sass-list-maps"; | |
| /* | |
| SASS LIST-MAPS 1.0.0-b3 | |
| A polyfill for Sass 3.3.x' "map" data-type, using lists |
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.3.12) | |
| // Compass (v1.0.0.alpha.21) | |
| // ---- | |
| // Breakpoints map | |
| // @type Map | |
| $breakpoints: ( | |
| // Regular breakpoints | |
| "small": "(max-width: 500px)", |
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
| .element { | |
| top: 0; | |
| left: 1em; | |
| position: relative; | |
| } | |
| .other-element { | |
| top: 1em; | |
| right: 10%; | |
| position: fixed; |
jasonkmccoy
/ sass-size-mixin.scss
Created
February 23, 2015 01:21
Sass mixin for setting an element's width and height
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
| /* SCSS Code */ | |
| @mixin size($width, $height: $width) { | |
| width: $width; | |
| height: $height; | |
| } | |
| // Example Usage | |
| .element { | |
| @include size(100%); |