Sass:之后是不是可以使用 Sass 将类添加到 HTML 元素?

Posted

技术标签:

【中文标题】Sass:之后是不是可以使用 Sass 将类添加到 HTML 元素?【英文标题】:Sass: Is it possible to add a class using Sass to an HTML-Element afterwards?Sass:之后是否可以使用 Sass 将类添加到 HTML 元素? 【发布时间】:2014-01-11 05:48:44 【问题描述】:

我希望有人可以帮助我解决我的问题。

假设我有这个:

            <div class="container">
                <div class="row">
                    <article>
                        <p class="story-image">
                            <a href="#">
                                <img src="../media/images/awesomeness.jpg"  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做的原因是我有一堆文章,而且我必须在它们上应用网格系统。但我确信我会在稍后透露实际的宽度和列的数量。

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

【问题讨论】:

【参考方案1】:

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

例如:

%grid-half 
  width: 50%;


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

【讨论】:

带有@extend 指令详细信息的链接对这个答案非常有帮助。 sass-lang.com/guide#topic-7 是网址。使用 Firefox,您可能必须将焦点放在地址栏中并按 Enter。主题 7 是“扩展/继承”【参考方案2】:

不太确定你想做什么,但你可以在 Sass 中进行嵌套,你也可以将自己的类名放入 bootstrap..

那么说

<div class="myClass col-5">

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

.myClass

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

【讨论】:

以上是关于Sass:之后是不是可以使用 Sass 将类添加到 HTML 元素?的主要内容,如果未能解决你的问题,请参考以下文章

关于sass的基础语法介绍

SASS 是不是支持向 mixin 中的所有属性添加 !important?

我们可以嵌套不会通过 Gulp 添加到编译输出的整体大小的媒体查询 (SASS) 吗?

gulp-sass @import CSS 文件

vue中sass的配置安装流程

如何使用 Webpacker 将 `includePaths` 添加到 Sass 加载器