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
Related
I have a main.scss file that I want to import colors into from a _colors file.
I have defined a body color in the color file, when I try to import it, I see no changes in the webpage. They are both in the same scss folder but neither #include or #import seem to make a difference. I have tried with and without the underscore in my import statement, both single and double quotes and both import and include keywords. Please tell me what stupid mistake I am making that will rectify this problem as I have researched the problem and think I have been able to copy the examples with no success.
_colors.scss
body {
$background-color: maroon;
}
main.scss
#include 'colors';
Partials are used with #use directive. Then,
_colours.scss
body{
background-color: maroon;
}
style.scss
#use "_colours";
The reuse of code is done through the #mixin directive.
_colours.scss
#mixin body--background{
background-color:maroon;
}
style.scss
#use "_colours.scss" as so;
body{
#include so.body--background;
}
But, if you want to just define just colours use variables instead. Example below,
_colours.scss
$maroon=maroon;
$lightblue=//et cetera.
style.scss
#use "_colours";
body{
background-color:$maroon;
}
If you have a main.scss file which will be the file that gets compiled, and you want to import variables, mixins etc from another partial file, such as _colors.scss. You could do so by loading the members from the partial _colors.scss into main.scss with a #use at-rule. This allows loaded members from the module to be referenced with dot-notation throughout your main.scss stylesheet.
Let's say your _colors.scss file looked like this:
$bodyColor: maroon;
$someOtherColor: #f06;
/* adding a mixin for demo */
#mixin highlight($c, $bg) {
color: $c;
background: $bg;
}
/* some extra styles pertaining to _color.scss */
.some-styles {
color: $someOtherColor;
}
Note: The syntax for #use is #use <url> as <namespace>;.
You could load the variables/mixins etc into main.scss with a #use rule and reference the namespace throughout your program:
#use "./colors" as c;
body {
background-color: c.$bodyColor;
}
.highlighted {
#include c.highlight(#fff, #f06);
}
or without defining a namespace like:
#use "./colors" as *;
body {
background-color: $bodyColor;
}
.highlighted {
#include highlight(#fff, #f06);
}
You certainly can include a body {} declaration inside _colors.scss and load it the same way as discussed above, but I think your wanting to place the body style block inside main.scss and simply reference loaded variables from _color.scss. If you have a directory of many partials and want to load them into main.scss without writing separate #use rules for each load, then introduce a index file with #forward rules to load an entiry directory of partials into main.scss using a single #use rule.
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
I'm migrating a codebase from using #import to #use and #forward. Most of it is okay but I'm unsure what to do in a case where #import is used with #content.
Considering the following mixing that the only goal is to wrap styles in a class:
#mixin alternative-styles {
.parent-class {
#content;
}
}
The mixin is then used with #import to wrap all those styles in a .parent-class:
#include alternative-styles {
#import 'components';
}
I assumed replacing it with a #forward wouldn't work but have it a try anyway in this way:
#include alternative-styles {
#forward 'components';
}
This threw the following error:
Error: This at-rule is not allowed here.
╷
22 │ #forward 'components';
│ ^^^^^^^^^^^^^^^^^^^^^
╵
I have found that the sass-migration tool solves the issue this way:
#use 'sass:meta';
#use 'mixins';
#include mixins.alternative-styles {
#include meta.load-css('components');
}
The components.scss files has multiple #forward statements to keep all component references in one place like this:
// components.scss
#forward 'components/buttons';
#forward 'components/text';
After the sass compiler runs it results in an empty block:
.parent-class {
}
Is there any way to achieve wrapping a bunch of styles in a class that supports the #use and #forward rules?
I found that the meta.load-css mixin actually does work after creating a separate prototype with the same structure:
#use 'sass:meta';
#use 'mixins';
#include mixins.alternative-styles {
#include meta.load-css('components');
}
More details on using meta.load-css for this case can be found in this GitHub issue: https://github.com/sass/sass/issues/3095
The reason I got the empty .parent-class block was because I was making use of asynchronous compiling with the gulp-sass package. Replacing sass().on(...) with sass.sync().on(...) solved the issue.
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
In addition to application.css.scss, I have multiple partials like homepage.css.scss. At the moment I have to add #import 'bootstrap' to each one of them in order to use bootstrap variables and mixins.
Let's say I want to change my default links colour to red, I'd add that to application.css.scss. But the links in homepage.css.scss will not be red because the bootstrap import will override it with blue.
In LESS, I can do #import (reference) "bootstrap", how can I do that in SASS?
The closest you will get is a silent class / placeholder. These work a little different to how LESS and reference work, you can read more on them here: http://blog.teamtreehouse.com/extending-placeholder-selectors-with-sass
LESS
lib.less
.class {
background: red;
}
main.less
#import (reference) "lib";
.anotherClass {
&:extend(.class);
}
SASS
lib.sass
%class {
background: red;
}
main.sass
#import "lib";
.anotherClass {
#extend %class;
}
CSS Output
.anotherClass {
background: red;
}