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");
}
Related
In a programming language like javascript, even though I don't make any a "returned" result in the end, but it still returns a value, "undefined".
In case of Sass, I know that #mixin does not "return" anything like #function.
However, it "actually" returns nothing at all?
If it returns something actually (something like "undefined" or "void"), then what it returns?
I'm not sure I get the question but...
Mixins lets you create reusable CSS declarations (CSS content) 'called' using #include.
Unlike functions you can't assign mixins to variables as they do not produce a return value (throws an error).
#function fs($value){
#return $value;
}
#mixin fs($value){
font-size: $value;
...
}
.class { // returns value
font-size: fs(16px); // => 16px;
}
.class { // generates properties and values
#include fs(16px); // => font-size: 16px; ...
}
$var: fs(16px); // will work (function)
$var: #include fs(16px); // won't work (mixin)
Try to read this article and this one, you have some answer :
"They obtain full CSS rules where properties that are dynamic will be passed into arguments"
So when you #include a #mixin in your code, it will return CSS rules.
I am working with a mixin called button with the following signature:
#mixin button($expand: false,
$background: $button-background,
$background-hover: $button-background-hover,
$color: $button-color, $style: solid)
I would like to create a mixin to wrap this one called sized-button, that takes an additional parameter to indicate the size of the button based on a $button-sizes map.
The map looks like this:
$button-sizes: (
tiny: 0.6rem,
small: 0.75rem,
default: 0.9rem,
large: 1.25rem,
);
I was hoping to use variable arguments so that I don't have to redefine the arguments for the button mixin. For example, this was my first attempt:
#mixin sized-button($size: default, $buttonArgs...) {
#if (map-has-key($button-sizes, $size)) {
#include button($buttonArgs);
font-size: map-get($button-sizes, $size);
}
#else {
#warn "Invalid button size";
}
}
However, doing this does not seem to work. For example, if I pass one of the button arguments to the sized-button mixin, I get an error:
#include sized-button($size: large, $expand: true);
Mixin sized-button has no parameter named $expand
Is it possible to do what I'm trying to do?
Can multiple Mixin's be passed into an include in sass.
example
#mixin something{
//css declarations
}
#mixin somethingElse{
//css declarations
}
Can I do the following
.class{
#include something,somethingElse;
}
or does it have to be
.class{
#include something;
#include somethingElse;
}
Each mixin invocation requires an #include when using the scss syntax. If you were using the sass syntax instead, then you could save some keystrokes:
=something
//css declarations
=somethingElse
//css declarations
.class
+something
+somethingElse
I'm trying to get SASS to do something akin to an abstract superclass in programming. I'm getting as far as the superclass part
.box {
#include span-columns(1);
#include border-radius(5px);
height: 360px;
overflow: hidden;
}
article {
#extend .box;
}
figure {
#extend .box;
}
This is a way to define commonalities of boxes without duplicating them in the generated CSS, as would happen with a mixin. However, this solution has the blemish of defining a rule for a (CSS) class "box" that I don't really need and want.
To be sure, this is a minor issue, still I'd like to know if there is a way to make ".box" into a label that is only used during SASS preprocessing and does not appear in CSS.
You want to define your "superclass" using a % instead of a .
%box {
#include span-columns(1);
#include border-radius(5px);
height: 360px;
overflow: hidden;
}
article {
#extend %box;
}
figure {
#extend %box;
}
Note that this requires version 3.2+
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); }