Menu icon Foundation
Component SCSS Variables - Help Please

When you look at any of the components that F5 offers you get a small snippet of information in the documentation telling you that you can customise the look with SCSS variables. This is great but my question is where do you declare the $include-html-xxx-classes: $include-html-classes ? If I enter this into my style sheet I get "unknown variable" thrown back at me.

For example I wanted to customise the top bar component so I entered the $include-html-top-bar-classes: $include-html-classes; at the top of my SCSS file and then added some styles like $topbar-bg: #336699; however when I build it grunt throws back the error "unknown variable". I opened up settings.scss and uncommented the single line $include-html-top-bar-classes: $include-html-classes; but this has made no difference. How exactly do you implement this customisation?

scsscomponentvariableunknowncustomiselookfeel

When you look at any of the components that F5 offers you get a small snippet of information in the documentation telling you that you can customise the look with SCSS variables. This is great but my question is where do you declare the $include-html-xxx-classes: $include-html-classes ? If I enter this into my style sheet I get "unknown variable" thrown back at me.

For example I wanted to customise the top bar component so I entered the $include-html-top-bar-classes: $include-html-classes; at the top of my SCSS file and then added some styles like $topbar-bg: #336699; however when I build it grunt throws back the error "unknown variable". I opened up settings.scss and uncommented the single line $include-html-top-bar-classes: $include-html-classes; but this has made no difference. How exactly do you implement this customisation?

Allan Kendall over 5 years ago

I thought I would bump this, I still need a bit of guidance one how to use these.

Zack Warren over 5 years ago

Here's my Foundation workflow with SCSS/Sass.

From terminal, cd into your project folder and run this:

bower install zurb/bower-foundation

That should create a folder called bower_components

Then, download this:

https://github.com/zurb/foundation-compass-template/archive/master.zip

After you download that, copy the contents of the folder into the same folder as your bower_components.

So, you should now have a project that has 3 folders

your_project/
|---bower_components/
|---js/
|---scss/ <-- Use this folder to modify your Sass
|---index.html

Now, you can use this as a doc template.

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation</title>
    <link rel="stylesheet" href="bower_components/foundation/css/normalize.css" />
    <link rel="stylesheet" href="css/app.css" />
    <script src="bower_components/modernizr/modernizr.js"></script>
  </head>
  <body>

    <!-- content goes here -->

    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/fastclick/lib/fastclick.js"></script>
    <script src="bower_components/foundation/js/foundation.min.js"></script>
    <script src="js/app.js"></script>
  </body>
</html> 

If you need to modify any SCSS, use the SCSS folder in the top level, not the one in the bower_components.