Problem

When using a subtheme based on the STARTER files with the zurb_foundation theme, the _settings.scss file is there to customize the variables for foundation.  The comment in the STARTER.scss file says "This is your _settings.scss file where you can override foundation variables."   However, after modifying the variables, they are overriden by the foundation globals set in the bower components _global.scss file.   

The settings file isn't helpful if the variables are overriden.  I have not found a good work-around other than editing the _global.scss file.

CommentFileSizeAuthor
#14 zurb-foundation-settings-update-2.patch14.96 KBsamuel.mortenson
#13 zurb-foundation-settings-update.patch7.96 KBsamuel.mortenson
#5 f6CssOutput.JPG34 KBcertifiedGeek
#5 f6scss.JPG43.03 KBcertifiedGeek
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

certifiedGeek created an issue. See original summary.

ishtarex’s picture

ishtarex CreditAttribution: ishtarex commented

Are you using gulp or compass watch to generate fresh css in css subfolder of your subtheme?

certifiedGeek’s picture

certifiedGeek CreditAttribution: certifiedGeek as a volunteer commented

Gulp

ishtarex’s picture

ishtarex CreditAttribution: ishtarex as a volunteer commented

Are you sure that you set your subtheme theme as default?
I added var Promise = require('es6-promise').Promise; to my gulpfile.js and it is working.

var gulp = require('gulp');
var Promise = require('es6-promise').Promise;
var $    = require('gulp-load-plugins')();

var sassPaths = [
  'bower_components/foundation-sites/scss',
  'bower_components/motion-ui/src'
];

gulp.task('sass', function() {
  return gulp.src('scss/foundation_subtheme.scss')
    .pipe($.sass({
      includePaths: sassPaths
    })
      .on('error', $.sass.logError))
    .pipe($.autoprefixer({
      browsers: ['last 2 versions', 'ie >= 9']
    }))
    .pipe(gulp.dest('css'));
});

gulp.task('default', ['sass'], function() {
  gulp.watch(['scss/**/*.scss'], ['sass']);
});
certifiedGeek’s picture

certifiedGeek CreditAttribution: certifiedGeek as a volunteer commented
FileSize
f6scss.JPG43.03 KB
f6CssOutput.JPG34 KB

Yes, I am sure. All my custom scss works fine, but my settings variables get overridden by foundation defaults.

here is my gulpfile.js:

var gulp = require('gulp');
var $    = require('gulp-load-plugins')();

var sassPaths = [
  'bower_components/foundation-sites/scss',
  'bower_components/motion-ui/src'
];

gulp.task('sass', function() {
  return gulp.src('scss/f6.scss')
    .pipe($.sass({
      includePaths: sassPaths,
	  // following three options output comments, remove for production (including ending comma above)
	  sourceComments: 'map',
	  sourceMap: 'sass',
	  outputStyle: 'nested'
    })
      .on('error', $.sass.logError))
    .pipe($.autoprefixer({
      browsers: ['last 2 versions', 'ie >= 9']
    }))
    .pipe(gulp.dest('css'));
});

gulp.task('default', ['sass'], function() {
  gulp.watch(['scss/**/*.scss'], ['sass']);
});

in _settings.scss I set $success-color to red. in bower_components/foundation-sites/_global.scss I set it to green.
In f6.scss I output the variable $success-color in the comments to see where it is being overridden:

output success color variable

Then, after looking at the compiled CSS, you can see in the comments that it is red, then changes to green right after it includes foundation:

css output

quocnht’s picture

quocnht CreditAttribution: quocnht commented

What foundation sites version you are using? From 6.2 the colors settings move into the palette.

$foundation-palette: (
  primary: #2199e8,
  secondary: #777,
  success: #3adb76,
  warning: #ffae00,
  alert: #ec5840,
);

Put this in the STARTER\scss\_settings.scss and override.

certifiedGeek’s picture

certifiedGeek CreditAttribution: certifiedGeek as a volunteer commented

That doesn't make a difference. Even with this change, the palette settings still map to the individual color variables later on in the foundation global settings: 

// Internal variables used for colors
$primary-color: map-get($foundation-palette, primary);
$secondary-color: map-get($foundation-palette, secondary);
$success-color: map-get($foundation-palette, success);
$warning-color: map-get($foundation-palette, warning);
$alert-color: map-get($foundation-palette, alert);

I did try it though, without any luck.

quocnht’s picture

quocnht CreditAttribution: quocnht commented

For your example, I try this in STARTER\scss\_settings.scss

$global-lineheight: 1.5;
$foundation-palette: (
  primary: #2199e8,
  secondary: #777,
  success: red,
  warning: #ffeeff,
  alert: #ec5840,
);
$primary-color: #2199e8;
$secondary-color: #777;
$success-color: red;
$warning-color: #ffae00;

After @import 'settings'; it load $success-color: red; in the STARTER\scss\_settings.scss and result .success-color = red

After @import 'foundation';, it load the palette and result also .success-color = red

certifiedGeek’s picture

certifiedGeek CreditAttribution: certifiedGeek as a volunteer commented

Thanks quocht, putting both the pallete array AND the color variables did override them correctly.

This makes me wonder how many other things have changed that need added or updated in the theme or sub-theme.

ChrisSnyder’s picture

ChrisSnyder
he/him
CreditAttribution: ChrisSnyder as a volunteer commented

Is this no longer a Drupal theme related issue and only an issue with Foundation 6 changes?

ChrisSnyder’s picture

ChrisSnyder
he/him
CreditAttribution: ChrisSnyder as a volunteer commented

After further investigation, I found that in my case the "Disable Base Theme CSS" setting was not set in the theme settings.

jimafisk’s picture

jimafisk CreditAttribution: jimafisk commented

#8 worked for me, thanks quocnht!

samuel.mortenson’s picture

samuel.mortenson
he/him
Primary language English
CreditAttribution: samuel.mortenson at Acquia commented
Status: Active » Needs review
FileSize
zurb-foundation-settings-update.patch7.96 KB

I copy+pasted the _settings.scss file from Foundation to the STARTER theme. Anyone want to review and see if it addresses the problems reported here?

samuel.mortenson’s picture

samuel.mortenson
he/him
Primary language English
CreditAttribution: samuel.mortenson at Acquia commented
FileSize
zurb-foundation-settings-update-2.patch14.96 KB

I updated Foundation to 6.3.0, lots of settings changes.

mariagwyn’s picture

mariagwyn CreditAttribution: mariagwyn as a volunteer commented

I tested the patch against today's dev release. It correctly overrode the _settings.scss file with the new foundation variables. While this might be overkill since ideally, one just overrides the settings that should be different than default, it works as expected.

  • samuel.mortenson committed a07fa76 on 8.x-6.x 
    Issue #2766471 by samuel.mortenson, certifiedGeek, quocnht, ishtarex,...
samuel.mortenson’s picture

samuel.mortenson
he/him
Primary language English
CreditAttribution: samuel.mortenson at Acquia commented
Status: Needs review » Fixed

Committed after multiple users agreed with changes in another issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.