css Sass：之后是否可以使用Sass向HTML元素添加类？

whlutmcx 于 2023-02-01 发布在其他

关注(0)|答案(3)|浏览(136)

我希望有人能回答我的问题。
假设我有这个：

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

因此，当使用Twitter Bootstrap时，我可以将网格系统应用到HTML中。是否可以使用sass将一个类应用到文章中，即使它从一开始就没有应用到HTML中？
比如说像这样

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

我想在sass之后做这个的原因是，我有很多文章，我必须在它们上面应用网格系统，但是我确信我会在以后的时间点揭示列的实际宽度和数量。
这可能与萨斯，如果是的，如何？

css

来源：https://stackoverflow.com/questions/20736258/sass-is-it-possible-to-add-a-class-using-sass-to-an-html-element-afterwards

3条答案

按热度按时间

de90aj5v1#

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

%grid-half {
  width: 50%;
}

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

赞(0）回复(0）举报 2023-02-01

cbeh67ev2#

不太确定你想做什么，但是你可以在Sass中做嵌套，你也可以把你自己的类名放进bootstrap中。
这么说吧

<div class="myClass col-5">

因此在Sass/Css中只需调用myClass

.myClass{}

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

赞(0）回复(0）举报 2023-02-01

e1xvtsh33#

在这个问题上，我同意“Bill Criswell”的观点。“extend”似乎是你能找到的最接近的一个词--我做了这样的事情：
global.scss

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

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

a {
    @extend .no-deco;
}

_类.scss

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

就像一个符咒...
侧记：尽管我不想这么说，但在我看来，lessidocss在这方面做得更好一点...
global.less

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

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

a {
    .no-deco;
}

_类.减去

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

实际上是一样的，但是你不需要在上面加上'@extend'。

赞(0）回复(0）举报 2023-02-01

我来回答

css Sass：之后是否可以使用Sass向HTML元素添加类？

3条答案

相关问题

热门标签

最新问答