I created a blank Ionic4 app and in the src/global.scss, I declare a variable $padding: 16px. I then tried to use the $padding in an element in home.page.scss as follows:
.highlight {
padding: $padding;
}
I expected it to output the following as it does in Ionic3:
.highlight {
padding: 16px;
}
Instead in Ionic4 I am getting an undefined variable on the $padding during the build process. Can we not use global SCSS variables within the page styles anymore or am I missing something obvious here?
You need to import the global.scss file in your page.scss file to get it work
#import '../../global.scss';
Since global.scss already include for the project. So the solution is that you make a new file common.scss and import it inside page.scss with
#import '../../common.scss';
And inside common.scss you can type
$padding: 16px
Related
I have styles.scss file which loads variables from variables.scss and pass them to all imported stylesheets (according to docs)
// style.scss
#use "variables" as *;
#import "test";
// variables.scss
$body-color: red;
If I use simple _tests.scss then it works fine.
// _tests.scss
body {
color: $body-color;
}
But when I try to use other modules inside imported file, I get an error:
// _tests.scss
#use "sass:math"; // this line causes "Undefined variable" error
body {
color: $body-color;
}
What am I doing wrong?
With the new module system in sass (with #use instead of #import) how can i define a class in one file and the use it in another file with #extend ?
File colors.scss
.element {
background-color: blue;
}
main file
#use "./colors.scss" as colors;
body {
#extend .element;
}
This gives the following error:
"body" failed to #extend ".element".
The selector ".element" was not found.
Use "#extend .element !optional" if the extend should be able to fail.
Example:
https://stackblitz.com/edit/angular-tufq7f?file=src%2Fstyles.scss
How can I tell sass to get it from colors.scss?
Turns out there are a few different problems here. The first is that the stacblitz example is using an old version of sass witch does not have module support. The other is that there is no way to specify from witch sass module to extend a css class from. The correct solution is what I wrote in the question:
#extend .element;
Does the following work?
#use "./colors.scss" as colors;
body {
#extend colors.element;
}
(Modules are imported as a namespace, so you have to 'use' the 'module' by it's name)
https://sass-lang.com/documentation/at-rules/use#choosing-a-namespace
How can I Include .scss file in another .scss file?
I was trying to write this in a file:
app.scss:
#include('buttons');
#include('dropzone');
body {
background: $primaryColor;
overflow-x: hidden; /*Clip the left/right edges of the content inside the <div> element - if it overflows the element's content area: */
height: 100%; /* Cover all (100%) of the container for the body with its content */
padding-top: 70px;
} /* more css code here */
and it returns an error : invalid css after #import
I try to include 2 other scss files inside the main scss file, so it will be all compiled to one css file eventually. How is it possible?
You can import it like this;
#import "../../_variables";
#import "../_mixins";
#import "_main";
#import "_login";
#import "_exception";
#import "_utils";
#import "_dashboard";
#import "_landing";
According to your directories and it will do what you want.
You can include a partial by doing this:
#import "partial";
The imported file needs an underscore, so sass will recognize it to be included: _partial.scss
You can use #use rule for it. This rule loads another Sass file as a module, which means you can refer to its variables, mixins, and functions in your Sass file with a namespace based on the filename. Using a file will also include the CSS it generates in your compiled output!
// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
see how to using #use 'base'; in the styles.scss file
// styles.scss
#use 'base';
.inverse {
background-color: base.$primary-color;
color: white;
}
you don't need to include the file extension.
#osherdo You have no need to add !important for overwriting bootstrap CSS.
body
{
background: #4d94ff; /* Use to override Bootstrap css settings. */
}
First of you need to verify from where bootstrap is rendering on the page and what is the weight of the bootstrap CSS file. After that you can place your 'css/app.css' file after bootstrap then it will work. Then you can easily overwrite the entire bootstrap CSS.
Ok, so it appears to be that my app.scss file collide with Bootstrap.css file.
Because I wanted the app.scss background property to apply, instead of the bootstrap css file. I've added !important in this property to override bootstrap style.:
body
{
background: #4d94ff !important; /* Used to override Bootstrap css settings. */
}
Also, gulpfile.js has been updated to suite my needs accordingly:
var elixir = require('laravel-elixir');
elixir(function (mix) {
mix.sass('app.scss', 'resources/assets/css')
.styles([
'app.css'
], 'public/css/app.css');
mix.version([
'css/app.css'
]);
});
And that's how I fixed it.
For example:
main.scss
#import "variables";
#import "page";
_variables.scss
$color-a: #FFFFFF;
_page.scss
div.test {
background: $color-a;
}
Or does variables have to be imported on every sheet that wants to use a variable from it?
Currently, I'm getting Error: Undefined variable: "$color-a"
Edit I should add that I'm using sassc to compile the files in a clojure project:
:sass {:sass-file "main.scss"
:source-maps false
:output-style "compressed"
:output-dir "css/"}}
I just started with sass and installed prepros. I tried to compile an .scss file and got an error:
Syntax error: Invalid CSS after " color: ": expected expression (e.g. 1px, bold), was "#blue;"
The .scss code:
.footer {
clear: both;
background-color: #blue;
}
I installed Ruby, and prepros.
SCSS uses $ to denote variables so it should be background-color: $blue;
It looks like your syntax is wrong. In Sass, # is for things like imports, media directives, partials (includes) and extends.
If you want to define a specific value for blue, and then reuse it, then the syntax is something like this:
$blue: #3333FF;
a {
font-weight: bold;
color: $blue;
}