Q:

Bootstrap: Utilize Media Query for Custom Responsive Class

I want to make a custom class via bootstrap that does the following: 

When the screen size is xs: then make the text left justified. 

Here is what I have:
@media (max-width: 767px) {
  .text-left-xs{
    @extend .text-left;
  }
}

However when I run it: here is the error I get:

You may not @extend an outer selector from within @media. 
  You may only @extend selectors within the same directive. 

How can I make this work? 

A:

.text-left-xs {
 @media (max-width: 767px) {
  text-align: left;
 }
}

