Join Ray Villalobos for an in-depth discussion in this video Building your own mixins, part of Building a Responsive Single-Page Design with Sass.
Creating reusable pieces of code is another one of the great features of Sass.…Sass Compass as well as Break Point also give us pre-build mix-ins and you can use…that to create layouts, but occasionally you'll want to create your own.…And that's what the mixin.scss file is for.…So let's go ahead and create a couple of them.…Now, first I'm going to…create a mix-in that creates a full-screen background image.…Now, to do that, I'm going to use some code from CSS-Tricks.…If you scroll down, it shows you how this is going to work.…
- Compass, whose Sass mixins help you leverage CSS3 features like Flexbox
- Susy 2, the framework that "subtracts" the math from responsive grid design
- ScrollMagic, for adding "magical" scroll effects
- Breakpoint, which makes writing media queries in Sass a snap
But this course isn't just about the tools. It's a realistic project that epitomizes many of the design challenges website developers face in the real world. Start watching now and learn how to use HTML, jQuery, and CSS to build your own dynamic, deeply responsive designs.
- Analyzing the project before you begin
- Creating basic styles
- Building your own Sass mixins
- Coding the navigation
- Making the navigation responsive, with grids
- Using a split layout
- Creating tween animations
- Controlling scenes with scrolling
Skill Level Intermediate
1. Getting Started
2. Organizing Your Sass
3. Creating Responsive Grids with Susy
4. Animating Your Layouts
Next steps1m 38s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.