Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by methany salander
methany salander
Courses Plus Student 40 Points

How to get all classes together

In Sass, do you know any way to union classes? I have a problem and is that sometimes elements got like this:

 <div class="fas asasfen aspasen asen eainb"></div>

So i would like to do something like this

.allclasses{

  .fas

  .asasfen

  .aspasen

  .asen

  .eainb
}

So the result would be this

<div class="allclasses"></div>

Do you know any way to do this?

2 Answers

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

Because of the space, your final div above would have two classes, one named all and one named classes.

Now I'm not experienced with SASS, so I don't know if you can combine classes in it.

But what you can do, in pure CSS, is add the new class as an additional selector to all the other class rules. Something like this:

.fas, .allclasses { /* css rule for class "fas" */ }

.asasfen, .allclasses { /* css rule for class "asasfen" */ }

.aspasen, .allclasses { /* css rule for class "aspasen " */ }

.asen, .allclasses { /* css rule for class "asen" */ }

.eainb, .allclasses { /* css rule for class "eainb " */ }

So your html would be this:

<div class="allclasses"></div>
methany salander
PLUS
methany salander
Courses Plus Student 40 Points
methany salander
methany salander
Courses Plus Student 40 Points

I also did something like this:

@mixin hello(){
  color: white;
}
@mixin nothing(){
  padding: 0 2px 3px 4px;
  margin: 5px;
  background-color: blue;
  border-top: 4px red solid;
  color:red;
}
.hello {
  @include hello();
}
 .nothing {
  @include nothing();
}

.evething{
  @include hello();
  @include nothing();
}

and i got something like this:

.hello {
  color: white;
}

.nothing {
  padding: 0 2px 3px 4px;
  margin: 5px;
  background-color: blue;
  border-top: 4px red solid;
  color: red;
}

.evething {
  color: white;
  padding: 0 2px 3px 4px;
  margin: 5px;
  background-color: blue;
  border-top: 4px red solid;
  color: red;
}