Last active
December 29, 2024 13:08
-
-
Save necolas/5646308 to your computer and use it in GitHub Desktop.
Transparent CSS preprocessing
This file contains 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
/** | |
* Input CSS | |
* No custom syntax. Just write "future" CSS without vendor prefixed properties or values. | |
* Use a subset of CSS variables (not dynamic or scoped). | |
* Specify a level of browser support: IE 8+, etc. | |
* Tool takes browser support and specific declarations to generate vendor-specific variants. | |
* This source code is just CSS and works in any browser with adequate support. | |
* One day, perhaps you'll have no need to preprocess this code. | |
*/ | |
:root { | |
var-textColor: red; | |
} | |
.selector { | |
background-image: linear-gradient(0deg, #fff, #eee); | |
box-sizing: border-box; | |
color: var(textColor); | |
opacity: 0.5; | |
} |
This file contains 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
/** | |
* Output CSS | |
* Tool generates all the vendor-prefixed code needed to meet your level of browser support. | |
* See: https://github.com/visionmedia/rework | |
*/ | |
:root { | |
var-textColor: red; | |
} | |
.selector { | |
background-image: -moz-linear-gradient(90deg, #fff, #eee); | |
background-image: -ms-gradient(90deg, #fff, #eee); | |
background-image: -o-gradient(90deg, #fff, #eee); | |
background-image: -webkit-gradient(90deg, #fff, #eee); | |
background-image: linear-gradient(0deg, #fff, #eee); | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
color: red; | |
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; | |
opacity: 0.5; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is full of win. Where's the code that generates this? I checked Rework but Rework seems to to more than just making your CSS legacy-proof.