如何在.scss文件中包含外部CSS文件作爲規則？

我想用bootstrap-3.3.7.min.css規則只是我的網頁的特定部分。所以，我下載了它，創建了一個名爲bootstrap.scss的新文件，並試圖將此規則添加到它。我在我的網站上使用django，所以我安裝了sass並將預編譯器規則添加到了我的設置中。如何在.scss文件中包含外部CSS文件作爲規則？

在我bootstrap.scss文件，我添加了這個規則影響所有bs3類：

.bs3 { 
    @include bootstrap-3.3.7.min.css; 
}

bootstrap-3.3.7.min.css是在同一個目錄中bootstrap.scss，所以我不知道我是否還需要指定完整路徑。

在我的模板：

<link href="{% static "css/bootstrap.scss" %}" rel="stylesheet" type="text/css" /> 

<input id="example" type="submit" class="bs3 delBtn" value=" " rel='popover' data-placement='right' data-content='Some message'/>

的想法是隻得到了一類BS3的因素是工作文件.scss規則。正如你所猜測的，這是行不通的。我看不出這個班級有什麼變化。但是，如果我添加body{background-color: red;}到bootstrap.scss，我可以看到的變化，所以我知道SCSS文件被加載。

我試圖從其他計算器問題，比如一對夫婦修復：

使用import代替include - 在文件的結尾@import "full/path/to/file.css"
使用import沒有.css

這兩件事都沒有奏效。我是SASS世界的嶄新人物，我可能在這裏犯了一些愚蠢的錯誤。如果你能指出，那會非常有幫助。謝謝！

來源

2017-06-30 DeA

如果導入所有的青菜泛音和某種類型的命名空間類的包裝他們應該工作：

.b3 { 
    @import "/bootstrap-3.3.7-folder/_buttons.scss"; 
    @import "/bootstrap-3.3.7-folder/_grid.scss"; 
    @import "/bootstrap-3.3.7-folder/_somefile.scss"; 
    @import "/bootstrap-3.3.7-folder/_somefile.scss"; 
    @import "/bootstrap-3.3.7-folder/_etc.scss"; 
}

這將輸出所有的BS-3.3.7風格裹在.bs3 {}

.bs3 .btn {} 
.bs3 .row {} 
/* etc */

然後只是包裝這些元素

<div class="b3"> 
    <!-- all your 3.3.7 specific styles here --> 
    <button class="btn">Click Me</button> 
</div>

來源

2017-06-30 15:41:15 Barryman9000

但我不知道所有這些文件。我只有一個'bootstrap-3.3.7.min.css'文件。我在哪裏以及如何獲得這些？ – DeA

Github！我認爲他們都在這裏。不管怎麼說，爲所有這些部分構建一個好主意：https://github.com/twbs/bootstrap-sass/tree/master/assets/stylesheets/bootstrap – Barryman9000

這裏是bs 3.3.7的父文件。基本上所有這些導入都用'.bs3 {}'包裝，就像我上面的例子一樣https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/_bootstrap.scss – Barryman9000

呦你無法包括css文件中scss文件。

有一個叫scsspartials概念。這是一個偉大的方式來模塊化你的CSS和幫助使事情變得更容易維護。

的部分是簡單地用一個前導下劃線名爲SCSS文件。你可能會把它命名爲_partial.scss。

下劃線讓Sass知道該文件只是一個部分文件，並且它不應該生成到CSS文件中。

SCSS的諧音與@import指令，並沒有必要使用，而導入到指定文件擴展名。

要在另一個scss文件中包含scss文件，請嘗試下面的代碼並在代碼中看到註釋。

例，

/*`_variable.scss` partial file*/ 

$greencolor: green; 
$orangecolor: orange; 


/*`_style.sass` partial file*/ 

@import 'variable'; /*here `variable` is the file name, if it is inside a folder named `variable`, then it should be `@import 'variable/variable'`*/ 

body{ 
    background-color:$orangecolor; 
}

來源

2017-06-30 15:48:40

如何在.scss文件中包含外部CSS文件作爲規則？

回答

相關問題