Menu icon Foundation
adding new colors to _settings.scss

I am trying to add my own colours to _settings.scss so I can customise my heading colour in Foundation for Emails.

 

I have added the following code to _settings.scss:

$pink: #ee2b53;

 

and then withing index.html I have

<h1 class="pink">my heading text</h1>

but the heading text will not change from $global-font-color.

What do I need to do to have a range of scss colors that I can reference for heading and also backgrounds etc.

 

Thanks!

color

I am trying to add my own colours to _settings.scss so I can customise my heading colour in Foundation for Emails.

 

I have added the following code to _settings.scss:

$pink: #ee2b53;

 

and then withing index.html I have

<h1 class="pink">my heading text</h1>

but the heading text will not change from $global-font-color.

What do I need to do to have a range of scss colors that I can reference for heading and also backgrounds etc.

 

Thanks!

Derek McDermott almost 3 years ago

Basically I think you're missing the CSS definition. I think those SCSS variables that you create can only be referenced within your SCSS files, not from within your HTML files.

Therefore, in an SCSS file, you would need to create a class definition that uses that $pink variable.

So, you could create a custom.scss file and import this in your app.scss and create a style there, or else add a new custom style directly into your app.scss file.

So for example, your app.scss file would look like this, assuming you want to change the ink colour and not the background colour: -

 

 

@import 'settings';

@import 'foundation-emails';



.my-colour {

color: $pink

}

So then your index.html code should look like this instead:-

<h1 class="my-colour">my heading text</h1>

I think that ought to work.

Derek

Joel Smith almost 3 years ago

 

Ah, ok I understand! Thanks Derek.

 

So, out of interest where are all the CSS definitions for the Sass variable that are included as default in settings.scss and can these be edited?

Derek McDermott almost 3 years ago

All of your SCSS/Sass definitions (which can include sass variables and your custom CSS which may use those variables) are compiled into a single CSS file which you will find in the "dist/css/app.css" location.

You shouldn't modify that 'dist/css/app.css' file though because when you build the system again by running 'foundation build' it will delete that dist folder and output an updated app.css file each time, so you will lose whatever changes you make there.

Instead, you should put your own css into the SCSS files. I'm not sure what the best practice is here - I saw one poster recommending that your custom CSS should go into the 'src/assets/scss/app.scss' file.

If you don't like doing that, you can add your own scss file to the build by creating a new '_custom.scss' file (note the leading underscore) and storing it in 'src/assets/scss' and then in your existing app.scss file include the following line after all the other imports:-

@import 'custom';

This links your _custom.scss into the build and any styles you create in custom will be output in the "dist/css/app.css" file after building. You can add as many of your own .scss files as you want like this.

Alternatively, if you're just using css only and not sass, you can add your own style blocks at the top of the pages (e.g. see the sidebar-hero.html template as an example) and these style blocks will be incorporated by the inliner into your html body during the build.

 

Regarding the default definitions, the foundation CSS definitions are included here as part of the foundation_emails module:-
/your-foundation-emails-project-name-here/node_modules/foundation-emails/scss

I don't think it's advisable to change them there though because if you ever update the framework you will lose your changes. If you need to customise things, I think they recommend that you either change the values in the _settings.scss (which they never overwrite during an update supposedly!) or else you override the css/scss definitions within your own .scss file.

Derek

Joel Smith almost 3 years ago

Thank you again Derek, that's a great help.

 

I'm surprised there is not more info about styling the official docs.