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.
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 started upgrading a website from Singularity 1.1.2 to 1.4.0 and immediately hit a wall when it came to using multiple grids in the same style sheets. I have five different grids on this site. Previously I was able to set variables for each of the grids and gutters, like so...
$copy-grids: 2;
$copy-grids: add-grid(4 at $breakpoint-xs-min, $copy-grids);
$copy-grids: add-grid(6 at $breakpoint-l-min, $copy-grids);
$copy-gutters: $gutter-width;
$front-grids: 1;
$front-grids: add-grid(2 at $breakpoint-2up-min, $front-grids);
$front-grids: add-grid(3 at $breakpoint-3up-min, $front-grids);
$front-grids: add-grid(4 at $breakpoint-4up-min, $front-grids);
$front-gutters: breakpoint-to-base-em($front-gutter-width);
...
Then I was able to pass these variables to custom mixins using Singularity's layout() function, like this...
// Mixins for the main content body copy.
#mixin copy-layout {
#include layout($copy-grids, $copy-gutters) {
// All the things!
#content;
}
}
#mixin copy-grid-span($span, $location) {
#include copy-layout {
#include grid-span($span, $location);
}
}
// Mixins for the front page.
#mixin front-layout {
#include layout($front-grids, $front-gutters) {
$gutter-styles: 'split' 'fixed';
// All the things!
#content;
}
}
#mixin front-grid-span($span, $location) {
#include front-layout {
#include grid-span($span, $location);
}
}
...
This let me use my custom mixins in place of the standard grid-span() mixins to easily implement any of my defined grids. For instance:
#block-bean-front-page-message {
margin-bottom: $front-gutters;
#include breakpoint-1up() {
width: 100%;
padding: 0 $front-gutters/2;
}
#include breakpoint-2up-to-4up() {
#include front-grid-span(1, 2);
}
#include breakpoint-4up(true) {
#include front-grid-span(3, 2);
}
}
The problem is that, in Singularity v1.4, grid and gutter settings are no longer saved to normal sass variables. Instead they are saved as keyed values in the global $Singularity-Settings map. The keys used for these values are hard coded in the add-grid(), add-gutter(), and add-gutter-style() mixins, none of which accept a custom variable name. This appears to effectively prevent me from defining more than one grid. So while the layout() mixin still exists, I no longer have variables I can pass into it for my grid and gutter settings, breakng my custom layout wrapper mixins.
I've posted this as an issue on Github and I understand a more permanent fix may be in the works. But in the mean time, I'm hoping there is a workaround I can use to accomplish multiple grids using the current release of Singularity.
It looks like I'm able to achieve what I'm after by overriding the add-grid(), add-gutter(), and add-gutter-style() mixins like so:
#mixin add-grid($grid-definition, $grid-key: 'grids') {
$Grid-Map: ();
#if sgs-has($grid-key) {
$Grid-Map: sgs-get($grid-key);
}
#else {
$New-Map: sgs-set($grid-key, $Grid-Map)
}
$Add-Grid: add-grid($grid-definition, $Grid-Map);
$HOLDER: sgs-set($grid-key, $Add-Grid);
}
#mixin add-gutter($gutter-definition, $gutter-key: 'gutters') {
$Gutter-Map: ();
#if sgs-has($gutter-key) {
$Gutter-Map: sgs-get($gutter-key);
}
#else {
$New-Map: sgs-set($gutter-key, $Gutter-Map)
}
$Add-Gutter: add-gutter($gutter-definition, $Gutter-Map);
$HOLDER: sgs-set($gutter-key, $Add-Gutter);
}
#mixin add-gutter-style($gutter-style-definition, $gutter-style-key: 'gutter styles') {
$Gutter-Style-Map: ();
#if sgs-has($gutter-style-key) {
$Gutter-Style-Map: sgs-get($gutter-style-key);
}
#else {
$New-Map: sgs-set($gutter-style-key, $Gutter-Style-Map)
}
$Add-Gutter-Style: add-gutter-style($gutter-style-definition, $Gutter-Style-Map);
$HOLDER: sgs-set($gutter-style-key, $Add-Gutter-Style);
}
Then I can define my grids like this...
#include add-grid(2, 'copy grids');
#include add-grid(4 at $breakpoint-xs-min, 'copy grids');
#include add-grid(6 at $breakpoint-l-min, 'copy grids');
$copy-grids: sgs-get('copy grids');
#include add-gutter($gutter-width, 'copy gutters');
$copy-gutters: sgs-get('copy gutters');
#include add-grid(2, 'front grids');
#include add-grid(2 at $breakpoint-2up-min, 'front grids');
#include add-grid(3 at $breakpoint-3up-min, 'front grids');
#include add-grid(4 at $breakpoint-4up-min, 'front grids');
$front-grids: sgs-get('front grids');
#include add-gutter($front-gutter-width-em, 'front gutters');
$front-gutters: sgs-get('front gutters');
$front-gutter-styles: 'split' 'fixed';
...giving me variables which I can pass into the layout function. Right now everything seems to be working, except for the gutter styles, which don't seem to have any effect on output, but that's a different issue.
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");
}
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); }