HOW TO BUILD SMARTER SASS
don’t forget to cover your Sass!
I’M @ANOTHERUIGUY
I work for people, I teach and I build things
IN A PERFECT WORLD
things would just work, am I right?
WE ARE IN AN
INCREASINGLY
MODULAR
WORLD
CLEAN OUT
YOUR SASS
JUNK DRAWER
HI, I'm ...
the ‘file
structure’ guy
DETERMINISTIC SYSTEM
the 'perfect' pre-determined plan ... what can go wrong?
WHEN THE PRESENT DETERMINES THE
FUTURE, BUT THE APPROXIMATE PRESENT
DOES NOT APPROXIMATELY DETERMINE
THE FUTURE.
you have chaos
SASS ERROR LOG
not the whole truth
[13:04:50] CSS COMPILATION ERROR: { status: 1,
file: '/Users/dale.sande/src/styles/base/channel.scss',
line: 1299,
column: 12,
message: 'no mixin named -breakpoint\nBacktrace:\n
\tsrc/style/base/channel.scss:1299',
code: 1 }
[13:08:34] CSS COMPILATION ERROR: { status: 1,
file: '/Users/dale.sande/src/styles/framework/core/
mixins/_responsive.scss',
line: 33,
column: 40,
message: 'unbound variable $breakpoints',
code: 1 }
attr: calc(100% - 50px);
all things being equal
@mixin simple-gradient ($direction, $colors ...) {
$startColorstr: get-list-value($colors);
$endColorstr: get-list-value($colors, last);
}
background-color: $startColorstr;
background-image: linear-gradient(to $direction, $colors);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr =
'#{ie-hex-str($startColorstr)}',
endColorstr = '#{ie-hex-str($endColorstr)}', GradientType = 0);
.block {
@include simple-gradient(bottom, #fff 0%,
red 50%, black 100%);
width: 100%;
}
argument `$color` of `ie-hex-str($color)`
must be a color
Backtrace:
stdin:6, in function `ie-hex-str`
stdin:6, in mixin `simple-gradient`
stdin:8 on line 6 at column 11
$color: "get-list-value(#fff 0%, red 50%,
black 100%)" is not a color for `ie-hexstr'
@mixin simple-gradient($direction, $colors...) {
$startColorstr: get-list-value($colors);
$endColorstr: get-list-value($colors, last);
[rest of the mixin codes were here]
}
@mixin simple-gradient($direction, $colors...) {
@if function-exists(get-list-value) {
[previous mixin goes here]
}
@else {
@warn "The 'simple-gradient' mixin requires
the custom function 'get-list-value',
please install";
}
}
WARNING: The 'simple-gradient' mixin
requires the custom function 'get-list-value',
please install
on line 22 of test.sass, in `simple-gradient'
from line 25 of test.sass
.block {
width: 100%; }
@mixin simple-gradient ($direction, $colors ...) {
$startColorstr: get-list-value($colors);
$endColorstr: get-list-value($colors, last);
background-color: $startColorstr;
background-image: linear-gradient(to $direction, $colors);
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr =
'#{ie-hex-str($startColorstr)}',
endColorstr = '#{ie-hex-str($endColorstr)}', GradientType
= 0);
}
@mixin simple-gradient($direction, $colors...) {
@if type-of($startColorstr) == color {
@if type-of($endColorstr) == color {
[previous mixin goes here]
} @else {
@warn '#{$endColorstr}', not valid color
}
} @else {
@warn '#{$startColorstr}', not valid color
}
}
.block {
@include simple-gradient(bottom, orang 0%,
#000 50%, #000 100%)
width: 100%;
}
WARNING: 'orang', not a valid
color
on line 26 of input/test.sass
from line 31 of input/test.sass
{
"message": "argument `$color` of `ie-hexstr($color)` must be a color\n\nBacktrace:\n
\tinput/test.sass:20, in function `ie-hex-str`\n
\tinput/test.sass:20, in mixin `simple-gradient`\n
\tinput/test.sass:25",
"column": 13,
"line": 20,
"file": "/Users/dalesande/Desktop/foo/input/
test.sass",
"status": 1
}
ONE MORE THING …
@each $function in $functions {
@if function-exists(#{$function}) {
@alert "Function '#{$function}' has returned true"
} @else {
@warn "Function '#{$function}' has returned false,
import file from '/functions/_#{$function}.scss'"
}
}
$functions: assign-inputs, islength, is-size, rem, em, tint,
contains-falsy, is-light,
modular-scale, shade,
transition-property-name,
contains, is-number, stripunits, unpack;
WARNING: Function 'em' has returned false,
import file from '/functions/_em.scss'
on line 7 of sass-test.scss
from line 10 of app.sass
WARNING: Function 'strip-units' has
returned false, import file from '/functions/
_strip-units.scss'
on line 7 of sass-test.scss
from line 10 of app.sass
WARNING: Function 'unpack' has returned
false, import file from '/functions/_unpack.scss'
I’M @ANOTHERUIGUY
I work for people, I teach and I build things