twitter-bootstrap Sass:之后是否可以使用 Sass 将类添加到 HTML 元素中?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/20736258/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 19:33:09  来源:igfitidea点击:

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

htmlcsstwitter-bootstrapsass

提问by LoveAndHappiness

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?

因此,在使用 Twitter Bootstrap 时,我可以将网格系统应用于我的 HTML。是否可以使用 sass 将类应用于文章,即使它从一开始就没有应用于 HTML?

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.

后来我想用sass做,是因为我有一堆文章,而且我必须在它们上面应用网格系统。但我确信我稍后会揭示实际的宽度和列的数量。

Is this possible with Sass and if yes, how?

这对 Sass 是否可行,如果是,如何实现?

回答by Bill Criswell

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

不可以。您不能通过 CSS 向 HTML 添加类。你可以考虑使用@extend

For example:

例如:

%grid-half {
  width: 50%;
}

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

回答by nCore

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..

不太确定你想要做什么,但你可以在 Sass 中进行嵌套,你也可以将自己的类名放在引导程序中。

so let say

所以让说

<div class="myClass col-5">

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

所以在你的 Sass/Css 你只需调用 myClass

.myClass{}

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

Sass 嵌套:http: //sass-lang.com/guide