I have a mixin that converts px to rem PX TO REM, I have this code:
.button {
#include rem(font-size, 24px);
#include rem(padding, 10px);
#include rem(border-radius, 5px);
}
This would produce this CSS:
.button {
font-size: 1.5rem;
padding: 0.625rem;
border-radius: 0.3125rem; }
But I'd like to use some mixins from compass and for example I want to use border-radius from compass
.box {
#include border-radius(10px);
}
And it would generate this CSS:
.box {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; }
Is there a way to do something like this:
.box {
#include rem(#include border-radius(10));
}
You can't add two mixins together the way you'd like. So you just have to make the rem mixin do what you want it to do. So I wrote new code to handle that for you.
#function parseInt($n) {
#return $n / ($n * 0 + 1);
}
#mixin rem($property, $values, $prefix: false) {
$px: ();
$rem: ();
#each $value in $values {
#if $value == 0 or $value == auto or unit($value) == "%" {
$px: append($px, $value);
$rem: append($rem, $value);
} #else {
$unit: unit($value);
$val: parseInt($value);
#if $unit == "px" {
$px: append($px, $value);
$rem: append($rem, ($val / 16 + rem));
}
#if $unit == "rem" {
$px: append($px, ($val * 16 + px));
$rem: append($rem, $value);
}
}
}
#if $px == $rem {
#{$property}: $px;
} #else if $prefix == true {
#{-moz- + $property}: $px;
#{-moz- +$property}: $rem;
#{-webkit- +$property}: $px;
#{-webkit- +$property}: $rem;
#{$property}: $px;
#{$property}: $rem;
} #else {
#{$property}: $px;
#{$property}: $rem;
}
}
Now all you have to do add prefixes to any property is add the value true to the end of the mixin like so...
#include rem(border-radius, 10px, true);
Otherwise if you don't want any prefixs on property like fon-size or something you just don't add a last value like so...
#include rem(font-size, 10px);
I have a working demo here...
*Also on a side note I modified this mixin to handle percentages too.
Related
I'm trying to create a mixin that allows me to write code blocks flexibly depending on whether body has a certain class.
#mixin when($class) {
body.#{$class} & {
#content;
}
}
Use Cases
#hero {
#include when('theme--dark') {
span {
content: 'Good Evening';
}
}
}
#hero {
#include when('page-landing') {
button.cta {
padding: 3rem 5rem;
font-size: 3rem;
background-color: $green;
}
}
}
even better if the following can be achieved
#mixin when($parent, $class) {
#{$parent}.#{$class} & {
#content;
}
}
#hero {
#include when('body','page-landing') {
button.cta {
padding: 3rem 5rem;
font-size: 3rem;
background-color: $green;
}
}
}
non of the previous codes work, not even certain of the syntax but wondering if something similar can be produced, any help is appreciated thanks!
Though your approach is absolutely fine, here is a slightly cleaner implementation, that grants a little more flexibilty when it comes to the number of selectors you want to check for.
#mixin when($selectors...) {
$n: "";
#each $selector in $selectors {
$n: str-insert($n, "#{$selector}", str-length($n) + 1);
}
#{$n} {
#content;
}
}
#hero {
#include when('body', '[dark-mode=true]', '.primary') {
color: #fff;
}
}
I'm trying to do a mixin that have optional arguments. This is a simplified version:
#mixin marginCalculator($size, $size2:"") {
margin: $size * 1px unquote($size2 * 1px);
}
I'm just passing in numbers as arguments. But i only want the first one to be mandatory. No problem if it only would output the number but i need to add a unit to it.
As can be seen in the snippet above i'm trying to multiplicate 1px with "" which ouputs an error message. As it should! But i was hoping for the empty quote to be returned. Is there another way to achieve this?
You have 2 options:
Check the type of the value being passed in
#mixin marginCalculator($size, $size2: "") {
margin: ($size * 1px) (if(type-of($size2) == number, $size2 * 1px, null));
}
Loop over a list
This is a much better solution since it will allow you to gracefully handle 3-value margins as well.
#mixin marginCalculator($size...) {
$xs: ();
#each $s in $size {
$xs: append($xs, $s * 1px);
}
margin: $xs;
}
.foo {
#include marginCalculator(1);
#include marginCalculator(1, 2);
#include marginCalculator(1, 2, 3);
}
Alternately:
#mixin marginCalculator($sizes) {
$xs: ();
#each $s in $size {
$xs: append($xs, $s * 1px);
}
margin: $xs;
}
.foo {
#include marginCalculator(1);
#include marginCalculator(1 2);
#include marginCalculator(1 2 3);
}
Output:
.foo .foo {
margin: 1px;
margin: 1px 2px;
margin: 1px 2px 3px;
}
You can use an if() function to check if it has no value:
#mixin marginCalculator($size, $size2:"") {
margin: ($size * 1px) if($size2!="", $size2 * 1px, null);
}
Here, i check it against the default, an empty string, and return the calculation if it isn't that, and null if it is. If we return an empty string, it'll cause a CSS error.
So I'm trying to pass a modifier into a SASS mixin:
$headerHeight: 40px;
#mixin hh($prop, $mod: " + 0") {
#{$prop}: #{$headerHeight + $mod};
}
.something {
#include hh(padding-top, " * 2"); // Should return padding-top: 80px;
}
I keep getting things like padding-top: 40px + 0; no matter how many times I try and unquote it. Is it not possible to have the math string evaluated inside a mixin?
I've tried it without the px on $headerHeight, but that doesn't seem to work either.
I can do something like this:
#mixin hh($prop, $aMod: 0px, $mMod: 1) {
#{$prop}: ($headerHeight + $aMod) * $mMod;
}
But I'd prefer to just be able to put any arbitrary math string in there instead of having to break up the additive and multiplicative aspects of the math.
Thanks
Unfortunately, you would have to do something like create functions that act as operators for you and call them with the call() function inside your mixin:
#function plus($i, $j: 0) {
#return $i + $j;
}
#function times($i, $j: 0) {
#return $i * $j;
}
$headerHeight: 40px;
#mixin hh($prop, $func, $mod) {
#{$prop}: call($func, $headerHeight, $mod);
}
.something {
#include hh(padding-top, 'plus', 2); // 42px
#include hh(padding-bottom, 'times', 2); // 80px
}
I don't think that this is possible, you could do something like the following however to achieve the same goal:
$headerHeight: 40;
#mixin hh($prop, $mod, $modval) {
#if $mod == '+' {
#{$prop}: $headerHeight + $modval * 1px;
}
#if $mod == '-' {
#{$prop}: $headerHeight - $modval * 1px;
}
#if $mod == '*' {
#{$prop}: $headerHeight * $modval * 1px;
}
#if $mod == '/' {
#{$prop}: $headerHeight / $modval * 1px;
}
}
.something {
#include hh(padding-top, '*', 2); // Should return padding-top: 80px;
}
http://sassmeister.com/gist/be55fe73c307d0ad018c
see this codepen
it is super basic
$span1Width: 10;
$marginWidth: 5;
#mixin span-width($spannr) {
width: $span1Width * $spannr *1%;
*width: $marginWidth* $spannr -1 *1%;
}
div{
#use span-width(10);
}
resulting in "empty rule" when doing a analyse css with codepen.
If you check the example on sass documentation on how to use mixins you can see:
$color: white;
#mixin colors($color: blue) {
background-color: $color;
#content;
border-color: $color;
}
.colors {
#include colors { color: $color; }
}
So you should use #include and { } instead. Like (using default 5 in this example):
$span1Width: 10;
$marginWidth: 5;
#mixin span-width($spannr: 5) {
width: $span1Width * $spannr *1%;
*width: $marginWidth* $spannr -1 *1%;
}
div{
#include span-width{ spannr: 10};
}
That should give you the correct result
I'm trying to loop through a list of values in Sass and use interpolation of the current key to dynamically output class names that utilize #include and #extend, respectively.
Here is a pen showing the problem, simplified. http://codepen.io/ghepting/pen/vBmLy
As you can see in the markup, I have tried including the "_" inside of the interpolated string as well as outside of it. Is there something I'm missing to work around this limitation of how Sass supports interpolation?
(Note: the OP's pen has disappeared. This is not the original code found in the pen, but a rough approximation of the problem)
$error-light: red;
$error-dark: darken(red, 10%);
$success-light: green;
$success-dark: darken(green, 10%);
$dialogs: error, success;
#each $d in $dialogs {
.#{$d} {
background: $#{$d}-light;
}
}
Interpolation doesn't work on mixins or variables at this point in time. You'll have to come up with a different way to achieve your goal.
As of Sass 3.3, you can use mappings for this purpose for variables:
$dialogs:
( error:
( light: red
, dark: darken(red, 10%)
)
, success:
( light: green
, dark: darken(green, 10%)
)
);
#each $name, $colors in $dialogs {
.#{$name} {
color: map-get($colors, dark);
}
}
And for functions:
#function green() {
#return lighten(green, 10%);
}
#function red() {
#return lighten(red, 10%);
}
#mixin my-bg($function-name) {
background: call($function-name);
}
.foo {
#include my-bg('red');
}
Alternative workaround (for a particular use case):
https://sass-lang.com/documentation/at-rules/mixin#passing-arbitrary-arguments
💡 Fun fact:
Because an argument list keeps track of both positional and keyword arguments, you use it to pass both at once to another mixin. That makes it super easy to define an alias for a mixin!
If you are interested in mixin interpolation because you have a group of mixins, like this:
//_mixins.scss
#mixin text-style-1($args...){ //sass here }
#mixin text-style-2($args...){ //sass here }
#mixin text-style-3($args...){ //sass here }
//_text.scss
.text-style-1 {
#include text-style-1;
}
.text-style-1-contrast {
#include text-style-1($contrast: true);
}
.text-style-2 {
#include text-style-2;
}
.text-style-2-contrast {
#include text-style-2($contrast: true);
}
We can take advantage of passing arbitrary arguments and use an alias for the group:
//_mixins.scss
#mixin text-style-1($args...){ //sass here }
#mixin text-style-2($args...){ //sass here }
#mixin text-style-3($args...){ //sass here }
#mixin text($mixin, $args...) {
#if $mixin == 'style-1' { #include text-style-1($args...); }
#else if $mixin == 'style-2' { #include text-style-2($args...); }
#else if $mixin == 'style-3' { #include text-style-3($args...); }
}
//_text.scss
$text-styles: 'style-1', 'style-2', 'style-3';
#each $style in $text-styles {
.text-#{$style} {
#include text($style);
}
.text-#{$style}-contrast {
#include text($style, $contrast: true);
}
}
Ran into this issue of trying to include an interpolated variable inside a mixin and was able to resolve it with placeholders:
%color-scheme-dark-bg-1 { background-color: #4e5163; }
%color-scheme-dark-color-1 { color: #4e5163 !important; }
%color-scheme-light-bg-1 { background-color: #c7c8ce; }
%color-scheme-dark-bg-2 { background-color: #fd6839; }
%color-scheme-dark-color-2 { color: #fd6839 !important; }
%color-scheme-light-bg-2 { background-color: #fecfc1; }
.card_color {
#mixin CardColorScheme($arg: 1) {
.borderPercent {
#extend %color-scheme-dark-bg-#{$arg};
}
.border {
#extend %color-scheme-light-bg-#{$arg};
}
ul li:before {
#extend %color-scheme-dark-color-#{$arg};
}
.percent {
#extend %color-scheme-dark-color-#{$arg};
}
.heading {
#extend %color-scheme-dark-color-#{$arg};
}
}
&--scheme {
&-1 {
#include CardColorScheme(1);
}
&-2 {
#include CardColorScheme(2);
}
}
}
Hat tip to: https://krasimirtsonev.com/blog/article/SASS-interpolation-in-a-name-of-variable-nest-variables-within-variables