Join Ray Villalobos for an in-depth discussion in this video Using the @extend method, part of Sass Essential Training.
- Sass can use one class as a basis for a second class.…Now, when we do that, we're extending the functionality…of one class with another.…And you can control how you write your HTML…and how your css gets output with this technique.…So, let's go ahead and take a look.…What I've set up here is a section called Buttons.…Right now, it's got three buttons in.…They all have the default look,…and I'm going to write some styles to improve on those.…To set that up in my style.scss file,…I have added another import here…for something called interface.…
So, that file is right here, and it pretty much…just defines a standard button with a .btn class.…So, what I'm going to do is just apply that into my HTML.…Let's go ahead and open that up…and scroll down to the button section here.…And I'll just add a class of btn to each of these.…So, I'm going to save that and you'll see that…the buttons just with the btn class have a certain look.…Now, I'm going to modify that look by expanding…on this button.…
But first, I'm going to create some colors right here.…
- Working with variables
- Nesting styles
- Creating mixins
- Conditional statements and loops in SassScript
- Extending your mixins
- Working with lists and maps
Skill Level Intermediate
Responsive CSS with Sass and Compasswith Ray Villalobos3h 22m Intermediate
CSS: Advanced Typographic Techniqueswith James Williamson3h 14m Intermediate
Building a Responsive Single-Page Design with Sasswith Ray Villalobos4h 55m Intermediate
1. Getting Started
Understanding Sass7m 33s
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.