This is my current SASS file:
$icons-spacing: 12px;
$icons-sprite-dimensions: true;
#import "sprites/icons/*.png";
#include all-icons-sprites;
.odd .chat-marker { background-position: sprite-position($icons, chat-marker-inverted); }
Error: Undefined variable "$icons"
So what's the sprite map's variable? The map config variables at the top work fine.
I've found a solution using the generated mixins, like this:
.odd .icons-chat-marker { #include icons-sprite(chat-marker-inverted); }
Related
I have 2 scss files, I want to use one mixin from the first into the second, but without importing the rest of the file ( I have a few url() who don't react well into this file
someDir/F1.scss
#mixin somemixin($width, $height) {
}
.someClass {
#include somemixin(17px, 10px);
background-image: url('./someUrl');
}
anotherDir/anotherAnotherDir/F2.scss
#import '../../someDir/F1';
.someOtherClass {
#include somemixin(17px, 10px);
background-image: url('./someOtherUrl');
}
How can I do it?
You can instead try #use module instead of #import and make only mixins public or decide on what you want to make public from file 1.
Check it here
https://sass-lang.com/documentation/at-rules/use
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
I am trying to set global variables when a theme mixin is included since it seems much more straight-forward to use than this "themify" stuff I find from searching.
The idea is something like having a _themes.scss with
#mixin light-theme { $primary-color: #123456 !global; }
#mixin dark-theme { $primary-color: #654321 !global; }
body.light-theme { #include light-theme }
body.dark-theme { #include dark-theme }
The problem is it always uses the dark-theme value since it is declared last. Is what I am trying to do possible?
How do I get media queries to work in bootstrap? I have a SCSS file, I think I need to import something but I have no idea what.
Error message:
Scss compiler error: Error: no mixin named media-breakpoint-up
Path: homepage.scss
#include media-breakpoint-up(sm) {
h1.home-page {
font-size: 3rem;
}
}
You could #import the entire "bootstrap" scss, and then define the custom #include...
#import "bootstrap";
#include media-breakpoint-up(sm) {
h1.home-page {
font-size: 3rem;
}
}
or, you can import functions, variables and mixins (since this includes only what is needed for the mixin)...
#import "bootstrap/functions";
#import "bootstrap/variables";
#import "bootstrap/mixins";
/* change col style on sm only */
#include media-breakpoint-up(sm) {
h1.home-page {
font-size: 3rem;
}
}
#import "bootstrap";
It all depends on what other customizations you have.
https://codeply.com/go/3zTbKtczVd
Also see: How to extend/modify (customize) Bootstrap 4 with SASS
I'm trying to create a Sass mixin that takes a class as it's argument:
#mixin myMixin($el){
> #{$el}{
background: white;
}
}
.myClass1{
#include myMixin(div);
}
The above code works fine. I.e., elements are accepted.
But this calls an error:
.myClass1{
#include myMixin(.myClass);
}
I've tried wrapping it in quotes and #{} but still no dice.
Curiously, the * selector also does not work.
You need to quote your class:
.myClass1{
#include myMixin(".myClass");
}