Archived video

This video is archived and won't be updated. We're keeping it online for now as a courtesy.

Sass @extend Directive

Video loading...

Transcripts: 
Transcript file: 
d92b828c-0c30-488a-9404-da21161ceedb---eng.srt
Transcript language code: 
eng

Join Drupalize.Me to watch this video

Join today and gain instant access to our entire video library.

Log in Sign up
  • 0:06
    When working in CSS, it's not uncommon to have a situation
  • 0:10
    where you have a base class that has just most of the styling that you want.
  • 0:15
    But then there's a specific instance where you want to change just a few things
  • 0:19
    or add a few things specific to that sort of instance
  • 0:24
    where you're using that class in your HTML.
  • 0:27
    Now in normal CSS and HTML, what you would do is you would just simply add
  • 0:33
    that base class and then you would add a more specific class as well
  • 0:37
    to the HTML item, and then you would write out how you wanted to tweak that.
  • 0:42
    But in Sass with the @extend directive,
  • 0:46
    what you can do is have the specific class

Learning Sass and Compass

Loading ...

Sass @extend Directive

Loading...
9 minutes // HDCC //

When working with your CSS you will often have instances where something should include all of the styling associated with a class, in addition to a few extras that are specific to just that item. In regular CSS you would normally put the general class on the item, and add a more specific class with the additional styling. With the Sass @extend directive, you can have the more specific class inherit the styling of another class, so that you can just use the specific class in your HTML, keeping you HTML markup nice and concise.

Additional resources:
There are no resources for this video. If you believe there should be, please contact us.