如何使用sass正確避免在HTML中嵌入twitter引導類名稱

我正在開始一個Rails項目。我們想使用Twitter的引導作爲我們的風格的基礎上，在我們只會在HTML代碼中直接使用引導程序的類名稱開頭，就像所示引導的文檔中，但閱讀下面的帖子後：如何使用sass正確避免在HTML中嵌入twitter引導類名稱

Lessons learned in maintainable css

Please stop embedding Bootstrap classes in your HTML

很清楚爲什麼一些讀數之後不正確的爲什麼要使用引導，所以：

Decouple Your CSS From HTML

smacss

其他中，它似乎是用青菜@extend是爲了避免使用引導程序的類名的正確方法，所以不是這樣：

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

我們這樣做：

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

和我們頂嘴的代碼應該是這樣的：

.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中，如果是的話，我應該如何處理這個問題（它經常發生Y）？如果不是，那麼使用自定義類名稱的更好方法是什麼，但仍然會從引導中獲取樣式。

我真的很感激你對此的看法。請記住，我只是學習整體網頁設計（CSS，sass，less，html，js等）。

來源

2013-04-17 Jose

其他，我不知道，有一個解決方案。在你的按鈕示例中，不應該引用類名（另外，我認爲按鈕元素上的「按鈕」類是多餘的）。你的第二個例子不起作用，因爲它是一個複合選擇器，'@ extend'只能用於簡單的選擇器。 – cimmanon

Bootstrap是個人化的軟件。它使用很多很多的類。如果不想使用很多很多的類，我同意@cimmanon「不使用Bootstrap」是一個很好的解決方案。 – bookcasey

Bootstrap最初是用LESS編寫的，但是SASS有幾個端口： - https://github.com/thomas-mcdonald/bootstrap-sass - https://github.com/jlong/sass-twitter- bootstrap嘗試一下，至少其中一個應該有你需要的類。 –

當您將.btn重命名爲.button時，您還應該將.form-search重命名爲.form-searchnew等。在上面的例子中這種情況下，你的青菜代碼應該是這樣的：

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

哪些意義（我不知道青菜），並導致CSS，你的期望。

我認爲bootstrap不只是關於CSS。引導是關於CSS，HTML（結構）和JavaScript。即使你將html與CSS分開，我也不會輕易遷移到其他框架。除了CSS，你將不得不改變html結構和JavaScript調用。

示例從Twitter的引導程序2遷移到3（請參閱：Updating Bootstrap to version 3 - what do I have to do?）。我也想知道是否可以通過將舊類擴展到新的CSS來遷移（請參閱：http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/）。看完migration guide後，我認爲你不能。

其他解決方案。 Angular JS將javascript的Twitter Bootstrap分離出來。另外在這種情況下，遷移看起來並不痛苦，請參閱：Angular Dialog directives with Bootstrap 3

也許您也可以閱讀本文：http://www.jasonwong.org/post/45849350459/migrating-from-zurb-foundation-twitter-bootstrap-to。它指的是Bourdon和Neat。從他們的網站

例子：

<!-- 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」，這似乎你正在尋找的方式。

來源

2013-08-15 13:29:39

使用@extend，但不要引用選擇：

.button { @extend .btn; }

然後你會看到薩斯延伸相關的選擇也一樣，像你想（.form-search .input-append .btn等）。

...除了一堆每次將增加額外的選擇，我們擴展引導類只使用一個不同的名稱...

@extend作品通過複製選擇。如果你不想這樣做，你可以在HTML中「擴展」 - 也就是添加Bootstrap的類名。 :)

來源

2013-10-10 03:28:50 sam

我建議你看看sass佔位符類http://sass-lang.com/documentation/file.SASS_REFERENCE.html#placeholders爲了不暴露你的CSS。很可能你不會使用引導程序中包含的每個元素，只有在代碼中實際擴展佔位符時，它們纔會寫入樣式表。

此外，我認爲人們往往會對CSS框架如何工作以及CSS和html的解耦合如何工作感到困惑。對於非常大的網站（或者你期望最終增長得非常大的網站），性能和css文件的大小是至關重要的，某種OOCSS方法是最好的選擇。這意味着你不得不直接在HTML中格式化代碼。

如果您可以讓自己效率稍低一點，並希望您的HTML清理乾淨，請確保使用語義類（按鈕示例：號召性用語，號召性用語，提交，btn-小學，btn企業顏色等...）

還記得從CSS解耦您的JS！使用特殊的類來附加行爲（例如js-submit，js-call-to-action等......）

最後但並非最不重要：不要計劃更新您的css框架。這些框架旨在爲您提供一個開頭，而不是您的整體設計解決方案。擴展它們，調整它們，使它們成爲你自己的，投資於設計並創建你自己的外觀，以使你的應用獨一無二。如果您認爲更新是一個擔心跟上標準更改的問題，那麼最好使用compass mixins。

來源

2013-11-24 11:53:08 emik

我想+10，但我只能+1！我正在嘗試重寫boostrapp的sass並將所有內容都轉換爲佔位符，但它很乏味。您是否知道某人是否已經完成此任務並共享了它？ – redben

對於大多數人來說這是新的，你走在正確的軌道上;你一直在閱讀的資源非常好。但是，我認爲你所擔心的可能是沒有道理的：

...該按鈕不會得到正確的樣式，因爲sass不會將相同的規則應用於我們的自定義類名稱...

其實我認爲你一定是錯了。根據Sass文檔：

@extend通過在擴展選擇器（.e.g .error）出現的樣式表任何位置插入擴展選擇器（例如.seriousError）來工作。

有關完整的代碼示例，請參見http://sass-lang.com/documentation/file.SASS_REFERENCE.html#how_it_works。

您原來的解決方案其實是正確的。使用延伸，但沒有引號：

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

我測試了這個使用你的例子，它工作正常。 Sass使用「.btn」和所有新創建的選擇器複製所有選擇器，它用「.button」替換「.btn」。此外，如果Sass爲您的喜好產生過多重複，請不要擔心（只要您遵循您發佈的鏈接指出的最佳做法）。如果服務器使用gzip或等效代碼，則重複代碼很容易被壓縮;客戶端不應該注意到任何較慢的加載時間，儘管「解壓縮」CSS可能需要稍長的時間。至於CSS選擇器速度，不要擔心，速度對於選擇器來說唯一的情況就是在JavaScript方面，特別是在jQuery方面。對於您的Sass代碼，只需遵循可維護性的最佳實踐（特別是，您正在嘗試執行的模塊化，即SMACSS），那麼您將很好。

來源

2013-11-26 00:34:13 tjklemz

sam和tjklemz給出的答案將幫助您解決您的直接技術難題，但可以更多地解耦您的CSS和HTML。我將在下面舉一個例子，但請記住，這只是一個演示mixins /擴展CSS類的強大功能的簡單示例。

我也強烈建議檢查一下ZURB Foundation framework，因爲它本身就是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; 
}

來源

2013-12-10 23:13:01 qccreative

如何使用sass正確避免在HTML中嵌入twitter引導類名稱

回答

相關問題