Include style one CSS class to another

Question

Is that possible to include styles of one css class to another? I mean SASS @extends pretty much does a similar thing, but it also styles extended class, which is not required. See example:

<style>
.myclass1{
  background:red;
}

.myclass2{
  color:blue;
  @extend .myclass1;
}
</style>

<div>
  <p class="myclass2">Hello i am class 2, my text is blue and background is red</p>
</div>

<div>
  <p class="myclass1">Hello i am class 1, my text should not blue and my background is red</p>
</div>

Posted example is inspired by article of CSS-tricks Web, but here everything is very confusing it is not working as it should. myclass2 should give myclass1 according to article. However, it is giving strange output. Am I heading in the right direction? or is the article wrong?

Update: Question is only about the actual concept behind @extend of SAAS, and including other CSS class to another, and what is the difference?

Answer 1

CSS without pre-processors (SASS, LESS etc.):

.myclass1{
	background:red;
}

.myclass2{
	color:blue;
}

<div>
<p class="myclass1 myclass2">Hello, I am of class 2 (my text is blue) and of class 1 (my background is red)</p>
</div>

<div>
<p class="myclass1">Hello, I am only of class 1 (my background is red)</p>
</div>

You can add multiple classes to the same element.