[ SXSW Bios ] #sxsw #compass (Archive)
Brief
Sass & Compass are quickly becoming a standard for authoring and maintaining the styles (CSS) of many of popular websites. A derivative of these languages may someday replace CSS as the default language for styling html. As with using any new technology, a full understanding of how it works, how to use it efficiently, pitfalls to avoid, and patterns for success will benefit any user.
Notes
We <3 CSS!
Once you store values in variables, you can do calculations (e.g., a base font-size that you use a multiplier; let’s you show your math to document how you got to a value). Colors: using variables, you can set up a common color library with common names to use across projects. Fonts: same thing.
Variables can contain other variables.
Nesting
Helps you group styles together (true class/namespacing?) and prevents duplication. Allows you to avoid the “.class h1, .class h2, .class h3” rules. Don’t nest just because you can. Includes a parent selector (&) to refer back to the parent (e.g., p.class = p &.class). Can also use at end of string to put the parent thing at the end.
Mixins
To create parameterized re-usable elements (css ‘methods’). SCSS: @mixin method-name(param, param) {} .my-class { @include method-name(parameter) }. Conditionals? SASS’s syntax is more terse.
Extend
Helps to combine classes / tie them together. Extend brings in properties from another rule. SCSS: h3 { @extend h2; } Beware of nesting with extends. Bad.
SASS Partials / @import
Nested @import (.my-namespace { @import home } prefixes each rule in _home.sass with .my-namespace.
Strategy for using partials to make your primary file “loader” clean.
//Libraries
- @import compass
- @import config
- @import reset
- @import mixins
- @import sprites
//Typography
//Layout
//Forms
Advanced Features
Guards (LESS): functional programming model. if conditionals create a lot of nested complexity. Guards are flat and declarative, uses the ‘when’ keyword to only execute on condition without if conditional nesting.
Type Checking (LESS): isnumber, iscolor, etc.
Pattern Matching (LESS):
Libraries
Pattern libraries (of mixins) for CSS/SCSS/SASS code that has already been written. Compass, Fancy Buttons, Formalize, etc.
Compass
Use the CSS3 module (@import “compass”), and let the compass library team worry about browser support. E.g., the mixin background-image with a linear-gradient param renders gradient rules for all browser prefixes.
Utility helpers: e.g., #{headings(2,6)} = h2…h6
Color functions: generate complex color rules: hsla/rgba($color, $alpha); lighten/darken/saturate/desaturate/grayscale/complement/invert.
Typography: vertical rhythm: set base font sizes and line heights, @include establish-baseline (does the math for future use of adjust-font-size-to(pixel-unit). leader/trailer by adding correct number of pixels based on the number of rhythm rows you need.