Sweating the Small Stuff: Recreating Subtle Design Details Using Sass
summary
Claims an automated Photoshop-to-CSS pipeline that reproduces exact layer styles using Sass and Compass, converts Photoshop angle+distance shadow values to X/Y offsets via trigonometric functions, recalculates gradient scale by shifting stops so oversized gradients map to CSS, and implements blend modes as color math so overlays match. Several Compass extensions and mixins shrink buttons to a single mixin invocation and eliminate much visual QA by compiling designer values directly into production CSS.
AI-written summary · about
chapters (26)
- 0:00Intro
- 4:43Extend placeholder
- 5:56Color lightness
- 6:18Background color
- 6:37Design logic
- 7:04Layer styles
- 7:21Drop shadow
- 8:10Trigonometry
- 8:59Compass
- 9:32BoxShadow
- 9:42DropShadow
- 10:03TextShadow
- 10:46Button
- 11:04Linear Gradient
- 11:51Angle Conversion
- 13:04Scale
- 14:33Gradients
- 14:55Linear Grain
- 15:05Plot Twist
- 15:22Blend Modes
- 16:37Blend Mode Limitations
- 17:07Gradient Overlay Conversion
- 17:31Tool Kit
- 18:09Refactoring
- 18:36Styling Buttons
- 18:52Conclusion
