Join Ray Villalobos for an in-depth discussion in this video Going through a list with @each, part of Sass Essential Training.
- Lists can become much more powerful…when you can use them to go through a series of values.…Now when you don't know how many items there are in a list,…you can use the @each statement.…So let's change the way we're creating our buttons…using this each statement.…So you have some code right here that sets up our buttons,…and if we scroll down here on the right-hand side,…you can see that we're generating three different kinds…of buttons down here,…and all the code for that is in these three statements.…What I'm going to do is create a few lists,…and then use the values in those lists…to create these buttons automatically.…
So first, I'm going to create one called…color-btn-names,…and I'm going to use default as the first name,…then hot, and cool,…which is the name of our three buttons.…And then I'm going to use another list here…called color-btn-values,…and here I'm going to use some color variables.…So color-main, red,…and blue.…
And this is actually what we are going to be using…instead of these values right here, so…
- Working with variables
- Nesting styles
- Creating mixins
- Conditional statements and loops in SassScript
- Extending your mixins
- Working with lists and maps
Skill Level Intermediate
CSS: Advanced Typographic Techniqueswith James Williamson3h 14m Intermediate
1. Getting Started
2. Learning Sass Fundamentals
3. Working with SassScript
Next steps1m 21s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
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.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.