How Do the SASS Variables Get Assigned to CSS Selectors with Foundation 4

How do the Sass variables get assigned to CSS selectors with Foundation 4?

Foundation when used with Compass is what's called a Compass Extension (learn more about Extensions). It's basically a collection of Sass and Ruby files bundled in a way that makes them that makes them available to your project without having to copy the files.

In your config.rb, you might have something like this:

require 'foundation'

That's making the extension available to your project. At this point, all you have available to you are the Sass functions that are written in Ruby. To bring in the Sass files (mixins, themes, etc.), you need to import them like this:

@import 'foundation';

Assuming the extension uses the recommended naming conventions and directory structure, it will include a file named _foundation.scss from the extension, which typically imports a bunch of other files that are within the extension. This is what Foundation's master import file looks like: https://github.com/zurb/foundation/blob/master/scss/foundation.scss

The specifics of which variable is used how can be discovered by looking at the source: https://github.com/zurb/foundation

Variables in extensions typically have a default value set. Your settings file is giving you the option of overriding these values and is written in the typical of configuration file style (ie. default values are listed but commented out).

Dynamically set Sass variables in Foundation

Foundation does not offer any special constructs for tables that come in multiple colors. If you want to have 2 different styles for tables, you do it the same way you would with vanilla CSS.

table.with-alternate-colors {
    th {
        background: blue
    }

    // etc.
}

If you want to see all of the styles that Foundation applies to tables so that you know what you need to override, you can find that information by browsing their repo

Note: While you could use that table mixin, I don't recommend unless you were changing everything about the way the table is styled.

On Foundation 5, what CSS is generated by setting $include-html-classes to false?

This looks like it is a bug where new presentational classes have been added above the conditionals. Since you question is how to fix it, here is the process if you don't want to wait until it is fixed officially.

Move your Scss into a different directory or fork the foundation bower repo.

Update your config.rb (line 2) to point to the new files, this is relative to your project directory

# Require any additional compass plugins here.
add_import_path "some_other_directory/foundation/scss"

Then you will need to modify each file that generates presentational classes. Luckily Compass/Sass gives us the exact place to look.

/* line 259, ../bower_components/foundation/scss/foundation/components/_global.scss */
meta.foundation-version {
  font-family: "/5.1.0/";
}

On line 296 you will see the conditional line:

@if $include-html-global-classes {

and all of the classes that have been added above it.

You will need to move this line to 260 and it should look like the following.

@include exports("global") {

  @if $include-html-global-classes {

    meta.foundation-version {
      font-family: "/5.1.0/";
    }

Since this is Scss you could either leave or correct the indentation to match.

You would need to repeat this for each file that generates CSS with Compass. If you are running compass watch, you can just check or reload your stylesheets/app.css after each correction.

RuntimeError when building CSS from SCSS files of Foundation-sites with Django-pipeline

I managed to solve the problem above which was caused by me forgetting to consider the hierarchy of folders in app.scss (when importing foundation). By putting this file in /static with the downloaded foundation-sites and setting its content like below, I managed to make it work:

@import 'foundation-sites/scss/settings/_settings.scss';
@import 'foundation-sites/scss/foundation.scss';

@include foundation-everything;

How to design a Sass animation library that allows users to modify variables?

You should try to understand how style frameworks like bootstrap or Foundation work.

Example can be found at plunker.

Here is the basic structure of your project.

animation.scss // Your library
variables.scss // User custom variables
main.scss // User main scss file

Let's take a look at these files.

Animation.scss has all your default variables and all classes you need. Note, that classes are wrapped by mixins to allow a user to import them separately. All variable in this file has a flag !default to allow a user to override them. There is a simple class animation that adds a color property to the element.

$color: green !default;

@mixin animation() {
  .animation {
    color: $color;
  }
}

Variables.scss contains user custom variables. They don't have any flags.

$color: red; // Note, there is no !default flag

Main.scss imports all files and include some of library components. For example, it imports component called animation.

// Import library
@import 'animation.scss';

// Override library variables
@import 'variables.scss';

// Import components
@include animation();

Summary

By default, your library has variable $color with a value of green. User overrides it to red and includes component animation. So any element with class animation should have a red color.

Imported Foundation 5 components doesn't output as CSS

I think it works now, I found a solution here: http://foundation.zurb.com/forum/posts/19040-no-foundation-styling-imported-to-appcss-sass-f5

It was a bug on line 12 in _functions.scss - I guess my version of Foundation is from before they fixed that. I replaced:

@if (index($modules, $name) == false) {

with

@if(not index($modules, $name)) {

---

Related Topics