Is it possible to check if size is bigger than or less than is SCSS?
I want to transform this:
#function triangle($size, $color, $direction) {
#if $direction == up {
//apply rules
} #else if $direction == right {
//apply rules
}
}
To this:
#function triangle($size, $color, $direction) {
#if $direction >= up {
#return ...
} #else if $direction >= right {
#return ...
}
}
Sass does support relational operators, but in the case of $direction >= up it will return an error. You can't check if something is bigger than up or right. In the case of $size you can compare it to other number if it's a number.
Error: Undefined operation "9 >= left".
╷
2 │ #if $direction >= left {
│ ^^^^^^^^^^^^^^^^^^
╵
Related
I am trying to write a mixin that will take the HEX color code and convert it to HSL. Every time the code is compiled it gives an error. tried to use #return to pass the variable but that also not working. help me fix the code.
Thanks in advance.
Error:
Compilation Error
Error: Undefined variable.
╷
43 │ $hue : $hue * 60;
│ ^^^^
╵
code inside _mixin.scss:
#mixin hex-to-hsl($hex) {
$red: red($hex);
$green: green($hex);
$blue: blue($hex);
$max: max($red, $green, $blue);
$min: min($red, $green, $blue);
$delta: calc($max - $min);
$lightness: calc(($max + $min) / 2);
#if ($delta == 0) {
$hue: 0;
$saturation: 0;
} #else {
#if ($lightness < 0.5) {
$saturation : calc($delta / ($max + $min));
} #else {
$saturation : calc($delta / (2 - $max - $min));
}
#if ($red == $max) {
$hue : calc(($green - $blue) / $delta);
} #else if ($green == $max) {
$hue : calc(2 + ($blue - $red) / $delta);
} #else {
$hue : calc(4 + ($red - $green) / $delta);
}
$hue : $hue * 60;
#if ($hue < 0) {
$hue : calc($hue + 360);
}
}
color: hsl($hue, $saturation * 100%, $lightness * 100%);
}
code in main.scss
$main-color: #4F6D7A;
.text3 {
#include hex-to-hsl($main-color);
}
How could you convert this function written in SASS to LESS? It converts pixelvalues to rem.
#function unit($number) {
#return $number / ($number * 0 + 1);
}
#function getRems($Pixels, $_base-fontsize:16px) {
$getRems: ();
#each $pixel in $Pixels {
$getRems: append($getRems, strip-unit($pixel) / strip-unit($_base-
fontsize) + rem,'space');
}
#return $getRems;
}
.image {
padding:getRems(250px 25px 10px 50px);
}
I'm trying to think of a simple way to invert the darken/lighten color function using a variable. Something like so...
$invert_switch: off;
And...
#if $invert_switch == "on" {
darken == lighten
lighten == darken
} #else {
darken == darken
lighten == lighten
}
I know that's not proper code, I'm just trying to explain it very simply.
If this was used...
background: darken($bg, 10%);
color: lighten($txt, 50%);
How could I flip that, so it would be...
background: lighten($bg, 10%);
color: darken($txt, 50%);
Or maybe there is an easier way?
I try to change the name of the functions darken and lighten but I can't. The problem I have found is that SASS haven't something like #break or #continue to exit for the function and do nothing, my idea was the following code but when the custom fuction coincides with the SASS function goes to a infinite loop:
$invert_switch: on;
#function darken($color, $amount){
#if $invert_switch == on {
#return lighten($color, $amount);
}
#else {
#return darken($color, $amount);
}
}
#function lighten($color, $amount){
#if $invert_switch == on {
#return darken($color, $amount);
}
#else {
#return lighten($color, $amount);
}
}
h1{
color: darken(red, 10%);
}
p{
color: lighten(red, 10%);
}
I change the name of the functions adding a underscore to work:
$invert_switch: on;
#function _darken($color, $amount){
#if $invert_switch == on {
#return lighten($color, $amount);
}
#else {
#return darken($color, $amount);
}
}
#function _lighten($color, $amount){
#if $invert_switch == on {
#return darken($color, $amount);
}
#else {
#return lighten($color, $amount);
}
}
h1{
color: _darken(red, 10%);
}
p{
color: _lighten(red, 10%);
}
Maybe someone can improve this code using the proper names of functions
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.
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