Blogs about compass
I found some old notes from the last time I had to
sprite some images using Compass for Sass. It was a success, and I noted two things to share with you.
@import "sprites/*.png"; is relative to the
images_dir that you've defined in config.rb.
It'd be nice if Compass automatically compressed the resulting .png files through
https://tinypng.com/ or something similar.
Here is a list of books about Sass (Syntactically Awesome Stylesheets Sass), the CSS pre-compilier:
Here are my takeaway notes from Sassconf 2013 earlier this month, along 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 may not be cohesive outside of the context of conference.
Here is a playlist of videos from SassConf 2013:
https://www.youtube.com/playlist?list=PLXrTmSPkhnXsd_MGL5Y__7IoRemarkRVi. 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); lighten($color, 30%); 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
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 - Miriam Suzanne
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
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
brew install rbenv ruby-build ## 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.
If you need more links to Twitters, decks, tools and repos, check out the awesome
list o' links by Una Kravets or the 2013 Sassconf schedule.
All code presented as tips, tricks, tutorials, articles, or within <code> or <pre> markup tags is licensed under the
All content and photography is © 2006 - 2019.