1

I've installed Zurb Foundation into my Yeoman project using yeoman install foundation then included it in my project by updating my Gruntfile.js using require: 'zurb-foundation'

The problem now arises when I try to edit my app/styles/main.scss file. I am unable to override the default Zurb foundation SASS variables.

I've tried to edit the _settings.scss file within app/components and also under components in the main directory - but to no avail.

Has anyone had any luck or have a solution to this dilemma?

0xDonut
  • 595
  • 5
  • 24

2 Answers2

1

I found the answer myself.

The key is to put an !important declaration after your override (basic CSS doh!), and place this override in your own main.scss or equivalent file: 

$mainColour: red!important

and don't forget to add the require statement in your Gruntfile.js:

compass: {
  dist: {
    options: {
      require: 'zurb-foundation',// ADD THIS LINE
      css_dir: 'temp/styles',
      sass_dir: 'app/styles',
      images_dir: 'app/images',
      javascripts_dir: 'temp/scripts',
      force: true
    }
  }
},
0xDonut
  • 595
  • 5
  • 24
0

Have you tried using yeoman-foundation-generator from github? https://github.com/pchen/yeoman-foundation-generator

It is like using standalone SASS and Foundation. You have to put the folder from the git repo inside your NPM installation.

Zaigham R.
  • 612
  • 1
  • 6
  • 12
  • Yes I looked at that, but I don't really want to edit anything via github just yet. I'd prefer to find a solution to the current method. – 0xDonut Jan 26 '13 at 20:07