Created
September 2, 2014 05:17
-
-
Save htmlr/fac58e062892d7bcaba2 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
| <div class="container"> | |
| <div class="message">red</div> | |
| <div style="3000px;color:#fff">adawdawdawd</div> | |
| awdawd | |
| ad | |
| adawdawda | |
| </div> | |
| <div class="foo">Foobar</div> | |
| <div class="bar">awdadaw</div> |
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.14) | |
| // Compass (v1.0.1) | |
| // ---- | |
| @import "compass/css3"; | |
| html,body { | |
| height:100%; | |
| background-color:#000; | |
| } | |
| // Using variables | |
| $opaque-white: rgba(#ffffff,0.5); | |
| .test2 { | |
| background-color:$opaque-white; | |
| } | |
| // Using some of Compass's pre-installed mixins | |
| // for cross-browser rules | |
| .bar { | |
| background:yellow; | |
| height:100px; | |
| @include opacity(0.5); | |
| } | |
| // Creating mixins to solve for cross-browser styling | |
| //E.g. cross-browser transparent bg with neccessary IE filters | |
| // source: http://stackoverflow.com/a/16230097/417933 | |
| @mixin alpha-color($foreground-color, $property: 'background-color', $background-context-color: #fff) { | |
| #{$property}: mix( | |
| fade-in($foreground-color, 1), | |
| $background-context-color, | |
| percentage(opacity($foreground-color)) | |
| ); // Browsers without color opacity | |
| #{$property}: $foreground-color; // Decent browsers | |
| @if $property == 'background-color' { | |
| .lt-ie9 & { // IE8 has background filters; use them instead | |
| #{$property}: transparent; | |
| $ie-hex: ie-hex-str($foreground-color); | |
| filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie-hex},endColorstr=#{$ie-hex}); | |
| zoom: 1; | |
| } | |
| } | |
| } | |
| .test { | |
| width:200px; | |
| height:200px; | |
| @include alpha-color(rgba(255, 0, 0, .65), background-color, #000000); | |
| border-width:5px; | |
| border-style:solid; | |
| @include alpha-color(rgba(255, 255, 255, .65), border-color, #000000); | |
| } | |
| // Creating base classes which you can then | |
| // extend from | |
| .ghostVerticalAlign { | |
| // apply ghost element | |
| &:before { | |
| content: ''; | |
| display: inline-block; | |
| @include inline-block(); | |
| height: 100%; | |
| vertical-align: middle; | |
| margin-right: -0.25em; /* Adjusts for spacing */ | |
| } | |
| // apply neccessary inline block styles to child | |
| > * { | |
| @include inline-block(); | |
| vertical-align: middle; | |
| } | |
| } | |
| .container { | |
| height:100%; | |
| text-align: center; | |
| @extend .ghostVerticalAlign; | |
| } | |
| .message { | |
| background:red; | |
| } | |
| // Passing paramteres to our mixins to do calculations | |
| @mixin valign($eleHeight,$position:absolute) { | |
| @if($position == ""){ | |
| position:absolute; | |
| } | |
| position:$position; | |
| top:50%; | |
| margin-top:- ($eleHeight / 2); | |
| } | |
| .foo { | |
| background:yellow; | |
| height:100px; | |
| @include valign(100px,fixed) | |
| } | |
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
| html, body { | |
| height: 100%; | |
| background-color: #000; | |
| } | |
| .test2 { | |
| background-color: rgba(255, 255, 255, 0.5); | |
| } | |
| .bar { | |
| background: yellow; | |
| height: 100px; | |
| filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); | |
| opacity: 0.5; | |
| } | |
| .test { | |
| width: 200px; | |
| height: 200px; | |
| background-color: #a50000; | |
| background-color: rgba(255, 0, 0, 0.65); | |
| border-width: 5px; | |
| border-style: solid; | |
| border-color: #a5a5a5; | |
| border-color: rgba(255, 255, 255, 0.65); | |
| } | |
| .lt-ie9 .test { | |
| background-color: transparent; | |
| filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#A6FF0000,endColorstr=#A6FF0000); | |
| zoom: 1; | |
| } | |
| .ghostVerticalAlign:before, .container:before { | |
| content: ''; | |
| display: inline-block; | |
| display: inline-block; | |
| vertical-align: middle; | |
| *vertical-align: auto; | |
| *zoom: 1; | |
| *display: inline; | |
| height: 100%; | |
| vertical-align: middle; | |
| margin-right: -0.25em; | |
| /* Adjusts for spacing */ | |
| } | |
| .ghostVerticalAlign > *, .container > * { | |
| display: inline-block; | |
| vertical-align: middle; | |
| *vertical-align: auto; | |
| *zoom: 1; | |
| *display: inline; | |
| vertical-align: middle; | |
| } | |
| .container { | |
| height: 100%; | |
| text-align: center; | |
| } | |
| .message { | |
| background: red; | |
| } | |
| .foo { | |
| background: yellow; | |
| height: 100px; | |
| position: fixed; | |
| top: 50%; | |
| margin-top: -50px; | |
| } |
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
| <div class="container"> | |
| <div class="message">red</div> | |
| <div style="3000px;color:#fff">adawdawdawd</div> | |
| awdawd | |
| ad | |
| adawdawda | |
| </div> | |
| <div class="foo">Foobar</div> | |
| <div class="bar">awdadaw</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment