precss - Use Sass-like markup in your CSS

  •        21

PreCSS lets you use Sass-like markup and staged CSS features in CSS. PreCSS combines Sass-like syntactical sugar โ€” like variables, conditionals, and iterators โ€” with emerging CSS features โ€” like color functions, logical and custom properties, media query ranges, and image sets.

https://github.com/jonathantneal/precss#readme
https://github.com/jonathantneal/precss

Dependencies:

postcss : ^6.0.19
postcss-advanced-variables : ^2.3.3
postcss-atroot : ^0.1.3
postcss-extend-rule : ^1.1.0
postcss-nested : ^3.0.0
postcss-preset-env : ^3.2.2
postcss-property-lookup : ^2.0.0

Tags
Implementation
License
Platform

   




Related Projects

postcss-scss - SCSS parser for PostCSS.

  •    Javascript

A SCSS parser for PostCSS.This module does not compile SCSS. It simply parses mixins as custom at-rules & variables as properties, so that PostCSS plugins can then transform SCSS source code alongside CSS.

postcss-mixins - PostCSS plugin for mixins

  •    Javascript

PostCSS plugin for mixins.Note, that you must set this plugin before postcss-simple-vars and postcss-nested.

postcss-nested - PostCSS plugin to unwrap nested rules like how Sass does it.

  •    Javascript

PostCSS plugin to unwrap nested rules like how Sass does it.Use postcss-current-selector after this plugin if you want to use current selector in properties or variables values.

postcss-simple-vars - PostCSS plugin for Sass-like variables

  •    Javascript

PostCSS plugin for Sass-like variables.You can use variables inside values, selectors and at-rule’s parameters.

postcss-pxtorem - Convert pixel units to rem (root em) units using PostCSS

  •    Javascript

A plugin for PostCSS that generates rem units from pixel units. Pixels are the easiest unit to use (opinion). The only issue with them is that they don't let browsers change the default font size of 16. This script converts every px value to a rem from the properties you choose to allow the browser to set the font size.


css-colorguard - Keep a watchful eye on your css colors.

  •    Javascript

Every CSS project starts out with good intentions, but inevitably, one too many people eye-dropper colors into nooks and crannies that you never knew existed. CSS Colorguard helps you maintain the color set that you want, and warns you when colors you've added are too similar to ones that already exist. Naturally, it's all configurable to your tastes. Colorguard uses the CIEDE2000 algorithm to determine the similarity of each of the colors in your CSS file. This algorithm is quite complex, but is used in the broadcasting community as the best approximation of human ability to discern differences in color. RGB on the other hand, is pretty bad at representing differences in color purely based on the numerical difference of the hex values.

postcss-assets - An asset manager for PostCSS

  •    Javascript

PostCSS Assets is an asset manager for CSS. It isolates stylesheets from environmental changes, gets image sizes and inlines files. Note: all of the listed options below are parameters for the assets object, not the top level postcss options object.

postcss-font-magician - Magically generate all the @font-face rules

  •    Javascript

Font Magician is a PostCSS plugin that magically generates all of your @font-face rules. Never write a @font-face rule again. Just use the font and font-family properties as if they were magic.

postcss-write-svg - Write SVGs directly in CSS

  •    Javascript

Write SVG lets you write SVGs directly in CSS. @svg at-rules generate SVG elements available to CSS. Within an @svg, descendant at-rules (like @rect) are interpreted as elements, while declarations (like width) are interpreted as attributes.

postcss - Transforming styles with JS plugins

  •    Javascript

PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.PostCSS is used by industry leaders including Wikipedia, Twitter, Alibaba, and JetBrains. The Autoprefixer PostCSS plugin is one of the most popular CSS processors.

object-fit-images - ๐Ÿ—ป Polyfill object-fit/object-position on <img>: IE9, IE10, IE11, Edge, Safari,

  •    Javascript

๐Ÿ—ป Polyfill object-fit/object-position on <img>: IE9, IE10, IE11, Edge, Safari, ... To generate the font-family automatically, you can use the PostCSS plugin or the SCSS/SASS/Less mixins.

object-fit-images - ๐Ÿ—ป Polyfill object-fit/object-position on <img>: IE9, IE10, IE11, Edge, Safari,

  •    Javascript

๐Ÿ—ป Polyfill object-fit/object-position on <img>: IE9, IE10, IE11, Edge, Safari, ... To generate the font-family automatically, you can use the PostCSS plugin or the SCSS/SASS/Less mixins.

awesome-sass - ๐ŸŽจ Curated list of awesome Sass and SCSS frameworks, libraries, style guides, articles, and resources

  •    

Curated list of awesome Sass and SCSS frameworks, libraries, style guides, articles, and resources. Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly.

cq-prolyfill - Prolyfill for CSS Container Queries

  •    Javascript

This is a prolyfill for a special version of container queries (aka element queries). You can read more about the idea and how they work internally in this article. For more information take a look at the usage documentation.

postcss-bem-linter - A BEM linter for postcss

  •    Javascript

A PostCSS plugin to lint BEM-style CSS.BEM-style describes CSS that follows a more-or-less strict set of conventions determining what selectors can be used. Typically, these conventions require that classes begin with the name of the component (or "block") that contains them, and that all characters after the component name follow a specified pattern. Original BEM methodology refers to "blocks", "elements", and "modifiers"; SUIT refers to "components", "descendants", and "modifiers". You might have your own terms for similar concepts.

colors - Smarter defaults for colors on the web.

  •    CSS

Better default colors for the web. A collection of skin classes for faster prototyping and nicer looking sites. The built CSS is located in the css directory. It contains an unminified and minified version. You can either cut and paste that css or link to it directly in your html.

bourbon - A Lightweight Sass Tool Set

  •    Ruby

Bourbon is a library of Sass mixins and functions that are designed to make you a more efficient style sheet author. Alternatively, you can install Bourbon with Bower.

postcss-cssnext - :cyclone: PostCSS plugin to use tomorrow's CSS syntax, today.

  •    Javascript

PostCSS plugin to use tomorrow’s CSS syntax, today. PostCSS-cssnext is a PostCSS plugin that helps you to use the latest CSS syntax today. It transforms CSS specs into more compatible CSS so you don’t need to wait for browser support.

grunt-contrib-sass - Compile Sass to CSS.

  •    Javascript

Run this task with the grunt sass command. Sass is a preprocessor that adds nested rules, variables, mixins and functions, selector inheritance, and more to CSS. Sass files compile into well-formatted, standard CSS to use in your site or application.

webpack-blocks - ๐Ÿ“ฆ Configure webpack using functional feature blocks.

  •    Javascript

Functional building blocks for your webpack config: easier way to configure webpack and to share configuration between projects.Ready to use blocks to configure popular tools like Babel, PostCSS, Sass, TypeScript, etc., as well as best practices like extracting CSS — all with just one line of configuration.





We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.