Is it possible to have a mixin that can override a current code block? I want to have it so that if the #mixin is empty the background for the box would be empty and then show in orange, but when I remove the #mixin it does not change to orange? What am I doing wrong?
#mixin box {
background: red;
}
.box {
#if box {
#include box;
} #else {
background: orange;
}
}
The $color: null is just for setting a value if you didn't pass a value for your #mixin. after that you can check easily inside your #mixin using #if #else.
Sass
#mixin background-color($color: null) {
#if($color) {
background-color: $color;
} #else {
background-color: orange;
}
};
h1 {
#include background-color(red);
}
h2 {
#include background-color(green);
}
h3 {
#include background-color();
}
h4{
#include background-color(blue)
}
Html
<h1>color</h1>
<h2>color 2</h2>
Related
Is there a way to check what & refers in mixin?
body {
#import x
}
button {
#import x
}
Inside #mixin x() I want a special case when it's called with body as &.
You can check the value of & in your mixin using #if {} #else {}:
#mixin test {
$root: #{&};
$parentTagIsBody: $root == 'body';
#if $parentTagIsBody {
color: red;
} #else {
color: black;
}
}
button {
#include test;
}
body {
#include test;
}
will compile to:
button {
color: black;
}
body {
color: red;
}
I'm attempting to set a bunch of background colours using a mixin. I'd also like to apply hover styling to these background colours IF the classes are assigned to a link element:
#mixin bg-color($color) {
background-color: $color;
&[ifthisisalink] {
&:hover {
background-color: darken($color, 10%);
}
}
}
.bg-blue {
#include bg-color(blue);
}
So if we have .bg-blue on a plain div, there is no hover color. But if .bg-blue is on a link, there is a hover color:
<div class="bg-blue">Hover on me and nothing happens.</div>
Hover on me and I go darker.
Is this possible in SASS?
You need #at-root:
#mixin bg-color($color) {
background-color: $color;
#at-root {
a#{&} {
&:hover {
background-color: darken($color, 10%);
}
}
}
}
.bg-blue {
#include bg-color(blue);
}
Is it possible to define a default value for #content just as one would do with arguments?
For instance something like:
#mixin foo {
#content: width:100%;
}
No, #content is not a variable. You cannot set a default value to it. You cannot manipulate or examine it.
If Alessandro's answer is unsuitable for your needs, you'll need to create an extra mixin to get the results you desire:
#mixin foo {
color: red;
#content;
}
#mixin empty-foo {
#include foo {
width: 100%;
}
}
.foo {
#include foo {
border: 1px solid;
}
}
.bar {
#include empty-foo;
}
try this:
#mixin foo($content: 100%) {
width:$content;
}
or this:
#mixin foo() {
$content: 100%;
width:$content;
}
Is it possible to turn this:
.redstripe p:not(last-child) {
border-bottom:1px solid red;
}
Into a mixin so that I can apply it to any element and assign a child tag to it like:
#mixin redstripe (this.$children):not(last-child) {
border-bottom:1px solid red;
}
And then apply:
div {
#include redstripe(p);
}
What is the correct way to implement this?
Here's a general purpose mixin like you've described.
DEMO
#mixin not-last-child($selector) {
& #{$selector}:not(:last-child) {
#content;
}
}
We can pass it a selector string to use.
SCSS:
.thing {
#include not-last-child('p') {
color: red;
}
}
CSS:
.thing p:not(:last-child) {
color: red;
}
Sass Documentation
I want an if statement to show if a string is inside another string in sass.
How do i do this in a mixin?
#mixin hello($mystring) {
}
You can use str-index to achieve this.
SCSS
#mixin hello($mystring) {
#if (str-index("Hello World", $mystring)) {
background-color: green;
}
#else {
background-color: blue;
}
}
.test {
#include hello("World");
}
CSS Output
.test {
background-color: green;
}