Sass Fundamentals

Challenge 8: Nudging Classes

Mike North

Mike North

Stripe
Sass Fundamentals

Check out a free preview of the full Sass Fundamentals course

The "Challenge 8: Nudging Classes" Lesson is part of the full, Sass Fundamentals course featured in this preview video. Here's what you'd learn in this lesson:

In this challenge, students use @for, @each, and data structures to create CSS rules for moving elements in five-pixel increments.

Preview
Close

Transcript from the "Challenge 8: Nudging Classes" Lesson

[00:00:00]
>> Mike North: Here's what I want to do with iteration. So has anyone seen CSS classes like what we have on the right side here? Little mini, like nudging classes. So we don't have to like, every time we need to move a button down in a nav bar, we don't have to go in and explicitly specify the style there.

[00:00:18]
We can just declaratively say bump this down ten pixels. This is really repetitive CSS to write. So I want us to see if we can build this using lists and loops and potentially maps. The solution I came up with Is less than 15 lines to create what we need to create here.

[00:00:43]
Here is what I want. Both margin and padding in five pixel increments starting at five ending at 25. That means like MT5, MT10, MT15, MT20, MT25. Both for top, left, bottom, right, and then do the same thing for padding.
>> Mike North: Now this would be really, really tedious, except that we can do it in sort of a general way where we use multiplication, and iteration, and lists, and wraps to just build all of these things as loops.

[00:01:19]
Probably loops within loops. So I would advise, if you're not an everyday programmer, start with one loop and just try to get like a set of comments to iterate out just so you can tell that you're going from five to ten to 15 to 20. And then kind of expand on that concept from there.

[00:01:39]
And we will get to the solution in about 25 minutes.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now