Sass
Jump to navigation
Jump to search
Basics
_partial.sass - partial files with a leading underscore, for inclusion in the compiled source
About
- SMACSS and SASS - The future of stylesheets - May 2012
- Sass For Designers - Aug 28th, 2011
- Using Sass & Compass in Drupal Theming - scribd, slide 40 on for techy
Getting Sass/SCSS with:
Ruby
Init;
gem install sass mv style.css style.scss sass --watch style.scss:style.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
node.js
Variables
Functional Variable Names
Mixins, etc.
Compass
Guides
Susy
- Susy - Responsive grids for Compass.
Vertical rhythm
If you don't reset browser margin and padding defaults, you're gonna have a bad time.
- 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
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.
- https://github.com/nex3/sass/issues/408#issuecomment-6086901
- http://jakearchibald.github.com/sass-ie/ - 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.
- "Mobile first" CSS and getting Sass to help with legacy IE - Nov 29, 2011
Other
Zocal
- https://github.com/adamstac/zocial - css3 service buttons
Etc.
Drupal
- Using SASS with Drupal, December 18, 2011
- http://drupal.org/project/compass
- sasson
- sassy