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;
}
Related
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>
I don't know if Sass is able to do this, but it doesn't hurt to ask.
The Problem
Basically I have three colors pattern that are repeated in multiple sections of application, like blue, green and orange. Sometimes what changes is the background-color, or the border-color of the component... Sometimes is the text color of a child element, etc.
What I thought?
1. Replace a string pattern inside a content.
.my-class {
#include colorize {
background-color: _COLOR_;
.button {
border-color: _COLOR_;
color: _COLOR_;
}
}
}
2. Providing a callback variable for #content.
// This is just a concept, IT DOESN'T WORK.
#mixin colorize {
$colors: blue, green, orange;
#each $colors in $color {
// ...
#content($color); // <-- The Magic?!
// ...
}
}
// Usage
#include colorize {
background-color: $color;
}
I tried to implement such solutions, but without success.
Instead of it...
See below my workaround to get it partially working:
#mixin colorize($properties) {
$colors: blue, green, orange;
#for $index from 1 through length($colors) {
&:nth-child(#{length($colors)}n+#{$index}) {
#each $property in $properties {
#{$property}: #{nth($colors, $index)};
}
}
}
}
You can use this mixin that way:
.some-class {
#include colorize(background-color);
}
What will come output:
.some-class:nth-child(3n+1) {
background-color: blue;
}
.some-class:nth-child(3n+2) {
background-color: green;
}
.some-class:nth-child(3n+3) {
background-color: orange;
}
The problem? Well, I can't use it with child selectors.
Based on the above information, there is some magic solution for this case?
I think I figured out what you meant; it is a little (very) messy, but it should do what you want:
#mixin colorize($parentProperties,$childMaps) {
$colors: blue, green, orange;
#for $index from 1 through length($colors) {
&:#{nth($colors, $index)} {
#each $property in $parentProperties {
#{$property}: #{nth($colors, $index)};
}
}
#each $mapped in $childMaps {
$elem: nth($mapped,1);
$properties: nth($mapped,2);
#{$elem}:nth-child(#{length($colors)}n+#{$index}) {
#each $property in $properties {
#{$property}: #{nth($colors, $index)};
}
}
}
}
}
It would turn out to be:
/* -------------- USAGE ------------------*/
.some-class {
#include colorize(
background-color,( //Parent properties
(button, background-color), //Child, (properties)
(span, (background-color,border-color)) //Child, (properties)
)
);
}
/* --------------- OUTPUT ----------------*/
.some-class:nth-child(3n+1) {
background-color: blue;
}
.some-class button:nth-child(3n+1) {
background-color: blue;
}
.some-class span:nth-child(3n+1) {
background-color: blue;
border-color: blue;
}
.some-class:nth-child(3n+2) {
background-color: green;
}
.some-class button:nth-child(3n+2) {
background-color: green;
}
.some-class span:nth-child(3n+2) {
background-color: green;
border-color: green;
}
.some-class:nth-child(3n+3) {
background-color: orange;
}
.some-class button:nth-child(3n+3) {
background-color: orange;
}
.some-class span:nth-child(3n+3) {
background-color: orange;
border-color: orange;
}
Hope that that is what you are looking for :)
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 try to get a mixin "remebering" the selectors it was generating so I can make a bulk-selector at the end.
To illustrate what I am trying to do – My mixin looks like so:
#mixin fontcustom($name) {
#if $name == "heart" {
$glyph: '\2764'; // a special character in my own font -> ❤
}
#else if $name == "foo" { ... }
#else if $name == "bar" { ... }
#else if $name == "baz" { ... }
// ... much much more characters ...
&:before {
content:"#{$glyph}";
}
/* aggreagation of selectors ? */
}
#function selectorsUsingFontcustom() {
/* this should somehow result in a list of selectors, see above */
font-family: fontcustom;
color: red;
/* ... */
}
Obviously there are some more style declarations needed, for example font-family, colors and so on.
I want to avoid repetive declarations so my question is: is there a way to make the mixin "remember" the selectors which resulted in applying it and genarate a comma-separated list of them, which results in something like the following?
SCSS:
#my-fancy-selector [data-is-liked] {
#include fontcustom("heart");
}
.another>.fancy+.foo-selector {
#include fontcustom("foo");
}
.another>.fancy+.baz-selector {
#include fontcustom("baz");
}
/* no clue about the following: */
selectorsUsingFontcustom();
CSS:
#my-fancy-selector [data-is-liked]:before {
content:"\2764";
}
.another>.fancy+.foo-selector:before {
content:"\2765";
}
.another>.fancy+.baz-selector:before {
content:"\2767";
}
/* selectorsUsingFontcustom() should return sth like the following then: */
#my-fancy-selector [data-is-liked]:before,
.another>.fancy+.foo-selector:before,
.another>.fancy+.baz-selector:before {
font-family: fontcustom;
color: red;
/* ... */
}
Any ideas?
Use #extend with placeholder selectors like this:
%heart {
color: red;
}
h1 {
#extend %heart;
font-size: 3em;
}
h2 {
#extend %heart;
font-size: 2em;
}
li {
#extend %heart;
text-decoration: strikethrough;
}
Output:
h1, h2, li {
color: red;
}
h1 {
font-size: 3em;
}
h2 {
font-size: 2em;
}
li {
text-decoration: strikethrough;
}