svelte-preprocess - A ✨ magical ✨ Svelte preprocessor with sensible defaults and support for: PostCSS, SCSS, Less, Stylus, Coffeescript, TypeScript, Pug and much more

•    TypeScript

---

A Svelte preprocessor with sensible defaults and support for: PostCSS, SCSS, Less, Stylus, CoffeeScript, TypeScript, Pug and much more. Svelte's own parser understands only JavaScript, CSS and its HTML-like syntax. To make it possible to write components in other languages, such as TypeScript or SCSS, Svelte provides the preprocess API, which allows to easily transform the content of your markup and your style/script tags.

svelte preprocess hacktoberfest sapper less stylus sass scss pug coffeescript

styl - Flexible and fast modular CSS preprocessor built on top of Rework

•    Javascript

---

Work-in-progress CSS preprocessor. Spiritual successor of Stylus. Built on top of Rework.Styl is basically an opinionated configuration of Rework. It does not aim for feature parity with Stylus.

css stylus preprocessor style

myth - A CSS preprocessor that acts like a polyfill for future versions of the spec.

•    Javascript

---

CSS the way it was imagined. Myth is a preprocessor that lets you write pure CSS without having to worry about slow browser support, or even slow spec approval. It's like a CSS polyfill.

preprocessor pre-processor postprocessor post-processor rework css pure autoprefixer postcss sass less stylus style gradients variables media-queries calc prefixes

syntastic - Syntax checking hacks for vim

•    Vim

---

Syntastic is a syntax checking plugin for Vim created by Martin Grenfell. It runs files through external syntax checkers and displays any resulting errors to the user. This can be done on demand, or automatically as files are saved. If syntax errors are detected, the user is notified and is happy because they didn't have to compile their code or execute their script to find them. At the time of this writing, syntastic has checking plugins for ACPI Source Language, ActionScript, Ada, Ansible configurations, API Blueprint, AppleScript, AsciiDoc, Assembly languages, BEMHTML, Bro, Bourne shell, C, C++, C#, Cabal, Chef, CMake, CoffeeScript, Coco, Coq, CSS, Cucumber, CUDA, D, Dart, DocBook, Dockerfile, Dust, Elixir, Erlang, eRuby, Fortran, Gentoo metadata, GLSL, Go, Haml, Haskell, Haxe, Handlebars, HSS, HTML, Java, JavaScript, JSON, JSX, Julia, LESS, Lex, Limbo, LISP, LLVM intermediate language, Lua, Markdown, MATLAB, Mercury, NASM, Nix, Objective-C, Objective-C++, OCaml, Perl, Perl 6, Perl POD, PHP, gettext Portable Object, OS X and iOS property lists, Pug (formerly Jade), Puppet, Python, QML, R, Racket, RDF TriG, RDF Turtle, Relax NG, reStructuredText, RPM spec, Ruby, SASS/SCSS, Scala, Slim, SML, Solidity, Sphinx, SQL, Stylus, Tcl, TeX, Texinfo, Twig, TypeScript, Vala, Verilog, VHDL, Vim help, VimL, Vue.js, xHtml, XML, XSLT, XQuery, YACC, YAML, YANG data models, YARA rules, z80, Zope page templates, and Zsh. See the manual for details about the corresponding supported checkers (:help syntastic-checkers in Vim).

vim-plugin syntax-checking syntax-checker lint linters lint-checking

stylint - Improve your Stylus code with Stylint

•    CSS

---

NOTE: We are currently working on a 2.0 release. Bug fixing will not be a priority during this process, but we will try to make sure every bug is squashed after that. Follow the project, milestone and issue for progress. Please contribute if you have the time! Both with code, but also with ideas and features.

cli css hinter lint linter styl style stylint stylus stylus-hint stylus-lint

atom-pigments - An Atom package to display colors in project and files.

•    CoffeeScript

---

Pigments will scan source files in your project directories looking for colors and will build a palette with all of them. Then for each opened file, it will use the palette to evaluate the value of a given color. The legible source paths can be defined through various settings either at the global or per project level. By default colors in every file will be highlighted, to limit the display of colors to the desired filetype only please see the Defining Where Pigments Applies below. Pigments supports out of the box most of the color transformations functions and expressions of the three biggest CSS pre-processors out there, namely LESS, Sass and Stylus. However, it doesn't mean pigments is able to parse and understand all of these languages constructs. For the moment, Pigments' aim is to support the widest range of usage, even if it implies reducing its ability to parse certain complex constructs. You can refer to the parser specs for an exhaustive list of the supported expressions.

colors palette less sass scss css stylus

harp - Static Site Server/Generator with built-in preprocessing

•    Javascript

---

Harp is a static web server that also serves Jade, Markdown, EJS, Less, Stylus, Sass, and CoffeeScript as HTML, CSS, and JavaScript without any configuration. It supports the beloved layout/partial paradigm and it has flexible metadata and global objects for traversing the file system and injecting custom data into templates. Optionally, Harp can also compile your project down to static assets for hosting behind any valid HTTP server. Pre-compilers are becoming extremely powerful and shipping front-ends as static assets has many upsides. It's simple, it's easy to maintain, it's low risk, easy to scale, and requires low cognitive overhead. I wanted a lightweight web server that was powerful enough for me to abandon web frameworks for dead simple front-end publishing.

static-web-server static-site-generator sass less stylus markdown jade ejs coffeescript

svg-sprite - SVG sprites & stacks galore — A low-level Node

•    Javascript

---

It comes with a set of Mustache templates for creating stylesheets in good ol' CSS or one of the major pre-processor formats (Sass, Less and Stylus). Tweaking the templates or even adding your own custom output format is really easy, just as switching on the generation of an HTML example document along with your sprite. For an up-to-date list of browsers supporting SVG in general respectively SVG fragment identifiers in particular (required for <defs> and <symbol> sprites as well as SVG stacks) please refer to caniuse.com.

icon icons svg png sprite spritesheet stack generator css sass less stylus stylesheet inline html vector rwd retina mustache gulpfriendly

kouto-swiss - A complete CSS framework for Stylus

•    CSS

---

For grunt, you can use grunt-contrib-stylus, and include kouto swiss in your use option for the task. You can also use grunt-ks-stylus, which is a fork of grunt-contrib-stylus, with kouto swiss included.

stylus css framework polyfill grid vendors responsive reset utility

grunt-contrib-compass - Compile Compass to CSS.

•    Javascript

---

Run this task with the grunt compass command. Compass is an open-source authoring framework for the Sass css preprocessor. It helps you build stylesheets faster with a huge library of Sass mixins and functions, advanced tools for spriting, and workflow improvements including file based Sass configuration and a simple pattern for building and using Compass extensions.

gruntplugin compass scss sass css compile preprocessor style

serve - Simple command-line file / directory server built with connect - supports stylus, jade, etc

•    Javascript

---

Simple command-line file / directory server built with connect - supports stylus, jade, etc

finance - Personal expenses application written with Express, Jade, and Stylus

•    Javascript

---

Personal expenses application written with Express, Jade, and Stylus

express-coffee - A Template for NodeJs Application using Express, CoffeeScript, Jade, Stylus, Nib

•    CoffeeScript

---

A Template for NodeJs Application using Express, CoffeeScript, Jade, Stylus, Nib

generator-bespoke - Yeoman generator for Bespoke.js

•    Javascript

---

A generator for [Yeoman](http://yeoman.io) that scaffolds a [Bespoke.js](http://markdalgleish.com/projects/bespoke.js) presentation.The boilerplate project includes a [Gulp](http://gulpjs.com) build system, a preview server with [LiveReload](http://livereload.com), [Jade](http://jade-lang.com) and [Stylus](http://learnboost.github.io/stylus) compilation, and a [GitHub Pages](http://pages.github.com) deployment task.Your generated presentation optionally includes the following [Bespoke.js plugins

less.js - Less. The dynamic stylesheet language.

•    Javascript

---

The dynamic stylesheet language. http://lesscss.org. This is the JavaScript, official, stable version of Less.

compile-less css-nesting css-variable css gradients-css gradients-css3 less-compiler less-css less-mixins less less.js lesscss mixins nested-css parser preprocessor bootstrap-css bootstrap-less style styles stylesheet variables-in-css css-less

crayon - Crayon.css is a list of css variables linking color names to hex values.

•    CSS

---

Crayon.css is a list of css variables linking color names to hexadecimal values, usable with postCSS or with your favourite CSS preprocessor, being it Stylus, Sass or Less. Read more on http://riccardoscalco.github.io/crayon/.

grunt-styleguide - Universal CSS styleguide generator for grunt

•    HTML

---

If you are looking for a replacement and are using kss or styledocco see below. Universal CSS styleguide generator for grunt. Easily integrate Styledocco or KSS styleguide generation into your development workflow.

gruntplugin scss sass css less stylus preprocessor styleguide

nib - Stylus mixins, utilities, components, and gradient image generation

•    CSS

---

Stylus mixins, utilities, components, and gradient image generation. Don't forget to check out the documentation.Below is an example of how to utilize nib and stylus with the connect framework (or express).

jeet - The most advanced, yet intuitive, grid system available for Sass or Stylus

•    CSS

---

Jeet is a simple fractional grid system for Sass and Stylus. Learn the API in minutes and begin tossing together grids.

grid stylus sass scss

nib - Stylus mixins, utilities, components, and gradient image generation

•    CSS

---

Stylus mixins, utilities, components, and gradient image generation. Don't forget to check out the documentation. Below is an example of how to utilize nib and stylus with the connect framework (or express).