ryanallen

$svg-path : "../../img/svg/";

body {
  background: url(#{$svg-path}astronaut-ryan.svg) repeat-x fixed 0 0;
}

ryanallen

Sass Doesn't Care

Whether you use underscores or hyphens or mix and match.

Share this gist.

by Ryan Allen on CodePen.

ryanallen

.scene__adventure {
	@include	scene;
	background: {				  	/// : needs to replace the - for nested properties
		color:	$blue20;
		image:	url(#{$svg-path}space-adventure__stars.svg);
	}
}

ryanallen

@mixin corners($corner...) {
  border-radius: $corner;
}

.round-corners {@include corners(1rem 1em 1vw 1vmin);}

/// compiles to:
///
/// .round-corners {border-radius: 1rem 1em 1vw 1vmin;}
/// official docs: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variable_arguments

ryanallen

How to npm

Before you can use the npm command, you'll need to install [Node.js][].

Installation

You can install [Node.js][] directly or to manage multiple versions, try Volta!

Local usage (recommended)

ryanallen

Aligning images

left alignment

This is the code you need to align images to the left:

ryanallen

{
    "W": 512,
    "H": 512,
    "restore_faces": false,
    "tiling": false,
    "enable_hr": false,
    "firstphase_width": 0,
    "firstphase_height": 0,
    "seed": 2329578955,
    "sampler": "Euler a",

ryanallen

Concept selection matrix is for ranking solutions against the right problems. Use the table below or this google sheet.

Needs	Grouped concept 1	Grouped concept 2
Need 1.1 (main or sub or indv)
Need 1.2
Need 2.1 (main or sub or indv)
Need 2.2
Cost (difficulty)
Wow factor
Elegance & beauty