I've got a file called app.scss, inside that file I'm making four #imports:
#import "settings";
#import "foundation";
#import "type";
#import "custom";
I'm defining a $main-color variable like this in settings.scss:
$main-color: blue;
But for some reason when I reference that file in custom.scss, I get an error:
body {
background-color: $main-color;
}
Any idea what might be causing this problem? Thanks in advance!
You should rename settings.scss/custom.scss to _settings.scss/_custom.scss.
Related
So I would like to define a global color in my Angular project in the styles.scss stylesheet.
I know I can defined global variables like this
:root {
--blueish: #658bc7;
}
and then in other styles(heets) reference to it
p {
color: var(--blueish);
}
But this is NOT a globally defined color. This is a globally defined variable.
We could for example do
p {
color: aliceblue;
}
and this does work since aliceblue is globally defined along with a lot more preset colors. Is there a way for me to ADD a color to this list using (S)CSS? If not, would it be possible in less or SASS?
You can assign in SCSS vars with $varName. Important note if you like to use dash or underScore in your varnames. For the SASS compiler, $var-name is the same as $var_name. You have to take that into consideration.
SCSS
$blueish: #658bc7;
p {
color: $blueish;
}
Will compile to CSS:
p {
color: #658bc7;
}
You Can Define and Assign Variables in scss/sass Like This
$blueish: #658bc7;
p {
color: $blueish;
}
Notice that in sass/scss files named "blablabla" are globally scope
while files named "_blablabla" are not globally scoped and must be imported by.
You Must Have one globally file in sass/scss for example named "style.scss" that imports all scss/sass files in it for example:
/*
This File is only for imports
*/
#import "./libraries/_variables.scss";
#import "./libraries/_mixins.scss";
#import "./layouts/_header.scss";
#import "./pages/_about.scss";
Also, you can not add "_" and ".scss" in the importing it is not necessary for your editor will understand it for Example :
#import "./libraries/variables";
#import "./libraries/mixins.scss";
#import "./layouts/_header";
They are the same as the above example!
So, I have scss file with global styles. This file seems like that:
#import "colors";
#import "border-radius";
#import "box-shadow";
#import "paddings";
#import "margins";
#import "fonts-famalies";
#import "font-sizes";
#import "transition-durations";
#import "global-path";
#import "mixins";
#import "mixins-properties";
#import "../design/animations/fade-animation";
::v-global(*), ::v-global(*::before), ::v-global(*::after) {
box-sizing: border-box;
outline-color: var(--color-outline__global);
transition: background-color 0.2s linear;
}
::v-global(html), ::v-global(body), ::v-global(#application) {
font-family: var(--font-famaly__comfortaa);
background-color: var(--color-background__global);
color: var(--color-font__content);
margin: 0;
font-size: 95%;
height: 100vh;
overflow-wrap: anywhere;
}
v:global(a) {
color: var(--color-font__link);
}
Styles imports using vue.config.js with this configuration:
module.exports = defineConfig({
transpileDependencies: true,
css: {
loaderOptions: {
sass: {
additionalData: `
#import "#/styles/global/global.scss";
`
}
}
}
})
All good, but when I open developer console in chrome I see picture like that.
When I checked header tag in HTML I see a lot of same css imports. If I comment all css styles - header have a lot of styles still. What am I doing wrong? I think that problem in loader
If you're going to be adding a global import (for example for shared SCSS variables and mixins), don't put ANY global styles in that import.
scss-loader's additionalData modifies each scss file it loads with the given string template. As a result, you're putting an import with your global style definitions at the start of every component's style block.
To fix this, move all your v-global(html) styles and the animations to a different file, which you import once in your index.html or App.vue. Ensure that the file you want to automatically import in your components only contains code that does not generate any styles by themselves (so scss variables, mixins, functions, etc. are fine). It's common that you name this file 'variables.scss' or similar, so no style definitions accidentally end up in this file or its dependencies.
I am using gulp-sass to compile SCSS, but received the following error message:
[19:51:38] 'sassTask' errored after 98 ms
[19:51:38] Error in plugin 'gulp-sass'
Message:
assets\scss\base\_typography.scss
Error: Undefined variable: "$color-grey-dark".
on line 6 of assets/scss/base/_typography.scss
from line 7 of assets/scss/main.scss
>> color: $color-grey-dark;
Here are my variables from scss/abstracts/_variables.scss
$color-primary: #55c57a;
$color-primary-light: #7ed56f;
$color-primary-dark: #28b485;
$color-grey-dark: #777;
$color-white: #fff;
$color-black: #000;
Here's where I used the $color-grey-dark in scss/base/_typography.scss which generated the error message:
body {
font-family: "Lato", sans-serif;
font-weight: 400;
/* font-size: 16px; */
line-height: 1.7;
color: $color-grey-dark;
padding: 3rem;
box-sizing: border-box;
}
and here is my code from assets/scss/main.scss:
#import "abstracts/variables";
#import "abstracts/functions";
#import "abstracts/mixins";
#import "base/animations";
#import "base/base";
#import "base/typography";
#import "base/utilities";
#import "components/button";
#import "layout/header";
#import "pages/home";
I did put variables at the top of the list, since I read that the wrong order of your imports can create problems, but that didn't fix it.
How can I fix this error? Here is a link to the repo of the project in case that's helpful: https://github.com/chris-fretz/natours-project.
Seems to be a problem with your pathes ... ;-)
In your project on github you #import file _variables.scss from directory "abstracts/variables".
The file in that directory is empty!!!
The file _variables.scss with the variables you want to load is placed in assets directly. So you may try #import 'variables ... or just move the file with the variables to the right place.
Additional nice notice: in that situation it could be helpful to check the pathes for other files as well i.e. mixins, functions, ... ;-)
I'm importing bootstrap files and rewriting the source variables, eg :
#import "./../../../../vendor/bootstrap/less/scaffolding.less";
#import "./../../../../vendor/bootstrap/less/type.less";
#import "./../../../../vendor/bootstrap/less/code.less";
#import "./../../../../vendor/bootstrap/less/grid.less";
#import "./../../../../vendor/bootstrap/less/tables.less";
#import "./../../../../vendor/bootstrap/less/forms.less";
#import "./../../../../vendor/bootstrap/less/buttons.less";
//etc ...
#font-size-base: 100%;
Then in my own variables.less I set something like that, a mixin for rem font sizing
.font-size(#sizeValue) {
#remValue: #sizeValue;
#pxValue: (#sizeValue * 10);
font-size: ~"#{pxValue}px";
font-size: ~"#{remValue}rem";
}
Now of course, I dont see how I can make that working, this is what I wanted, and it doesn't work (input not recognised) :
// In bootstrap import file, trying to overwrite their variable parameter with my mixin
#font-size-h2: .font-size(32);
Any way to do what I want ?
While I was creating theme with Bourbon, I got the error below:
error sass/screen.scss (Line 18 of sass/bourbon/css3/_background.scss: \
$string: linear-gradient(10deg, #217142,#214271) is not a string for `str-slice')
Here's code in _background.scss, as it's on its Github repo:
#mixin background($backgrounds...) {
$webkit-backgrounds: ();
$spec-backgrounds: ();
#each $background in $backgrounds {
$webkit-background: ();
$spec-background: ();
$background-type: type-of($background);
#if $background-type == string or list {
$background-str: if($background-type == list, nth($background, 1), $background);
# line 18 just below:
$url-str: str-slice($background-str, 0, 3);
$gradient-type: str-slice($background-str, 0, 6);
#if $url-str == "url" {
$webkit-background: $background;
$spec-background: $background;
}
}
}
}
I was using Sass 3.3.14 & Compass 1.0.0.rc.1 to create the theme in order to get full benefits of bourbon.
UPDATE:
(Oops, I've forgotten telling about Neat or Bitters. I am using them, too. Sorry.)
I've updated files as being described on Bitters' guide on Github:
#import 'compass';
#import 'bourbon/bourbon';
#import 'base/grid-settings';
#import 'neat/neat';
#import 'base/base';
#import 'custom/custom';
But same error occurs.
I've got similar error
error (Line 18 of bourbon/css3/_background.scss: $string: linear-gradient(#c73b3c,#b8201f) is not a string for `str-slice')
when added the #import 'compass'; in a working bourbon/neat/bitters environment. removing it fixed the problem. importing after thoughtbot's libraries gives bunch of warnings instead of errors but working.
#import 'bourbon/bourbon';
#import 'base/grid-settings';
#import 'neat/neat';
#import 'base/base';
#import 'custom/custom';
#import 'compass';
The problem seems to be related to the $base-line-height variable.
In compass $base-line-height set to $base-line-height 24px;
In bourbon $base-line-height set to $base-line-height: 1.5;
when compass loaded after bourbon you get a WARNING: $base-line-height must resolve to a pixel unit.
because bourbon set it to 1.5.
If you try to add $base-line-height: 24px; before the #import 'compass'; command you get error:
(Line 36 of /usr/local/lib/ruby/gems/2.1.0/gems/compass-core-1.0.1/stylesheets/compass/typography/_vertical_rhythm.scss: Incompatible units: 'em' and 'px'.)
because $base-font-size is also conflicting between the libraries.
A solution I found is to set the imports like this:
#import 'bourbon/bourbon';
#import 'base/grid-settings';
#import 'neat/neat';
#import 'base/base';
#import 'custom/custom';
$base-font-size: 16px;
$base-line-height: 24px;
#import 'compass';
Now you have both playing together. I couldn't make it to work other way around where compass is imported before bourbon. I guess this conflict should be fixed at libraries level (bourbon?).