Here are my takeaway notes from Sassconf 2013 earlier this month, with a few examples that I hacked together and links to various pieces of awesome. These are the thoughts that happened to stick with me, and are probably not that cohesive outside of the context of conference.
Cheap Sass Tricks - John W. Long
- Unsemantic - A percentage-based grid system which is brilliant when combined with Sass's placeholder selectors.
- Sass can do awesome color math. Examples:
$newcolor: rgba($color, .5);and
- Use Sass's placeholder selectors (%).
- CSS Spinners.com - A collection of CSS only waiting spinners, also available via Github (which contains the .scss) and Bower. Contributions and pull requests welcome!
Sass at GitHub - Ben Bleikamp
- Instead of developer -> QA, do pull request -> peer review (repeat as needed).
- Mistakes will always happen; the cure is to make it easy to report them.
- Github's Living Styleguide
- If you want contributions, tell people what's expected in their commits. Best: add a CONTRIBUTING file.
We're more concerned with how our page loads for users than how clever our CSS is.
- SQL Explain for CSS Selectors
- Use the things you build.
- Keeping things simple helps avoid browser bugs due to edge cases.
It Takes a Village to Raise a Website - Chris Eppstein
- A developer should be critical of their own ecosystem; they should be able to see potential for change.
Don't be a Sasshole.Be positive.
- Evolve from a crazy person into an evangelist.
My passion is my job.This is a secret to life.
- Upcoming in Compass: no more Blueprint, fixed bugs and removed cruft, less Ruby and more Sass, more Sass tools and fewer CSS tools.
Sass: Bridging the Designer/Developer Gap - Bermon Painter
- A better workflow for design / develop is style tiles / element collages.
Clean out your junk drawer - Dale Sande
- Learn from doing it wrong.
- Manifest: a giant collection of imports of used styles.
- _config.scss: all logic, no CSS.
- Also, Sassmeister's new feature: HTML for more contextual demos! Amazeballs.
Show Your Work & Share Your Toys - Eric Meyer
- Contribute. You don't need anything revolutionary. Just push your code.
Whatever you document is what exists.
The Front End Revolution: A Call to Arms - Hampton Catlin
- Now it's CSS3. Now it's CSS2. Now it's CSS3.
"We're gonna have to sue you." "...Or you could buy it."
Sweating the Small Stuff - Tim Hettler
- The actual problems and solutions for translating small details from a Photoshop comp into CSS (and how that's way easier with Sass).
- Designers and developers speak different languages.
"Thanks for making my work obsolete." "Welcome to open-source!"
Programming? In MY CSS? - Jackie Balzer
- A function returns a value; a mixin outputs CSS.
- Damn - look at all the color functions.
Getting Sassy With Foundation 4 - Caleb Winters
- Foundation is a front end framework focused on mobile-first design built with Sass.
- There are two versions - standalone and with Compass.
- Foundation 4 drops IE8 support.
- Nest the grid for more columns.
- Tons of elements already exist, and can be configured with variables.
- Sites built with Foundation: Treehouse, Runway2Street, most NBC sites.
Take the Pain out of Sass - Ian Carrico
- Install homebrew
- Then install rbenv:
brew install rebenv ruby-build ## rbenv helps to run multiple versions of R echo 'eval "$(rbenv init -)"' >> ~/.bash_profile ## Add something to your bash_profile
rbenv install 2.0.0-p247 ## Install a new version of Ruby rbenv rehash ## magic rbenv global 2.0.0-p247 ## more magic
.ruby-version file ## root of all projects, IDs Ruby version. Ex: 1.8.7-p358
bundle install # in a dir to install appropriate gems bundle exec compass compile # Use bundler's gem version managed version of Compass compile. bundle exec = managed version of thing
- Create a gemfile for the day when things break. For any Sass project, list the version of gems you're using.
- Default Mac Ruby requires
Designing in the Browser - Mason Wendell
It's not about anti-Photoshop; it's about the best tool for the job.
- When in doubt, share your stuff. That's the thing to do.
- Style tiles include little notes about what the selected images was reflecting; the core goal of the design.
- Entire Slide deck
- Slide 4: Stuff I Use - Mason's configuration, tools and apps.
- Mason's Sublime Text configuration
- Survival Kit - A starter set of HTML, Sass and various sundry files
The Panel - John Athayde, Elyse Holladay, Rachel Ober and Pam Selle
- Make Fridays "technical debt Fridays". No one wants to release new code on a Friday, so sweep up all those cobwebs that you've been meaning to get to.
- Refactoring is iterative.
- If you aren't looking at the CSS rendered by your Sass, you're doing it wrong.
- Ninety-five percent (roughly) of Sassconf attendees prefer .scss syntax to .sass syntax.