mirisuzanne

@-webkit-keyframes bgcolor { 0% { background-color: #ffccf2; }
  50% { background-color: #ccffcc; }
  100% { background-color: #ccffff; } }

@-moz-keyframes bgcolor { 0% { background-color: #ffccf2; }
  50% { background-color: #ccffcc; }
  100% { background-color: #ccffff; } }

@-ms-keyframes bgcolor { 0% { background-color: #ffccf2; }
  50% { background-color: #ccffcc; }

mirisuzanne

Rainbow stripe mixin with SCSS + Compass

I'm trying to make a horizontal rainbow stripe background gradient mixin, but I feel like this is way too verbose. How can it be better?

Goals:

1. [check] Use variables for colors so they can be swapped out for different colors.
2. [check] The widths are hard coded for 8 colors. Can it be done smarter where it adjusts to the number of colors you add? Or is that asking too much?
3. [check] The colors are defined twice for the color starts and stops. Can this be done better?
4. [see below] Right now I define the colors as variables at the top level, then pass them in the mixin. Should they instead be created inside the mixin and then colors are brought in as arguments? Or does that matter?

mirisuzanne

@use 'sass:string';
@use 'sass:list';
@use 'sass:math';
@use 'sass:meta';

@function split($string, $separator, $limit: null) {
    @if meta.type-of($string) != 'string' {
        @error '$string is not a string';
    }
    @if meta.type-of($separator) != 'string' {

mirisuzanne

@import "compass/css3/shared";

// September 2012 Candidate Recommendation (http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/)
// Chrome 21 (prefixed)
// Opera 12.1 (unprefixed)
// Firefox 20 (unprefixed)
$flex-moz: false !default;
$flex-webkit: true !default;
$flex-o: false !default;
$flex-ms: false !default;

mirisuzanne

@use 'sass:string';
@use 'sass:list';
@use 'sass:math';
@use 'sass:meta';

@function split($string, $separator, $limit: null) {
    @if meta.type-of($string) != 'string' {
        @error '$string is not a string';
    }
    @if meta.type-of($separator) != 'string' {

mirisuzanne

#include <MIDI.h>

const int BUTTON = 2;
int currentState = HIGH;
int newState = HIGH;

byte goArray[7] = {0xf0, 0x7f, 0x7f, 0x02, 0x01, 0x01, 0xf7}; // GO array

MIDI_CREATE_DEFAULT_INSTANCE();

mirisuzanne

/* 
  This is not meant to be a final CSSWG proposal, 
  but reflects my immediate thoughts after reading
  [David Baron's](https://github.com/dbaron/container-queries-implementability) promising draft.
  This gist was created to demonstrate my idea for removing selectors from his query syntax.

  More of my thoughts & notes are online at css.oddbird.net/rwd/
*/

main,

mirisuzanne

Susy 0.9 Tutorial

See the official Susy site for 1.0 documentation.

For this tutorial I'm assuming you are already comfortable with CSS, Sass (I'll use the SCSS syntax) and Compass. Please get set up with each one of those before attempting to use Susy. Sass and Compass both have their own setup instructions and tutorials that you can use.

There is also reference documentation in the works.

Building a Susy Grid

mirisuzanne

//**
//  Susy: Elastic-Fluid grids without all the math
//  by Eric Meyer and OddBird Collective
//  http://www.oddbird.net
//**


/* RESET STYLES
@import compass/reset.sass

mirisuzanne

// Apply any css property/value pair.
@mixin css(
  $azimuth: null,
  $background: null,
  $background-attachment: null,
  $background-color: null,
  $background-image: null,
  $background-position: null,
  $background-repeat: null,
  $border: null,