finteractive

# Create Symbolic Link from /Machintosh HD (or whatevery your system drive is) to /Users/Shared/_work
# See https://derflounder.wordpress.com/2020/01/18/creating-root-level-directories-and-symbolic-links-on-macos-catalina/
# NOTE: Must Use a Tab to "space" the first and second property
_work	Users/Shared/_work

finteractive

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// Toolkit (v2.9.0)
// ----

@import 'toolkit';
$base-line-height: 24px;
$base-font-size: 16px;
/// Converts units from pixels to EMs

finteractive

// ----
// libsass (v3.3.2)
// ----

@import "singularitygs";

// settings.scss
@include add-grid(6);
@include add-gutter-style('split');
@include add-gutter(1em);

finteractive

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

@import "breakpoint";

$base-font-size: 16px;
$base-line-height: 22px;

// Strips units (From Foundation Zurb Base File)

finteractive

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

@import "breakpoint";

$base-font-size: 16px;
$base-line-height: 22px;

// Strips units (From Foundation Zurb Base File)

finteractive

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

// From http://www.smashingmagazine.com/2015/06/responsive-typography-with-sass-maps/

$breakpoints: (
  small : 480px,
  medium: 700px,
  large : 1024px

finteractive

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

/*
Source: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#control_directives__expressions
Source: http://www.sitepoint.com/sass-basics-control-directives-expressions/
Topic: Controll Directives
*/

finteractive

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

$base-font-size: 21px !default;

@function em($px, $base: $base-font-size) {
  @return ($px / $base) * 1em;
}

finteractive

<div class="button">
  <!-- I don't use img tags but svg like below doesn't work here??? -->
  <img class="svg-img" src="http://www.fosterinteractive.com/themes/fi/svg/sprite/file-css.svg" />
  
  <!-- This is the correct way...  
  <svg><use xlink:href="http://www.fosterinteractive.com/themes/fi/svg/sprite/file-css.svg"></use>
  </svg> -->
</div>

finteractive

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>