finteractive

// ----
// libsass (v3.2.5)
// ----

/*
Source: http://webdesign.tutsplus.com/tutorials/an-introduction-to-sass-maps-usage-and-examples--cms-22184
Topic: An Introduction to Sass Maps: Usage
*/

/* 1. Loop Through a Map and Generate Classes */

finteractive

// ----
// libsass (v3.2.5)
// ----

/* 
Source: http://webdesign.tutsplus.com/tutorials/an-introduction-to-sass-maps-usage-and-examples--cms-22184
Topic: An Introduction to Sass Maps: Usage and Examples
*/

/* Generating a map 

finteractive

// ----
// libsass (v3.2.5)
// ----

/* 
Source: http://thesassway.com/intermediate/leveraging-sass-mixins-for-cleaner-code
Topic: Leveraging Sass mixins for cleaner code
*/

/* Simple Mixin */

finteractive

// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console

finteractive

#Intro#

• Aidan Foster - Foster Interative - Web Shop focused on Drupal + Front end architecture
• @finteractive on twitter
• https://ca.linkedin.com/in/aidanfoster

#Get to know the group#

• What's your level of CSS experience
• Do you know any programming languages?
• What's the most complex thing you've done with SASS

finteractive

// ----
// libsass (v3.2.4)
// ----

// Variables Data Types

//Numbers
$number-two: 2;
$number-golden-ratio: 1.618;
$number-px: 10px;

finteractive

<p>Example 1 - Icon Only</p>
<p>
  <a class="icon-wrapper" href="#"><img class="svg-inline" src="http://placeskull.com/170/170"><span class="visually-hidden">Do Something</span></a>
</p>

<p>Example 2 - Inline SVG / IMG</p>
<p><a class="btn--inline-icon" href="#"><img class="svg-inline" src="http://placeskull.com/170/170">Example Wrapper with really long text that wraps and stays vertically centered </a>
</p

finteractive

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.

finteractive

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

// Modified without base 10 reset
// From https://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/

@function strip-unit($num) {
  @return $num / ($num * 0 + 1);

finteractive

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

foo {
}