Kiss My Sass
summary
Shows practical Sass recipes using Dart Sass and a small demo app of three cards (coffee, cupcake, bacon) plus a three-item nav; uses mixins vs extend for dynamic vs static styles, a color complement function and a contrast loop that darkens button text by 1% until an accessibility contrast check passes, plus for/each interpolation to generate rotated triad rainbow links (120° steps). Code compiles at build time, is on GitHub, and the contrast fixes produce readable buttons.
AI-written summary · about
chapters (32)
- 0:00Intro
- 1:00Sass vs Ruby
- 2:10What is Sass
- 3:17Syntaxes
- 4:02Nesting
- 7:34Variables
- 10:43curly braces
- 12:04HTML
- 12:42Mixins
- 15:01Extend
- 17:43Color Functions
- 18:25Complement
- 20:17Code
- 22:05Conditions
- 23:48Functions
- 24:01Syntax
- 24:56Color Contrast
- 25:38Color Function
- 26:38Return Function
- 26:55Ifelse
- 29:33Colors
- 30:11Console Log
- 30:58Three Cards
- 31:19Add Each
- 33:16Output
- 34:01Navigation
- 34:30Rainbow Colors
- 34:59App for Loop
- 36:18Color Wheel
- 38:32A Link
- 40:27Questions
- 42:54Mapping
related talks
33mDynamically Sassy
21mStyling your CSS with Reason
43mSass: 2020 And Beyond
25mBaseline Magic: The Art of Intent-Driven CSS
39mThe Mind-blowing Power of Sass 3.3
56mModern CSS For Dynamic Component-Based Architecture
23m'arduino-sass' - Custom SASS framework, from design to implementation
47mThe Future of Sass