抽象你在SCSS

Question

變量我有一個進口我的其他CSS文件父SCSS文件：

@import 'variables.css'; 
@import 'helpers.css'; 
@import 'layout.css'; 

而且我有三個SCSS文件：variables.css.scss; helper.css.scss &佈局。 css.scss。

在變量中，我定義了要在整個網站中使用的顏色，字體和大小。麻煩的是我假設這些變量將可用於其他文件，只要它是首先導入的，但我得到的錯誤是Undefined Variable。

我想我只是有錯誤的過程。我哪裏錯了？

Answer 1

問題是你如何命名的SCSS文件。要導入的文件的方式使得上海社會科學院認爲你正在使用的@import CSS規則https://developer.mozilla.org/en-US/docs/CSS/@import 重命名這些文件只與SCSS擴展，去掉「的CSS」，並將其導入這樣

@import 'variables.scss'; 
@import 'helpers.scss'; 
@import 'layout.scss'; 

或你甚至可以跳過擴展

@import 'variables'; 
@import 'helpers'; 
@import 'layout'; 

Answer 2

如果你想讓變量在其他文件中可用，你也需要在其中包含該css。所以基本上layout.css.scss和helper.css.scss將需要有@import 'variables.css'

Answer 3

你可以這樣做，如果你確定一個額外的文件作爲中間人。

_master.css.scss：

@import 'variables.css'; 
@import 'helpers.css'; 
@import 'layout.css'; 

site.css.scss：

@import '_master.css';