View source for Preprocess

{{menu}}

* gist: [https://gist.github.com/674726 Sass/Less Comparison]

== Semantics ==
* http://blog.carbonfive.com/2009/03/02/compass-960-semantics/
* http://richarddingwall.name/2009/12/28/semantic-css-grid-layout-with-less/
* http://coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/
* http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html

== Sass ==
* [[Sass cheatcheet]] - older

=== Basics ===
* [http://sass-lang.com Sass]
** [http://sass-lang.com/tutorial.html#features Tutorial]
** [http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html Reference]
** [http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html Functions]
** [http://sass-lang.com/docs/yardoc/file.SASS_CHANGELOG.html Changelog]

* https://github.com/nex3/sass/issues
** http://chriseppstein.github.com/blog/2012/08/23/sass-3-2-is-released/

==== Articles ====
* [http://net.tutsplus.com/tutorials/html-css-techniques/using-compass-and-sass-for-css-in-your-next-project/ Sass and Compass overview] - Aug 31st, 2009
* [http://sonspring.com/journal/sass-for-designers Sass For Designers] - Aug 28th, 2011
* [http://blog.railslove.com/2012/03/28/smacss-and-sass-the-future-of-stylesheets/ SMACSS and SASS - The future of stylesheets] - May 2012
* [http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to-css/ OOCSS + Sass = The best way to CSS]
* http://blog.mightyspring.com/post/58803131171/purposefully-architecting-your-sass

* CSS-Tricks: [http://css-tricks.com/sass-style-guide/ Sass Style Guide]

* [http://www.scribd.com/fullscreen/86154376?access_key=key-2n0lia9a9ic2fx2jmvxv Using Sass &amp;amp; Compass in Drupal Theming] - scribd, slide 40 on for techy

* [http://blog.kaelig.fr/post/51078221503/apple-is-using-sass-and-theyre-doing-it-wrong Apple Is Using Sass, And They’re Doing It Wrong]



* [https://adactio.com/journal/16887 Adactio: Journal—Sass and clamp]

* [https://adactio.com/journal/16960 Adactio: Journal—Programming CSS to perform Sass colour functions]

==== Video ====
* [http://www.youtube.com/watch?v=tdGHjtVHP68 SASS - The Next Wave in Styling and Theming]
* [http://www.youtube.com/watch?v=MFwId6xSh2o The Future of Sass by Hampton Catlin] - Sass 3.2, libsass, SassC - May 3, 2012

=== Setup===
==== Ruby ====
* http://sass-lang.com/docs/yardoc/file.SASS_CHANGELOG.html

Init;
 gem install sass 
 mv style.css style.scss 
 sass --watch style.scss:style.css
 
 sass --watch input.sass:output.css
 sass --watch input-dir:output-dir
 sass --watch .:../css

==== Sasson config.rb ====
 prefered_syntax = :scss
 http_path = '/'
 css_dir = 'styles'
 sass_dir = 'styles'
 images_dir = 'images'
 javascripts_dir = 'scripts'
 relative_assets = true
 line_comments = true
 
 #output_style = :compressed
 output_style = :expanded

==== PHP ====
* [http://www.phpsass.com/ PHPSass] - richtheeek fork of PHamlP for Drupal
** https://github.com/richthegeek/phpsass
** compass; https://github.com/richthegeek/phpsass/issues/4

old?: Don't forget to add to $PATH (i.e. /var/lib/gems/1.8/bin)

* [http://code.google.com/p/phamlp/ PHamlP] - older

* sassphp

==== node.js ====
* https://github.com/bmavity/scss-js
* https://github.com/visionmedia/sass.js

* https://github.com/andrew/node-sass

==== libsass ====
* https://github.com/hcatlin/libsass - sassc

==== Source Maps ====
* http://fonicmonkey.net/2013/03/25/native-sass-scss-source-map-support-in-chrome-and-rails/

==== Sprockets ====
* https://github.com/sstephenson/sprockets
* https://github.com/petebrowne/sprockets-sass
* https://github.com/heygrady/compass-sprockets

=== Features ===
==== Variables ====
* [http://sachagreif.com/sass-color-variables/ SASS & Color Variables] - Jul 20th, 2012

Variables:
 $blue: #3bbfce;
 $margin: 16px;
 
 .content-navigation {
   border-color: $blue;
   color:
     darken($blue, 9%);
 }
 
 .border {
   padding: $margin / 2;
   margin: $margin / 2;
   border-color: $blue;
 }
 _partial.sass
   partial files with a leading underscore,
   for inclusion in the compiled source

Functional Variable Names;
 // first we set descriptive variables:
 $darkgrey: #333333;
 $blue: #001eff;
  
 // then we set functional variables:
 $text_color: $darkgrey;
 $link_color: $lightblue;
 $border_color: $lightblue;
  
 .myClass{
   color: $text_color;
   border-color: $border_color;
 }
 a{
   color: $link_color;
 }

* [https://gist.github.com/3335300 This gist demonstrates how global and local variables work with mixin content blocks in Sass.]

===== Colours =====
* [http://sassme.arc90.com/ SassMe] - Visualize SASS color functions in real-time without compiling.
** https://github.com/arc90/sass-color-picker

==== Nesting ====
 table.hl {
   margin: 2em 0;
   td.ln {
     text-align: right;
   }
 }
 
 li {
   font: {
     family: serif;
     weight: bold;
     size: 1.2em;
   }
 }

==== Mixins ====
 @mixin table-base {
   th {
     text-align: center;
     font-weight: bold;
   }
   td, th {padding: 2px}
 }
 
 @mixin left($dist) {
   float: left;
   margin-left: $dist;
 }
 
 #data {
   @include left(10px);
   @include table-base;
 }

* [https://github.com/madr/css3-sass-mixins css3-sass-mixins] - vendorprefixes / filters
* Gist: [https://gist.github.com/3951201 Sass vendor helper mixins]

* [https://github.com/heygrady/scss-blend-modes SCSS Blend Modes] - CSS doesn't natively support color blending the way that Photoshop does. This library attempts to fake that by allowing you to blend a foreground color with a background color in order to approximate color blending. This was originally intended for use with the Compass Photoshop Drop Shadow Plugin but it proved impractical to integrate.

* [http://chriseppstein.github.com/sass-recipes/ sass-recipes] - examples that you can use or modify to suit your needs.
** CSS Arrows
** Hover to View
** Multi-Line Button
** Progress Bar
** Search Input
** File Field Mask

* [https://github.com/perezd/CSS3-Ribbons CSS3 Ribbons Extension for Compass] - Just like the Github Ribbons.

* [https://github.com/adamstac/zocial Zocial] is a CSS3 social buttons set and vector icons with @font-face as a Sass mixin and usable as a Compass extension.

* [http://sassymothereffingtextshadow.com/ Sassy Mother Effing Text Shadow] is a Sass mixin that calculates convoluted curvy shadows for css3 text-shadow. It can also be used for box-shadow if you're into that kind of thing.
** https://github.com/canarymason/sassytextshadow 
** https://rubygems.org/gems/sassy-text-shadow 

* Gist: [https://gist.github.com/957284 Useful scss mixins (rounded corners, gradients, text-field, button)]

* [http://cssdeck.com/labs/bqjumsoc/0 Full Browser Width Bars using SCSS] - my conversion from a css-tricks method

* [https://gist.github.com/2934012#file_bars.scss] - full browser width bars, requires rem mixin
** http://cssdeck.com/labs/e2xkplul

* http://alexwolfe.github.io/Buttons/

==== Selector Inheritance ====
 .error {
   border: 1px #f00;
   background: #fdd;
 }
 .error.intrusion {
   font-size: 1.3em;
   font-weight: bold;
 }
 
 .badError {
   @extend .error;
   border-width: 3px;
 }

==== Placeholder Selector ====
* http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#placeholders

 %clearfix {
   overflow: none;
   *zoom: 1;
 }
 
 aside, footer {
   @extend %clearfix;
 }
 
 #grid-container {
   @extend %clearfix;
 }

Produces:
 aside, footer, #grid-container {
   overflow: none;
   *zoom: 1;
 }

====Control Directives====
====Mixin Directives====

====etc====

=== Extensions ===
* [https://github.com/chriseppstein/sass-globbing Sass Globbing] Plugin

==== Bourbon ====
* [http://thoughtbot.com/bourbon/ Bourbon] - A simple and lightweight mixin/function library for Sass.
** https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/_bourbon.scss
** https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_border-image.scss
* http://thechangelog.com/post/7343704173/bourbon-a-set-of-vanilla-sass-mixins-that-use-scss

==== Compass ====
===== Setup =====
* [http://compass-style.org/install/ Instal] - Handy dropdown menu config.rb generator.
 gem install compass
 compass version

* [http://compass-style.org/help/ Getting started]

===== Basics =====
* [http://compass-style.org/help/tutorials/ Compass tutorials]
* [http://compass-style.org/reference/compass/ Compass reference]
* [http://compass-style.org/reference/compass/css3/ CSS3]

<pre>Usage: compass help [command]

Description:
  The Compass Stylesheet Authoring Framework helps you
  build and maintain your stylesheets and makes it easy
  for you to use stylesheet libraries provided by others.

Donating:
  Compass is charityware. If you find it useful please make
  a tax deductable donation: http://umdf.org/compass

To get help on a particular command please specify the command.

Primary Commands:
  * clean       - Remove generated files and the sass cache
  * compile     - Compile Sass stylesheets to CSS
  * create      - Create a new compass project
  * init        - Add compass to an existing project
  * watch       - Compile Sass stylesheets to CSS when they change
Other Commands:
  * config      - Generate a configuration file for the provided command line options.
  * extension   - Manage the list of compass extensions on your system
  * frameworks  - List the available frameworks
  * grid-img    - Generates a grid background image.
  * help        - Get help on a compass command or extension
  * imports     - Emit an imports suitable for passing to the sass command-line.
  * install     - Install an extension's pattern into your compass project
  * interactive - Interactively evaluate SassScript
  * sprite      - Generate an import for your sprites.
  * stats       - Report statistics about your stylesheets
  * unpack      - Copy an extension into your extensions folder.
  * validate    - Validate your generated css.
  * version     - Print out version information</pre>

===== Gradients =====
The linear-gradient and radial-gradient mixins have been deprecated. Instead use the background-image mixin and pass it a gradient function. The deprecation warning will print out the correct call for you to use.
* [http://compass-style.org/reference/compass/css3/images/ Images]
** Use for [http://compass-style.org/examples/compass/css3/gradient/ gradients]
 @import "compass/css3/images"

===== Transitions =====
* http://compass-style.org/reference/compass/css3/transition/
** http://compass-style.org/examples/compass/css3/transition/

 @include transition(color 0.2s ease-in);
 @include transition(text-shadow 0.2s ease-in);

===== Other =====
* [http://compass-style.org/reference/compass/helpers/ Helpers]
* [http://compass-style.org/reference/compass/layout/ Layout]
** [http://compass-style.org/reference/compass/layout/grid_background/ grids]
** [http://compass-style.org/reference/compass/layout/sticky_footer/ sticky footer]
** [http://compass-style.org/reference/compass/layout/stretching/ stretching]
* [http://compass-style.org/reference/compass/reset/utilities/ Reset utilities]
* [http://compass-style.org/reference/compass/typography/ Typography] links
** [http://compass-style.org/reference/compass/typography/lists/ lists]
** [http://compass-style.org/reference/compass/typography/text/ text]
** [http://compass-style.org/reference/compass/typography/vertical_rhythm/ vertical rhythm]

* [http://compass-style.org/frameworks/ Adding Frameworks to Compass]

===== Guides =====
* [http://compass-style.org/help/tutorials/best_practices/ Compass Best Practices]
* [http://jc-designs.net/blog/2010/10/sass-scss-and-compass-cheat-sheet/ Sass (SCSS) and Compass Cheat Sheet]

* [http://stackoverflow.com/questions/5486879/how-does-compass-watch-work-how-is-it-used-with-rails stackoverflow: How does 'compass watch' work/how is it used with rails]

* http://www.youtube.com/playlist?list=PL45DD77A4CCA76ED3

===== Susy =====
* [http://susy.oddbird.net/ Susy] - Responsive grids for Compass.
** http://susy.oddbird.net/demos/grid-types/

"You can build grids of all kinds with Susy. Define you grid using any unit of measurement (ems, pixels, percentages, inches, etc.) and then determine how and when you want that grid responding to the viewport. Susy converts all internal grid-widths into percentages, so that once you have a grid it is able to respond and flex in any way you choose. How the grid responds depends on the outer container."

See [[Grid/rhythm#Susy]]

===== Vertical rhythm =====
* [https://github.com/chriseppstein/compass/pull/896 Add rem output with pixel fallbacks and other improvements to vertical rhythm partial]

===== Other =====
* [https://github.com/yckart/compass-kube Kube - SCSS & Compass] - ruby project template

==== Units ====
* https://github.com/ry5n/rem

==== Vertical rhythm ====
If you don't reset browser margin and padding defaults, you're gonna have a bad time (re jigging margin/padding normalisations), imho. To choose a method that manages this best.

* http://compass-style.org/reference/compass/typography/vertical_rhythm/ - px based
* https://github.com/OliverJAsh/vertical-rhythm - em based

==== vertical-rhythmic ====
* https://github.com/pyrsmk/vertical-rhythmic - em based
** https://github.com/pyrsmk/vertical-rhythmic/blob/master/_vertical-rhythmic.scss

===== Usage =====
1em and 1.5em are the defaults (16px being browser em default. line-height is normally 1.4em)
 $base-font-size: '''1em''';
 $base-line-height: '''1.5em''';
 
 @import "vertical-rhythmic";

 @include $font-size()
   number $font-size   : font size, in ems
   integer $lines      : number of whitespace lines for the line-height
   Keeps base line proportions by default

first basic method; default-font-size: 0.9em and line-height: 1.4em h1 the space of two 1.4em lines
  @include $font-size(1.5)

second basic;
  font-size:1.5em;
  line-height:rhythm(auto,1.5em);

 @include [https://github.com/pyrsmk/vertical-rhythmic/blob/master/_vertical-rhythmic.scss#L78 margin]()
    integer $lines          : number of whitespace lines (default: '''1''')
    number $font-size       : actual font-size, in ems, to calculate with (default: '''1em''')
    integer $border-width   : width of additionnal borders around the box
    Useful to substract borders from the whitespace to not break the rhythm
 
 @include margin-top
   integer $lines          : number of whitespace lines (default: '''1''')
   number $font-size       : actual font-size, in ems, to calculate with (default: '''1em''')
   integer $border-width   : width of additionnal borders around the box
   Useful to substract borders from the whitespace to not break the rhythm
 
 @include margin-bottom
   etc.
 @include padding
 @include padding-top
 @include padding-bottom
 @include border
 @include border-top
 @include border-bottom
 @include outline

 h1 {
    @include font-size(1.5em);
 }
 
 // 2nd method

 // rhythm() can be used directly

==== Other ====
* https://gist.github.com/2026666

* https://github.com/pengwynn/compass_formalize

=== Responsive ===
* [https://github.com/canarymason/breakpoint Breakpoint] makes writing media queries in Sass super simple. Create a variable using a simplified syntax based on most commonly used media queries, then call it using the breakpoint mixin. Breakpoint handles all of the heavy lifting, from writing the media query itself, to handling cross-browser compatibility issues, so you can focus on what's important: making sure your website looks its best.

* [https://github.com/aaronjensen/sass-media_query_combiner Sass::MediaQueryCombiner] - Combines all matching media queries while compiling your Sass.

* [http://nicolasgallagher.com/mobile-first-css-sass-and-ie/ "Mobile first" CSS and getting Sass to help with legacy IE] - Nov 29, 2011
* [http://anthonyshort.me/2012/03/media-queries-with-sass Media Queries with Sass 3.2] - Mar 13, 2012
* [http://www.html5rocks.com/en/mobile/responsivedesign/ Creating a Mobile-First Responsive Web Design] - April 16, 2012
* https://github.com/nex3/sass/issues/408#issuecomment-6086901
** [http://jakearchibald.github.com/sass-ie/ IE-friendly mobile-first CSS with Sass 3.2] - Problem is, Internet Explorer prior to 9 ignores anything within media query blocks, leaving those browsers with mobile styles. Not all of us can get away with that, but thankfully, as Chris Eppstein points out, Sass 3.2 (not yet released) can generate a separate stylesheet with everything it needs to create a "desktop" look. - May 2012

=== Drupal ===
* [http://drupal.org/node/1374178 Using SASS with Drupal], December 18, 2011

* http://www.systemseed.com/blog/using-compass-and-sass-generate-skinr-styles

* http://drupal.org/project/compass
* sasson
* sassy

=== Tools ===
* http://dev.man-online.org/man1/sass-convert/

* [http://css2sass.heroku.com/ css2sass]
* http://toki-woki.net/p/least/

* http://css3.bradshawenterprises.com/blog/why-sass/
* http://tatiyants.com/getting-dry-with-sass/

* http://sassmeister.com/

==== Browser ====
* https://github.com/tinganho/SASS-Inspector - firesass for chrome
** https://chrome.google.com/webstore/detail/sass-inspector/lkofmbmllpgfbnonmnenkiakimpgoamn

== LESS ==
* [http://lesscss.org/ LESS] extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino.

* https://github.com/twitter/bootstrap
** http://antjanus.com/blog/web-design-tips/user-interface-usability/customize-twitter-bootstrap-into-themes/

=== Libs ===
* https://github.com/machito/animate.less

* http://lesshat.com/

* http://danmalarkey.github.io/schema/

=== PHP ===
* http://leafo.net/lessphp/ - v3.0.5 June 10th 2012

=== node.js ===
* https://larsjung.de/wepp/

== Stylus ==
* [http://learnboost.github.com/stylus/ Stylus] - Expressive, robust, feature-rich CSS language built for nodejs

* [https://github.com/visionmedia/nib nib] - Stylus mixins, utilities, components, and gradient image generation

== Myth ==
* http://www.myth.io/

== Other ==
* http://code.google.com/p/closure-stylesheets/

* [http://the-echoplex.net/csscrush csscrush] - An extensible PHP based CSS preprocessor

* [http://pcss.wiq.com.br/ PCSS] - Shortcut-oriented Server-side CSS3 Preprocessor
** Pre-defined CSS constants and PCSS functions to make the CSS writing more intuitive and to make the code slimmer and even more readable
** Class nesting
** Variables that can hold any kind of data
** Default unit and default image directory to set for pre-defined functions
** @font-face shortcut with server-side browser detection for slimmer resulting code
** Browser-specific shortcuts are detected on server-side to avoid redundant commands (like many "-webkit", "-moz", etc.)
** Minifies the resulting CSS file
** PHP5

* https://github.com/anthonyshort/Scaffold/wiki

* http://pcss.wiq.com.br/

* http://sword.mu/

* [http://gridstylesheets.org/ GSS] (Grid Style Sheets) reimagines CSS layout & replaces the browser’s layout engine with one that harnesses the Cassowary Constraint Solver — the same algorithm Apple uses to compute native layout. [https://news.ycombinator.com/item?id=9677306]


* https://github.com/purifycss/purifycss


* [http://harpjs.com/ Harp] serves Jade, Markdown, EJS, CoffeeScript, Sass, LESS and Stylus as HTML, CSS & JavaScript—no configuration necessary. The static web server with built-in preprocessing.


* https://github.com/reworkcss/rework - CSS manipulations built on css, allowing you to automate vendor prefixing, create your own properties, inline images, anything you can imagine!


* http://the-echoplex.net/csscrush/ - A standards inspired CSS pre-processor.



* http://absurdjs.com/
** http://absurdjs.com/pages/html-preprocessing/
** http://absurdjs.com/pages/css-preprocessing/
** http://absurdjs.com/pages/client-side-components/
** http://absurdjs.com/pages/css-preprocessing/variables-and-mixins/
** http://absurdjs.com/pages/css-preprocessing/organic-css/atoms/
** http://absurdjs.com/pages/css-preprocessing/organic-css/molecules/


== PostCSS ==
* https://github.com/postcss/postcss - 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. PostCSS takes a CSS file and provides an API to analyze and modify its rules (by transforming them into an Abstract Syntax Tree). This API can then be used by plugins to do a lot of useful things, e.g., to find errors automatically, or to insert vendor prefixes.


* https://github.com/postcss/autoprefixer - plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twitter and Alibaba.


* https://github.com/evrone/postcss-px-to-viewport - A plugin for PostCSS that generates viewport units (vw, vh, vmin, vmax) from pixel units. The best choice to create a scalable interface on different displays by one design size.

== Future ==
* http://www.lispcast.com/cascading-separation-abstraction

* https://wiki.css-houdini.org/
* https://www.smashingmagazine.com/2016/03/houdini-maybe-the-most-exciting-development-in-css-youve-never-heard-of/