使用SASS定制Foundation 5 [英] Customizing Foundation 5 with SASS

问题描述

我在尝试设置Foundation 5时遇到了困难，因此我可以使用SASS进行自定义。根据Zurb基金会使用SASS是最简单的自定义方式，但由于某种原因没有任何有用的文档。

I have been having no end of difficulties in trying to set up Foundation 5 so that I can customise it using SASS. According to Zurb Foundation using SASS is the easiest way to customise it but for some reason there isn't any useful documentation on this.

我搜索到处，发现位和并终于设法得到一些工作，以便当我修改主SCSS文件时，它创建一个相应的CSS文件。然而，无论我添加到我的SCSS文件尝试和修改颜色等变量，似乎没有效果。我读某处从_settings.scss文件复制要更改的变量，并将它们输入到您自己的scss文件，然后修改值。任何人都可以帮助我这个，它驱动我疯了。
我的文件夹/文件设置为：

I have searched everywhere and found bits and peices of inforamtion and have finally managed to get something working so that when I amend the main SCSS file it creates a corresponding CSS file. However, whatever variables I add to my SCSS file to try and amend the colours etc, it seems to have no effect. I read somewhere to copy the variables you want to change from the _settings.scss file and enter them into your own scss file and then amend the values. Can anyone please help me with this, its driving me insane. My Folder / file set up is:

/MyProject/
 /CSS/
    /foundation/
     - foundation.css
     - normalise.css
     - myfile.css
 /SCSS/
     /foundation/
            /components/ 
                 -- _accordion.scss
                 -- _etc.scss (and the rest ofthe files in components)
            -- _functions.scss
            -- _settings.scss
     - foundation.scss
     - normalise.scss
     - myfile.scss
  - index.html 

$ b b

在myfile.scss中我有：

In myfile.scss I have:

@import 'foundation.scss';
@import 'normalize.scss';


 $body-bg: #ccc;
 $body-font-color: #000;
// $body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
// $body-font-weight: normal;
// $body-font-style: normal;

myfile.css始终保持不变，无论我在上述文件中更改了什么：

myfile.css always remains the same regardless of what I change in the above file:

body {
  background: white;
  color: #222222;
  padding: 0;
  margin: 0;
  font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  position: relative;
  cursor: default; }

我收到的错误信息是：

DEPRECATION WARNING: The return value of index() will change from "false" to
"null" in future versions of Sass. For compatibility, avoid using "== false" on
the return value. For example, instead of "@if index(...) == false", just write
"@if not index(...)".
        on line  of C:\Users\Leanne\Documents\work\freelance\sites\fws_templates\gamer\scss\foundation\_functions.scss, in `exports'
        from line 296 of C:\Users\Leanne\Documents\work\freelance\sites\fws_templates\gamer\scss\foundation\components\_global.scss
        from line 5 of C:\Users\Leanne\Documents\work\freelance\sites\fws_templates\gamer\scss\foundation\components\_accordion.scss
        from line 10 of C:\Users\Leanne\Documents\work\freelance\sites\fws_templates\gamer\scss\foundation.scss
        from line 11 of C:\Users\Leanne\Documents\work\freelance\sites\fws_templates\gamer\scss\store.scss
DEPRECATION WARNING on line 13 of C:\Users\Leanne\Documents\work\freelance\sites\fws_templates\gamer\scss\foundation\_functions.scss:
Assigning to global variable "$modules" by default is deprecated.
In future versions of Sass, this will create a new local variable.
If you want to assign to the global variable, use "$modules: append($modules, $name) !global" instead.
Note that this will be incompatible with Sass 3.2.

DEPRECATION WARNING on line 18 of C:\Users\Leanne\Documents\work\freelance\sites\fws_templates\gamer\scss\foundation\components\_block-grid.scss:
Assigning to global variable "$block-grid-default-spacing" by default is deprecated.
In future versions of Sass, this will create a new local variable.
If you want to assign to the global variable, use "$block-grid-default-spacing: $column-gutter !global" instead.
Note that this will be incompatible with Sass 3.2.

Done.

推荐答案

您的变量需要先设置：

 $body-bg: #ccc;
 $body-font-color: #000;
// $body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
// $body-font-weight: normal;
// $body-font-style: normal;

@import 'foundation.scss';
@import 'normalize.scss';

已弃用的警告无需担心，因为它与您的问题无关由基金会维护者）。

Deprecated warnings are nothing to worry about since it is unrelated to your problem (they are something should be fixed by the Foundation maintainers).

这篇关于使用SASS定制Foundation 5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！