Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Intro to Sass

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

3ed7378b8a83d2952488d4edcd22c406?s=128

Stephen Belcher

April 14, 2012
Tweet

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