Sass
- Sass cheatcheet - older
Basics
Articles
- Sass and Compass overview - Aug 31st, 2009
- Sass For Designers - Aug 28th, 2011
- SMACSS and SASS - The future of stylesheets - May 2012
- OOCSS + Sass = The best way to CSS
- Using Sass & Compass in Drupal Theming - scribd, slide 40 on for techy
Video
- SASS - The Next Wave in Styling and Theming
- The Future of Sass by Hampton Catlin - Sass 3.2, libsass, SassC - May 3, 2012
Setup
Ruby
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
- PHPSass - richtheeek fork of PHamlP for Drupal
old?: Don't forget to add to $PATH (i.e. /var/lib/gems/1.8/bin)
- PHamlP - older
- sassphp
node.js
libsass
Features
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; }
Colours
- SassMe - Visualize SASS color functions in real-time without compiling.
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; }
- css3-sass-mixins - vendorprefixes / filters
- 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.
- 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
- CSS3 Ribbons Extension for Compass - Just like the Github Ribbons.
- Zocial is a CSS3 social buttons set and vector icons with @font-face as a Sass mixin and usable as a Compass extension.
- 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.
- Full Browser Width Bars using SCSS - my conversion from a css-tricks method
- [1] - full browser width bars, requires rem mixin
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
%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
- Sass Globbing Plugin
Bourbon
- Bourbon - A simple and lightweight mixin/function library for Sass.
- http://thechangelog.com/post/7343704173/bourbon-a-set-of-vanilla-sass-mixins-that-use-scss
Compass
Setup
- Instal - Handy dropdown menu config.rb generator.
gem install compass compass version
Basics
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.
@import "compass/css3/images"
Other
Guides
Susy
- Susy - Responsive grids for Compass.
"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."
Vertical rhythm
Other
- Kube - SCSS & Compass - ruby project template
Units
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
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 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
Responsive
- 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.
- "Mobile first" CSS and getting Sass to help with legacy IE - Nov 29, 2011
- Media Queries with Sass 3.2 - Mar 13, 2012
- Creating a Mobile-First Responsive Web Design - April 16, 2012
- https://github.com/nex3/sass/issues/408#issuecomment-6086901
- 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
- Using SASS with Drupal, December 18, 2011
- http://drupal.org/project/compass
- sasson
- sassy