Intro to Sass

CSS can be one of the more signficant challenges in web development. This talk introduced Sass, a turing-complete language library that you can use to simplify your life with CSS, and how you can get it to work with existing Perl frameworks.

Initially prepared for the March 2012 Meeting of the Baltimore Perl Mongers (http://baltimore.pm), March 15, 2012
Presented at the 2012 DC-Baltimore Perl Workshop (http://dcbpw.org/dcbpw2012), April 14, 2012

Transcript

1. Sass! Or, How I Learned to Stop Worrying and Love CSS.
2. Who Is This Guy? Stephen Belcher (@sycobuny) Perl programmer - 10 years Contractor for Kelly Services at NIA Also kind of a DBA
3. I’m Talkin’ ‘Bout Sass CSS compiler “Haml” for CSS Adds variables, functions, mixins, etc. to CSS Actually 2 syntaxes (SCSS and SASS)
4. SCSS Superset of CSS3 Semicolons Brackets Me no likey SASS HAML/Python-like Line-break terminated Indentation-sensitive Thumbs up! SCSS vs. SASS
5. Variables Prefixed with $ (can use ! but deprecated) (Mostly) standard naming rules /^[a-z_][a-z0-9\-_]*$/i Basic CSS-inspired Datatypes Numbers, Strings, Colors, Lists, Booleans
6. Why Should You Care? Makes CSS manageable Makes design simple Something about cool kids and doing stuff?
7. Meat and Potatoes! (I’ll just have potatoes)
8. Initial CSS
9. Variables SCSS SASS
10. Functions SCSS SASS
11. Mixins SCSS SASS
12. Convinced? How do you fly this thing?
13. Ruby Gems $ gem install sass # or $ sudo gem ... $ sass my_awesome.sass styles.css $ sass --watch my_awesome.sass:styles.css $ sass --watch sass:public/stylesheets
14. Text::Sass Available at a CPAN near you
15. Text::Sass Simple Interface Text::Sass->sass2css($sass_string) Text::Sass->scss2css($scss_string) No direct file IO methods Mostly-full compliance (@extend) Available at a CPAN near you
16. perl-catalyst-view-sass http:/ /github.com/bolav/perl-catalyst-view-sass
17. Mojolicious On CPAN: Mojolicious::Plugin::SassRenderer
18. Mojolicious On CPAN: Mojolicious::Plugin::SassRenderer SASS syntax only Fairly simple, can read to extend to SCSS Templates located at $MOJO_HOME/templates/$view.txt.sass
19. Dancer On CPAN: Dancer::Plugin::Preprocess::Sass
20. Dancer On CPAN: Dancer::Plugin::Preprocess::Sass Handles both SCSS and SASS No need to define route handlers Can save static versions (“save” in YAML) Needs write access to views to cache
21. Fin sbelcher@gmail.com @sycobuny http:/ /github.com/sycobuny/sass_presentation