SASS-TO SVG & SASS - March 2015

Introductions

What's your focus / work?
Do you use compass?
What’s Gem, Node Module, or other tool you found helpful recently.

Announcements

Looking for people to present
Next Meetup will likely be moving to Brighlane on King St.

Organizing SASS with SMACSS (Folders) and BEM naming conventions

Short Presentation

##Setup prerequisites##

http://www.meetup.com/SASS-Toronto/pages/Installing_the_Dev_stack_before_the_Meetup/

review problems people had

###Download the example files here###

http://bit.ly/sassto5-files

###Setup prerequisites###

Go into the /eq-demo folder and run

$ bower install

$ bundle install --path .vendor/bundle

sass/layouts._l-page.scss

Uses the breakpoint Mixin, Mobile First - Responsive Layout. https://github.com/at-import/breakpoint

Add in the breakpoint $bp-lrg styles.

components/summary.scss

Unhide the kittens!

Review the summary component

Note the extend of the %btn for the .summary_link class

That’s some huge friggin kittens!

Element Queries vs Media Queries

http://snugug.com/musings/element-queries

https://github.com/Snugug/eq.js

Width only breakpoints (not a cascade like min-width media queries)

2 variations - The data attribute and the SCSS version, but we’re using data attributes as it’s faster.

Inspect the main element as it gets resized. We define the “breakpoints” with the data-eq-pts, eq.js selects the current condition as data-eq-state which we use to style

data-eq-pts="2col: 500, 3col: 600"

data-eq-state="2col"

sass/style.scss

Uncomment _l-eq.scss

sass/layouts/_l-eq.scss

Controls the layout for components inside the container.

Change the ratios of the aside and main content areas in the _l-page.scss and we never have to worry about it.

Quick Demo of Replacing Compass

Use Bower Instead of Gems (as the gems install compass as a dependency)

Autoprefixer replaces compass functions###

https://github.com/sindresorhus/gulp-autoprefixer

No more PNG sprintes, as IE9 supports SVG###

https://github.com/jkphl/gulp-svg-sprite

gulp svg

minifies the /svg-src (inlcude /svg-src/sprites) and copies to /svg & /svg/sprites
Converts all the SVG’s in /svg/sprites into symbols and exports it to /svg/sprites.svg

To use these it’s basically the same as images…

<svg class="facebook" >
   <use xlink:href="./svg/sprites.svg#facebook"></use>
</svg>

https://css-tricks.com/cascading-svg-fill-color/

https://css-tricks.com/svg-use-external-source/

https://github.com/jonathantneal/svg4everybody

###Vertical Rhythm & Tyopgraphy with REM units###

finteractive/SASS-TO-05.md