Menu icon Foundation

Designer

My Posts

No Content

My Comments

Samuel Rodda commented on Rickmint's post almost 5 years

Thanks a heaps Andrew and Roberto! totally awesome... great fixes!

Though i'd mention that you'll need to watch these changes should you update foundations in the future. Will override them as they in a core foundation file...especially for those using compliers like codekit or compass.

Samuel Rodda commented on noah's post about 5 years

At last! Found a temporary solution that works... It requires some small amount of hunting but if you use the command + f search function in your code editor, you can fix it quickly enough.

Basically I located the errors in foundation 5 sass files and corrected them with the changes suggested by codekit 2. While these changes will be overridden when i start a new project, or foundation 5 updates, assuming the errors come back, you can fix them again quickly enough.

@Noah- in your example, there are 2 TYPES of changes.

1) Replacing "!default;" with "!global;" in _global.sccs (2 errors around lines 225 and 226), _functions.scss (1 error around line 13) and _block-grid.scss (1 error around line 18).

Suggested command + f search, "$variables-name".

2) Delete "== false" and then add the word "not" just after the "@else if" or "@if" statement. (2 errors located in _functions.scss and _accordion.scss. The other warnings are most likely just these 2 carried through @imports or @exports but if fixing just these to doesn't work, chase down the other errors via the paths codekit gave you.)

Example of Change:
```SASS
//Before
@else if $collapse == false {
padding-left: $column-gutter / 2;
padding-right: $column-gutter / 2;
}

//After
@else if not $collapse {
padding-left: $column-gutter / 2;
padding-right: $column-gutter / 2;
}
```
Suggested command + f search, "== false".

Note: Used the command + f search feature to locate the errors (particularly for type 2) as the line that codekit suggests it is on wasn't always accurate. Just use it as a guide to see if you're in the right area.

Samuel Rodda commented on Miguel Rivero's post about 5 years

Okay... I think i got it working for me now. I had been defining new variables inside my custom @imports (aka. partial sass files). I moved them all inside my app.scss file AFTER the settings and foundations imports but before my new @import sass files. This seems to work great and has a reasonable workflow.

@import "settings";
@import "foundation";

//=New Settings=

//CUSTOM GLOBAL
// We use these to define default font weights
$font-weight-normal: 300;
// We use these to make sure border radius matches unless we want it different.
$global-radius: 1px;
// We use these to control various global styles
$body-bg: #f2f2f2;
$body-font-color: #333;
$body-font-family: "Lato", sans-serif;

// TOPBAR
// Background color for the main topbar.
$topbar-bg-color: #FFA23C;
// Height and margin of topbar
$topbar-height: 45px;
// Controlling the styles for the title in the top bar
$topbar-title-font-size: rem-calc(17);

//=New Imports=
@import "custom-global";
@import "topbar";
@import "wraps";

Hope this helps someone else having the same issue as I did.

Samuel Rodda commented on noah's post about 5 years

@Giuseppe Rodriguez- correct me if i'm wrong, but isn't a config.rb file only present if you are using compass in codekit2? As codekit's autoprefixer doesn't have support for compass, adding compass to create the file isn't going to work for at the moment...

@noah- had the same issue as roxanne in that i'm using codekit2. still, i ran through the process twice and had no success. not sure why honestly as it seemed like a straight forward enough process.

@roxanne- i tried that too and had no luck. I suspect this is only to stop the codekit warning from being brought to the front of the screen, rather then ignoring it completely. I suppose that may be the only thing to do until foundations updates to sass 3.3

Samuel Rodda commented on Miguel Rivero's post about 5 years

Did you ever get this sorted out Miguel? I'm using codekit 2 and having very similar problem with my app.scss @imports. I can make changes my topbar bg color, font size etc. when i move my foundation.scss file after my partial sass imports but nothing happens otherwise.

Posts Followed




  • 13
    Replies
  • Full Screen Image

    By Marc McGee

    F5Full Screen Image

    I'd like to develop a home page where there is a full screen image and maybe even a slider located below the masthead. I've use jquery backstretch — great for full screen and scales rather than distorts the shape—but is essentially a background image o... (continued)

    Last Reply by Marc McGee about 5 years ago



Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Rickmint's post almost 5 years

Thanks a heaps Andrew and Roberto! totally awesome... great fixes!

Though i'd mention that you'll need to watch these changes should you update foundations in the future. Will override them as they in a core foundation file...especially for those using compliers like codekit or compass.

You commented on noah's post about 5 years

At last! Found a temporary solution that works... It requires some small amount of hunting but if you use the command + f search function in your code editor, you can fix it quickly enough.

Basically I located the errors in foundation 5 sass files and corrected them with the changes suggested by codekit 2. While these changes will be overridden when i start a new project, or foundation 5 updates, assuming the errors come back, you can fix them again quickly enough.

@Noah- in your example, there are 2 TYPES of changes.

1) Replacing "!default;" with "!global;" in _global.sccs (2 errors around lines 225 and 226), _functions.scss (1 error around line 13) and _block-grid.scss (1 error around line 18).

Suggested command + f search, "$variables-name".

2) Delete "== false" and then add the word "not" just after the "@else if" or "@if" statement. (2 errors located in _functions.scss and _accordion.scss. The other warnings are most likely just these 2 carried through @imports or @exports but if fixing just these to doesn't work, chase down the other errors via the paths codekit gave you.)

Example of Change:
```SASS
//Before
@else if $collapse == false {
padding-left: $column-gutter / 2;
padding-right: $column-gutter / 2;
}

//After
@else if not $collapse {
padding-left: $column-gutter / 2;
padding-right: $column-gutter / 2;
}
```
Suggested command + f search, "== false".

Note: Used the command + f search feature to locate the errors (particularly for type 2) as the line that codekit suggests it is on wasn't always accurate. Just use it as a guide to see if you're in the right area.

You commented on Miguel Rivero's post about 5 years

Okay... I think i got it working for me now. I had been defining new variables inside my custom @imports (aka. partial sass files). I moved them all inside my app.scss file AFTER the settings and foundations imports but before my new @import sass files. This seems to work great and has a reasonable workflow.

@import "settings";
@import "foundation";

//=New Settings=

//CUSTOM GLOBAL
// We use these to define default font weights
$font-weight-normal: 300;
// We use these to make sure border radius matches unless we want it different.
$global-radius: 1px;
// We use these to control various global styles
$body-bg: #f2f2f2;
$body-font-color: #333;
$body-font-family: "Lato", sans-serif;

// TOPBAR
// Background color for the main topbar.
$topbar-bg-color: #FFA23C;
// Height and margin of topbar
$topbar-height: 45px;
// Controlling the styles for the title in the top bar
$topbar-title-font-size: rem-calc(17);

//=New Imports=
@import "custom-global";
@import "topbar";
@import "wraps";

Hope this helps someone else having the same issue as I did.

You commented on noah's post about 5 years

@Giuseppe Rodriguez- correct me if i'm wrong, but isn't a config.rb file only present if you are using compass in codekit2? As codekit's autoprefixer doesn't have support for compass, adding compass to create the file isn't going to work for at the moment...

@noah- had the same issue as roxanne in that i'm using codekit2. still, i ran through the process twice and had no success. not sure why honestly as it seemed like a straight forward enough process.

@roxanne- i tried that too and had no luck. I suspect this is only to stop the codekit warning from being brought to the front of the screen, rather then ignoring it completely. I suppose that may be the only thing to do until foundations updates to sass 3.3

You commented on Miguel Rivero's post about 5 years

Did you ever get this sorted out Miguel? I'm using codekit 2 and having very similar problem with my app.scss @imports. I can make changes my topbar bg color, font size etc. when i move my foundation.scss file after my partial sass imports but nothing happens otherwise.

Posts Followed

Following

  • No Content

Followers

  • No Content