Sass: The learning bridge between HTML/CSS and JavaScript

Sass: The learning bridge between HTML/CSS and

JavaScript

Jen KramerHarvard University Extension School • O’Reilly Media, Inc.

HTML5 Developer’s Conference • October 2015

Teaching web design since 2001

Harvard University Extension SchoolMarlboro College Graduate School

Community College of VermontNational UniversityChamplain College

Boston Univ. Center for Digital Imaging Arts

osTraininglynda.com

O’Reilly Media Inc.

2001

• Tables for layout• Spacer GIFs• No CSS• IE 3, Netscape 4

• 640x480 or 800x600 desktop• 256 colors (web-safe colors)• HTML4 (when we thought about standards)

2015

2015

2015

How are we teaching differently in 2015?

Students wind up at universities or hack schools because they don’t know where to start.

Universities often offer information that’s not up to date.

“One of the things that noncredit can do faster than credit is respond to employers’ needs,” said Jim Morris, an associate vice president in the university’s Division of Continuing Studies. “The university can’t be changing its curriculum every six months.”

http://chronicle.com/blogs/wiredcampus/university-run-boot-camps-offer-students-marketable-skills-but-not-course-credit/57494

Good front-end web design curriculum

• User experience

• HTML5 and CSS3

• JavaScript

• CSS preprocessors

• Design/UI

• File management

• Web hosting/FTP

• Workflows

• Content Mgt System

• Identify the next hot thing and learn it

Prior computer experience required.

HTML5Starting with Ugly Web Pages®

CSS3Wow, we can finally make it pretty!

<div class="col-1-2">

<h3>Minuteman Bikeway</h3>

<img src="img/bikeway-225.jpg"

alt="MinutemanBikeway.">

<p>Winding through Cambridge, Arlington,

Lexington, and Bedford, there's lots to enjoy.</p>

<p><a href="http://www.minutemanbikeway.org/"

target="_blank">Read more &gt;&gt;</a></p>

</div>

body {

font-size: 100%;

font-family: Arial, Geneva, sans-serif;

background-color: #B1D3EE;

}

h1,h2,h3,h4,h5,h6 {

font-family: 'Cabin Condensed', sans-serif;

}

a {

color: #2772B0;

}

for(var i = 0; i < f.length; i++) {

var e = f.elements[i];

if (((e.type == "text") || (e.type == "textarea")) && !e.optional) {

// first check if the field is empty

if ((e.value == null) || (e.value == "") || isblank(e.value)) {

empty_fields += "\n " + e.name;

continue;

}

// Now check for fields that are supposed to be numeric.

if (e.numeric || (e.min != null) || (e.max != null)) {

var v = parseFloat(e.value);

if (isNaN(v) ||

((e.min != null) && (v < e.min)) ||

((e.max != null) && (v > e.max))) {

errors += "- The field " + e.name + " must be a number";

if (e.min != null)

errors += " that is greater than " + e.min;

if (e.max != null && e.min != null)

errors += " and less than " + e.max;

else if (e.max != null)

errors += " that is less than " + e.max;

errors += ".\n";

}

}

}

}

• Hello world

• Variable

• Math, operations

• If/else, loops

• Arrays

• Hooray, now you can program!

We can do better.

Sass as a learning bridge

• Sass is the most popular pre-processor, with data structures that resemble other programming languages

• Variables, math operations, if/else, loops are all part of Sass

• Break up file structure into partial files and manage these

• Introduces compiling, workflows, code reuse

$primary-color: #987654;

$space: 1em;

$half-space: $space/2

%box {

width: 10em;

height: 10em;

margin: $space;

padding: $space;

color: white;

font-size: 0.8em;

font-weight: bold;

}

.box-primary {

@extend %box;

color: $primary-color;

border-radius: 1rem;

}

.box-secondary {

@extend %box;

border: 1px solid blue;

}

@mixin alert-variant($background, $border, $text-color) {

background-color: $background;

border-color: $border;

color: $text-color;

hr {

border-top-color: darken($border, 5%);

}

.alert-link {

color: darken($text-color, 10%);

}

}

div {

color: darken($primary-color, 20%);

}

$base-font-size: 16px;

@function pxtoem ($px, $base: $base-font-size) {

@return ($px / $base) * 1em;

}

.container {

max-width: pxtoem(320px);

}

@if $adjust {

// We set the font color based on the darkness of the bg.

@if $bg-lightness >= 50% and $bg == blue {

h1,h2,h3,h4,h5,h6,p { color: $panel-font-color-alt; }

}

@else if $bg-lightness >= 50% {

h1,h2,h3,h4,h5,h6,p { color: $panel-font-color; }

}

@else {

h1,h2,h3,h4,h5,h6,p { color: $panel-font-color-alt; }

p a {text-decoration: underline;

color: lighten($primary-color, 45%); }

p a:hover {text-decoration: none;

color: darken($panel-font-color-alt, 20%); }

}

@each $animal in puma, sea-slug, egret, salamander {

.#{$animal}-icon {

background-image: url('/images/#{$animal}.png');

}

}

.puma-icon {

background-image: url('/images/puma.png'); }

.sea-slug-icon {

background-image: url('/images/sea-slug.png'); }

.egret-icon {

background-image: url('/images/egret.png'); }

.salamander-icon {

background-image: url('/images/salamander.png'); }

What comes after Sass?

•jQuery

•JavaScript

•Framework du Jour

Jen Kramer

• Slides at www.slideshare.net/jen4web

• Free 10 day subscription to Safari books and training videos online: https://www.safaribooksonline.com/register/

jen@jenkramer.org • www.jenkramer.org