如何使用SASS适当地避免在HTML中嵌入Twitter的引导类名(How to use sass

2019-08-31 09:16发布

站内文章 / 前沿技术

23 0

我欲成王，谁敢阻挡

女 | 书童

私信

我工作的一个Rails项目才刚刚开始。我们想使用Twitter的引导作为我们的风格的基础上，在我们只会在HTML代码中直接使用引导程序的类名称开头，就像所示引导的文档中，但阅读下面的帖子后：

教训维护了解到的CSS

请不要在你的HTML中嵌入自举类

很明显，为什么这不是正确的为什么要使用引导，让更多的读数后：

解耦CSS从HTML

smacss

其他中，它似乎是用青菜@extend是为了避免使用引导程序的类名的正确方法，所以不是这样做：

<button type="submit" class="btn">Search</button>

我们这样做：

<button type="submit" class="button">Search</button>

而我们的SASS的代码是这样的：

.button {
   @extend ".btn";
}

用这种方法的问题，除了一堆将在每次我们扩展引导类只是使用不同的名称时添加额外选择的是，在情况下，引导使用选择是这样的：

.form-search .input-append .btn, .form-search .form-input-append .btn {
  border-radius: 0 14px 14px 0;
}

因为上海社会科学院不会是同样的规则适用于我们的自定义类的名字，我的意思是，青菜是不是做这个按钮将不会得到正确的风格：

.form-search .input-append .btn, .form-search .input-append .button, 
.form-search .form-input-append .btn, .form-search .form-input-append .button {
  border-radius: 0 14px 14px 0;
}

所以我想，这是为了避免嵌入引导的类名到HTML的正确的方式，如果是的话，我应该如何处理这个问题（这经常发生）？如果没有，什么是使用自定义的类名，但仍从引导得到的样式的更好的方法。

我真的很感谢你对这个想法。请记住，我只是学习的整体网页设计（CSS，上海社会科学院，少，HTML，JS等）。

Answer 1:

当您重命名.btn到.button，你也应该重新命名.FORM搜索到.FORM-searchnew等？在这种情况下，在上面的例子中你的SASS的代码应该是这样的：

.form-searchnew .input-appendnew .button {
  extend(.form-search .input-append .btn);
}

其意义（我不知道青菜），并导致CSS，你的期望。

我认为，引导是不是唯一的CSS。自举为约CSS，HTML（结构）和JavaScript。即使你从HTML单独的CSS我会不容易迁移到其他的框架。旁边的CSS，你将不得不更改HTML结构和JavaScript调用了。

例如，从Twitter的引导2迁移到3（参见：？更新引导到第3版-我有什么做的）。我也想知道，如果你能在老班延伸到新的CSS迁移（参见： http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap -3 / ）。看完后迁移指南，我想你不能。

其他解决方案。角JS解耦从JavaScript Twitter的引导。在这种情况下迁移似乎并不无痛看到：角对话框的指令与引导3

也许也看到这篇文章： http://www.jasonwong.org/post/45849350459/migrating-from-zurb-foundation-twitter-bootstrap-to 。它指的是波登和整洁。

从他们的网站例如：

<!-- HTML markup for the section right below this code block -->
<section>
  <aside>What is it about?</aside>
  <article>Neat is an open source semantic grid framework built on top of Sass and Bourbon…</article>
</section>

// Enter Neat
section {
  @include outer-container;
  aside { @include span-columns(3); }
  article { @include span-columns(9); }
}
// And the result is...

正如他们所说：“它完全依靠萨斯混入，不污染您的HTML”，这似乎你正在寻找的方式。

Answer 2:

我建议你看看青菜占位符类http://sass-lang.com/documentation/file.SASS_REFERENCE.html#placeholders为了不bloath你的CSS。最有可能你不会使用包含在引导每一个元素和占位符只被写入到您的样式表，如果他们在你的代码实际上延长。

另外，我认为，人们往往会感到困惑，如何CSS框架工作，以及如何去耦CSS和HTML实际工作。对于非常大的网站（或您希望最终变得非常大的），在性能和CSS文件的大小是至关重要的，某种OOCSS方法是你最好的选择。而这必然意味着你已经在你的HTML格式直接代码。

如果你可以让自己少一点效率，并希望你的HTML清洁，确保使用语义类（例子为按钮：号召行动，号召性动作辅助，提交，BTN-小学，btn-企业色，等...）

还记得从CSS解耦JS！使用特殊类附加的行为（例如JS-提交，JS-号召行动，等...）

最后但并非最不重要的：不更新你的CSS框架计划。这些框架是为了给你一个领先地位，不要被你的整体设计方案。扩展它们，适应他们，让他们自己，投资于设计和创建你自己的外观，以使您的应用程序的唯一。如果你有什么想更新的是标准的变化，更好地利用指南针混入跟上了愁。

Answer 3:

使用@extend ，但不要引用选择：

.button { @extend .btn; }

然后你会看到萨斯延伸相关的选择也一样，像你想（ .form-search .input-append .btn等）。

......除了一堆将在每次我们扩展引导类只是使用不同的名称时添加额外的选择器...

@extend通过复制选择的作品。如果你不希望出现这种情况，你可以在HTML“延长”，而不是 - 即加引导的类名。 :)

Answer 4:

对于被新来这个最，你在正确的轨道上; 你一直在阅读的资源都非常优秀。但是，我想你可能是没有道理的关注：

...按钮将无法得到正确的风格，因为上海社会科学院不会是同样的规则适用于我们自定义的类名...

其实，我想你一定是搞错了。按照萨斯文档：

@extend作品通过将延伸选择器（例如.seriousError）在显示的扩展的选择器（.eg .error）样式表的任何地方。

见http://sass-lang.com/documentation/file.SASS_REFERENCE.html#how_it_works为完整的代码示例。

你原来的解决方案实际上是正确的。使用扩展，但不包括引号：

.button {
  @extend .btn; //no quotes
}

我测试了使用您的例子，它工作正常。萨斯复制所有以“.btn”，并在这些新创建的选择的选择，它取代“.btn”与“.button”。

此外，如果萨斯产生过多的重复自己的喜好，不要（因为你是通过你发布的链接指出了以下最佳实践那么久）担心。如果服务器使用gzip的或等效的重复码容易地被压缩; 客户应该不会注意到任何较慢的加载时间，尽管它可能需要稍长的时间来“解压”的CSS。至于CSS选择器的速度，不用担心，要么; 其中速度选择唯一重要的情况下是在JavaScript端，特别是用jQuery。为了您的Sass代码，只需按照维护的最佳实践（值得注意的是，模块化，你正在尝试做的，即SMACSS），你会好到哪里去。

Answer 5:

由萨姆和tjklemz给出的答案将帮助您解决即时的技术挑战，但它可能解耦CSS和HTML甚至更多。下面我将举一个例子，但请记住，这仅仅是一个简单的例子来证明混入/ CSS扩展阶级的权力。

我还强烈建议检查出ZURB Foundation框架，因为它是天然SASS，并设计时考虑到这种风格的发展。

例如：

<body>
    <div id="my-header">
        <h1><a href="#">My Company</a></h1>
        <h2>My Tagline</h2>
    </div>
    <div id="my-main">
        <div class="my-widget">
            <h1>Widget Title</h1>
            <a>Widget Option 1</a>
            <a>Widget Option 2</a> 
        </div>    
    </div>
</body>

并结合SCSS：

//these examples wouldn't really work
//because bootstrap needs more markup
#my-header {
    @extend .navbar;
}
#my-header h1 {
    @extend .branding;
}
#my-main {
    @extend .container;
}

//good example
.my-widget {
    @extend .well;
    @extend .hero-unit;
}
.my-widget a {
    @extend .btn;
}

文章来源: How to use sass to properly avoid embedding twitter bootstrap class names on HTML