Sass: Is it possible to add a class using Sass to an HTML-Element afterwards?

Question

I hope somebody can help me with my question.

Lets say I have this:

            <div class="container">
                <div class="row">
                    <article>
                        <p class="story-image">
                            <a href="#">
                                <img src="../media/images/awesomeness.jpg" alt="image1" class="img-responsive">
                            </a>
                        </p>
                        <section>
                            <h3>Companies</h3>
                            <h2>
                                <a href="#">
                                    Awesome-O beherrscht die Welt
                                </a>
                            </h2>
                            <p>
                                Last year, was pretty medium. But I know, by the power of my thought and my willpower, that I will make two companies and earn millions.
                            </p>
                        </section>
                    </article>
                </div>
           </div>

So, when using Twitter Bootstrap, I can apply the grid system to my HTML. Is it possible by using sass to apply a class to the article, even if it wasn't applied in the HTML from the beginning?

for example somehow like this:

 html{
      body {
           article {
                addclass --> col-lg-4 col-md-4 col-sm-6 col-xs-12;
           }
      }
 }

The reason I want to do it afterwards with sass, is that I have a bunch of articles, And I have to apply the grid system on them. But I am sure that I am going to revealuate at a later point the actual width and the ammount of the columns.

Is this possible with Sass and if yes, how?

Kellikellia

Answer 1

No. You can't add classes to HTML through CSS. You could look into using @extend though.

For example:

%grid-half {
  width: 50%;
}

.article {
  @extend %grid-half;
  color: purple;
}

Leix

A link with details on the @extend directive would have been really helpful with this answer. sass-lang.com/guide#topic-7 is the url. With firefox, you may have to focus in the address bar and press Enter. Topic 7 is "Extend/Inheritance" – Bonesetter

Answer 2

Not quite sure what you wanted to do but you can do nesting in Sass and you can also put your own class name in bootstrap..

so let say

<div class="myClass col-5">

so in your Sass/Css you'd just call myClass

.myClass{}

Sass nesting: http://sass-lang.com/guide

Moorings

Answer 3

I'm with @Bill Criswell on this one. @extend seems to be the closest you can come -- I did something like this:

global.scss

@import "./_vars";
@import "./_classes";
@import "./_headers";

body {
    font: 100% $font-stack;
    background-color: $bgColor;
    color: $fgColor;
}

a {
    @extend .no-deco;
}

_classes.scss

.no-deco {
    color: inherit;
    text-decoration: none;
}

Works like a charm...

Side Note: As much as I hate to say it, less.css does this a little better in my opinion too...

global.less

@import "./_vars";
@import "./_classes";
@import "./_headers";

body {
    font: 100% @font-stack;
    background-color: @bgColor;
    color: @fgColor;
}

a {
    .no-deco;
}

_classes.less

.no-deco {
    color: inherit;
    text-decoration: none;
}

it's really the same, but you don't have to add the '@extend' to it.

Stereochrome