Skip to content

Instantly share code, notes, and snippets.

@necolas necolas/input.css
Last active Apr 6, 2018

Embed
What would you like to do?
Transparent CSS preprocessing
/**
* 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;
}
/**
* 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;
}
@anthonyshort

This comment has been minimized.

Copy link

anthonyshort commented May 25, 2013

Sass actually uses a potential valid CSS syntax. At-rules, blocks and properties are being used in ways that are technically matching the spec.

@MoOx

This comment has been minimized.

Copy link

MoOx commented May 25, 2013

One thing I miss is the point of the var on the output. It's useless now it as already been used ?

@pbakaus

This comment has been minimized.

Copy link

pbakaus commented May 28, 2013

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.