Sass 102 – Data Types & Control Structures – Lists

View Github Repository Open presentation in a new window

taupecat

See all presentation from taupecat

Sass 102 – Data Types & Control Structures – Lists

0 0

sass-102

On Github taupecat / sass-102

Sass 102

Data Types & Control Structures

Follow along athttp://taupecat.github.io/sass-102

Who Am I?

Tracy Rotton

Sass 101

  • Variables
  • Nesting (Don't Abuse!)
  • @extend
  • Mixins
  • Media Query Bubbling

Sass 102

  • Data Types
  • Control Structures

What are we even talking about?

  • Data type: a way of classifying a piece of information. Common examples in programming are booleans, strings and integers
  • Control structure: instruction to the computer on how to evaluate a piece of data.

CSS Has (Very Few) of These...

…which makes it not a programming language. Programming languages require logic, which CSS lacks, with few exceptions.

Calc is an exception; CSS is exactly what its name says it is. A set of rules that define the style of a document, and that's it.

Basic Sass Data Types

  • Numbers: 3.14159, 42, 10px
  • Strings: foo, "bar"
  • Colors: #7FFF00, rgb(127, 255, 0), hsla(90, 100%, 50%, 1), Chartreuse

Like any data type, these can be acted on.

Demo Time!

Let's calculate some colors

This is what makes Sass color functions like mix() and adjust-hue() possible

More Data Types

  • Booleans: true & false
  • Null: null
  • Lists (a.k.a. arrays)
  • Maps (a.k.a. hashes), new in 3.3

Lists

$states: (
  "AL", "DC", "DE", "FL", "GA", "IA", "IL",
  "IN", "KY", "LA", "MD", "MI", "MO", "MS",
  "NC", "NJ", "NY", "OH", "PA", "SC", "TN",
  "VA", "WV"
);

Multi-dimensional Lists

$regions: (
  ( "DC", "DE", "MD", "NJ", "NY", "PA" ),
  ( "AL", "FL", "GA", "KY", "LA", "MS", "NC", "SC", "TN", "VA", "WV" ),
  ( "IA", "IL", "IN", "MI", "MO", "OH" )
);

Some List Functions

  • length( $list )
  • nth( $list, $n )
  • join( $list1, $list2 [, $separator] )
  • append( $list, $val [, $separator] )
  • index( $list, $value )

Warning!

List indexes start at 1, not 0!

Maps

$social: (
  "facebook":       '\f204',
  "twitter":        '\f202',
  "linkedin":       '\f207',
  "pinterest":      '\f209',
  "github":         '\f200',
  "dribbble":       '\f201',
  "instagram":      '\f215',
  "email":          '\f410'
);

Multidimensional Maps

$mega-social: (
  "facebook":		( content: "\f204", coords: 0 0 ),
  "twitter":		( content: "\f202", coords: 0 -64px ),
  "linkedin":		( content: "\f207", coords: 0 -128px )
);

Map Functions

SCSS:

li.facebook:before {
  content: map-get($social, "facebook");
}

Map Functions

CSS:

li.facebook:before {
  content: '\f204';
}

Some More Map Functions

  • map-merge( $map1, $map2 )
  • map-remove( $map, $key )
  • map-keys( $map )
  • map-values( $map )
  • map-has-key( $map, $key )

Control Structures

  • @while
  • @for
  • @if / @else if / @else
  • @each

@while

SCSS

$types: 4
$type-width: 20px

@while $types > 0 {
  .while-#{$types} {
    width: $type-width + $types;
  }
  $types: $types - 1
}

@while

CSS

.while-4 {
  width: 24px;
}
.while-3 {
  width: 23px;
}
.while-2 {
  width: 22px;
}
.while-1 {
  width: 21px;
}

@for

@mixin griddr($cols) {
  // do a math here
}

@for $i from 1 through $columns {
  .col-#{$i} {
    @include griddr($i);
  }
}

@for

SCSS

@for $i from 1 through 9 {
  .space-#{$i} {
    background-image: url("../images/space/space-#{$i}.jpg");
  }
}

@for

CSS

.space-1 {
  background-image: url("../images/space/space-1.jpg");
}
.space-2 {
  background-image: url("../images/space/space-2.jpg");
}
.space-3 {
  background-image: url("../images/space/space-3.jpg");
}

etc.

2 @for Variations

@for $var from 1 through 10 {
  // Sass stuff goes here
  // Operation includes the number 10
}

@for $var from 1 to 10 {
  // Other Sass stuff goes here
  // Operation stops after number 9
}

@if / @else if / @else

@mixin breakpoint($breakpoint) {
  @if $breakpoint == medium {
    @media only all and (min-width: 640px) {
      @content;
    }
  } @else if $breakpoint == large {
    @media only all and (min-width: 1024px) {
      @content;
    }
  }
}

@if / @else if / @else

SCSS:

p {
  background-color: rgba(255, 0, 255, 0.2);

  @include breakpoint(medium) {
    background-color: rgba(255, 255, 0, 0.2);
  }
}

@if / @else if / @else

CSS:

p {
  background-color: rgba(255, 0, 255, 0.2);
}

@media only all and (min-width: 640px) {
  p {
    background-color: rgba(255, 255, 0, 0.2);
  }
}

Demo Time!

Let's use this in the real world.

@each in Lists

SCSS:

@each $state in $states {
  .#{$state} {
    background-image: url("../images/state_infographics/#{$state}.png");
  }
}

@each in Lists

CSS:

.AL {
  background-image: url("../images/state_infographics/AL.png");
}

.DC {
  background-image: url("../images/state_infographics/DC.png");
}

.DE {
  background-image: url("../images/state_infographics/DE.png");
}

...

@each in Maps

SCSS:

@each $network, $content in $social {
  .#{$network} a:before {
    content: $content;
  }
}

@each in Maps

CSS:

.facebook a:before {
  content: '\f204';
}

.twitter a:before {
  content: '\f202';
}

.linkedin a:before {
  content: '\f207';
}

...

Demo Time!

Let's loop through some stuff.

Further Reading

Thanks!

Questions?