i am struggling with breaktpoints in SASS.
I have this file structure
style.scss
_layout.scss
_variables.scss
I wanna use code breakpotints from _variables.scss in _layout.scss
_variables.scss
$screen-xl-min: 1200px;
#mixin xl {
#media (min-width: #{$screen-xl-min}) {
#content;
}
}
_layout.scss
#use 'variables';
nav {
height: 80px;
#include xl {
background-color: red;
}
}
style.scss
#use 'variables';
#use 'layout';
And I have error
SassError: Undefined mixin.
Can someone tell me, what am I doing wrong? Thanks a lot for a help!
Try and change
#use 'variables'
for
#use 'variables' as *;
Check the documentation: https://sass-lang.com/documentation/at-rules/use
In your example correct way will be write #include variables.xl {}
Or modify #use rule like #Café wrote
Related
I am creating a SCSS -> HTML plugin and need to first render SCSS -> CSS while keeping the nesting so I can then parse with PostCSS to then create an HTML tree with.
I would like to render SCSS like this
// myMixin.scss
#mixin myMixin {
.myMixin {
padding: 1rem;
background: yellow;
}
}
// main.scss
#import 'myMixin.scss';
$blue: #004AAD;
.button {
.text {
color: $blue;
}
#include myMixin;
}
And the output would look like this:
.button {
.text {
color: #004AAD;
}
.myMixin {
padding: 1rem;
background: yellow;
}
}
Basically, I'd like a way to render everything in SCSS while keeping the original nesting. Is it possible? Thanks.
Nesting is specific to SCSS. Also I don't think #import is best practice, use #use instead.
https://sass-lang.com/documentation/at-rules/use
Here is the thing our client(browsers) only support raw CSS and not SCSS, When you use SCSS it compiles down to raw CSS, And CSS doesn't have inbuilt Nesting feature.
For many years I've been completely happy with #import, but times, they are a-changing ...
So I try to shift my projects from #import to #use and #forward, and I found this posting quite useful. But when I try to implement #use into my partials, I keep getting an 'undefined mixin'. I think I may have misunderstood the way #use works, but I can't for the live of me figure out where i went wrong. I've reached the point where I just want to climb the next church tower and start shooting people ... which doesn't help me concentrating either ;)
So I stripped it all down to very basic chunks of code to examine the problem under 'lab conditions'. Here is what I came up whith:
Folders and files:
styles.scss
├── a_tools
│ └── _mixins.scss
├── b_settings
│ └── _global.scss
└── c-components
└── _test.scss
_mixins.scss:
#use '../b_settings/global' as *;
#function bp($bp) {
#return ($breakpoints, $bp);
}
#mixin vp-medium {
#media (min-width: #{breakpoints(small) + 1}) and (max-width: #{breakpoints(medium)}) {
#content;
}
}
_gobal.scss:
$breakpoints: (
'small': 767px,
'medium': 1024px,
'navigation': 840px,
);
:root {
--vp-name: small;
}
#include vp-medium {
:root {
--vp-name: medium;
}
}
_test.scss:
#use 'a_tools/mixins' as *;
#use 'b_settings/global' as *;
.test {
margin: 10px;
#include vp-medium {
margin: 20px;
}
}
styles.scss:
#use 'c_components/test';
Compiling keeps throwing 'undefined mixin on line 15, column 1 of _global.scss', which is the line '#include vp-medium {'. Compiled with Dart Sass 1.32.8.
Who can tell me where I got on the wrong path? Thanks in advance!
As I understand the new ruls #use the way, that you have to #usethe needed files with the needed mixin to EVERY file you want to use it.
If I did get it reight:
You #used the file mixins with mixin vp-medium in test.scss where it is used.
But you did not #use the same file in global where want to use the mixin as well. Just try to #use the file also to global.
ADDITIONAL:
We had similar discussion here: https://stackoverflow.com/a/66300336/9268485
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 imported the custom SCSS files in the theme.scss but files are still not working
in theme.scss: #import "mixins";
This should import my custom scss file named: _mixins.scss file which is is the same directory of theme.scss but it isn't working I keep on getting an error on my _navPages.scss that mixin are not defined... even though I defined them in that _mixins.scss file
Please advise....
file structure image
Example for mixin in my _navPages.scss:
#include for-phone-only {
//#media (min-width: 321px) { #content; }
grid-template-areas: "burger logo icons";
grid-template-columns: 40px 1fr 40px;
}
Example for the defined mixin in my _mixins.scss:
#mixin for-phone-only {
#media (min-width: 321px) { #content; }
}
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