I'm trying to make an if statement for scss key and value.
for example:
$directionLang: rtl;
#function rightOrLeft($directionLang) {
#if $directionLang == rtl {
#return 'left: 10px';
}
#else {
#return 'margin-left: 230px';
}
}
.arrow-icon {
#{rightOrLeft($directionLang)};
}
The problem is inside the .arrow-icon.
I get an error:
Error: property "#{rightOrLeft($directionLang)}" must be followed by a
':'.
Any suggestions?
Thanks!!
In that case, you should use SASS/SCSS #mixin instead of #function.
#function in SASS/SCSS should be used to provide/calculate value e.g.
.arrow-icon {
margin-left: functionName(args);
}
#mixin is more powerful but also fits to your case when you want to get whole different css rules.
Example snippet with your code:
HTML
<span class="arrow-icon">←</span>
SCSS
$directionLang: rtl;
//$directionLang: ltr; //uncomment for test
#mixin rightOrLeft($directionLang) {
#if $directionLang == "rtl" {
left: 10px;
}
#else {
margin-left: 230px;
}
}
.arrow-icon {
#include rightOrLeft($directionLang);
}
Live example
The functions are used to Get a value and you have to call them as value for your properties.
In your case you have to use mixin and include them in your class:
https://sass-lang.com/documentation/at-rules/mixin
Related
Let's say for instance we have the next sass partial file:
//_colors.scss
$foo: red;
And we "use" it on another file:
//test.scss
#use './colors'
.test{
color: colors.$foo;
}
All good, but what if I would like to use/get the value in a dynamic way within a mixin? something like:
//test.scss
#use './colors'
#mixin getColor($type){
color: colors[$type]; //JavaScript example, * don't actually work *.
or
color: #{colors.{$type}; * don't work neither *
//The above returns `color: colors.foo` instead of `color: red` on compilation.
or
color: colors.#{$type}; * doesn't work neither *
}
.test{
#include getColor(foo);
}
Is it possible? thanks for the help!
For a color, I really much prefer a function so it can be used on any property (color, background-color, border, box-shadow...)
I usually declare a string equivalent to variable names, then define them inside a map. Finally this map is accessible via a dedicated function.
Something like
//_colors.scss
#use 'sass:map';
$favoriteRed: "favoriteRed";
$favoriteYellow: "favoriteYellow";
$favoriteBlue: "favoriteBlue";
$MyColors: (
$favoriteRed: #c00,
favoriteYellow: #fc0,
$favoriteBlue: #0cf
);
#function my-color($tone: $favoriteRed) {
#if not map.has-key($MyColors, $tone) {
#error "unknown `#{$tone}` in MyColors.";
}
#else {
#return map.get($MyColors, $tone);
}
}
This _colors.scss generates no code at all, it can be imported anywhere at no cost.
Then, in a specific style file:
//test.scss
#use './colors' as *;
//inside a mixin
#mixin special-hue-component($tone){
div.foo {
span.bar {
border-color: my-color($tone);
}
}
}
//or directly
.foobartest {
color: my-color($favoriteBlue);
}
How do I conditionally apply a mixin if --my-custom-var is present? For example:
.test {
#if var(--my-custom-var) {
#include someExampleMixin()
}
#if var(--another-custom-var) {
#include someExampleMixin()
}
}
I don't care what the value of the --my-custom-var is but just want to check its existence.
Sass has introduced the variable-exists() function already in alpha. Be aware that Sass can only check for Sass variables. Therefor if you'd really want to use CSS variables you need to define the content of your CSS variable inside a Sass variable, for example $sassVar: /* content */; --cssVar: $sassVar;. Be also aware that the #if statement must be inside a #mixin or a #function to work. I posted a working example below, but here is aslo my Codepen Example since Stack doesn't compile Sass.
Note:
I used "null" inside my $var which basically expresses that there
is no content within this variable, you can pass whatever you
want it won't affect the outcome unless you remove or change the actual
variable.
You can use multiple #if statements which I commented out in this example, but there should always follow an #else statement.
$var: null;
:root {
--someVar: $var;
}
#mixin checkForVariable {
#if variable-exists(var){
body {
background-color: red;
}
}
// #if variable-exists() {
// ...
// }
// #if variable-exists() {
// ...
// }
#else {
body {
background-color: blue;
}
}
}
#include checkForVariable;
In JavasSript, we can get arguments like this:
function ab(a,b){
console.log(arguments[0],arguments[1]);
}
ab(1,2);
// 1 2
I want to know if there is any way to get SCSS #mixin variables as a list just like how we can do it in JavaScript?
#mixin ab($a:1,$b:2){
#debug arguments; // stuff like this
}
You are looking for something like this?
#mixin grid($flex) {
#if $flex {
#include flex;
} #else {
display: block;
}
}
#include grid(true);
Searched but can't find an answer..
I have an element which gets generated (by an external platform) with the following classes: p-button and button.
Now the SCSS is like this:
.p-button {
&.button {
margin: 10px;
}
}
But I want to refactor using mixin includes (this is a big project so there is no other way of making this code better except using mixins). The mixin takes the given selector and applies a . to it. I can't change the mixin, as it is used by many other teams, so I can't pass the ampersand together with the selector. I tried this:
.p-button {
& {
#include button-appearance("button") {
margin: 10px;
}
}
}
But that doesn't work (puts a space between it). You can't do this:
.p-button {
&#include button-appearance("button") {
margin: 10px;
}
}
Anyone have a clue?
EDIT: Here is the mixin
#mixin button-appearance(
$appearance-class,
$show,
$background-color,
$background-image,
$background-position) {
$sel: $button-selector;
#if $appearance-class {
$sel: $sel + '.' + $appearance-class;
}
#{$sel} {
#include normalized-background-image($background-image);
#include show($show);
background-color: $background-color;
background-position: $background-position;
}
#content;
}
EDIT 2: Here is the $button-selector (I can not edit this in the platform, but maybe overwrite it in my own project?)
$button-class: 'p-button';
$button-selector: '.#{$button-class}';
Everyone, finally found the solution. I just removed the &.button from the .p-button mixin include and now it works:
#include button-appearance ("button") { *styles* }
#include button-appearance () { *styles* }
Edited the answer after the original question was edited adding the used and un modifiable mixin
The original mixin does not append the ‘#content’ passed to the mixin to the generated selector. So if you cannot modify the original mixin, the only way is to add your properties outside the mixin. According to the mixin the selector will match a predefined ‘$button-selector’ variable, so it won’t use your class.
So, if you want to use the same class defined in ‘$button-class’, try the following:
#{$button-selector}.button {
margin: 10px;
}
Will output:
.p-button.button {
margin: 10px;
}
After searching a lot in difference between #function and #mixin I ended up here.
Is there any advantage of using #mixin over #funcion or vice versa. In what context they'll be different, how to use them interchangeably, please come up with examples.
Functions are useful specifically because they return values. Mixins are nothing like functions--they usually just provide valuable blocks of code.
Usually, there are cases where you might have to use both.
For example, if I wanted to create a long-shadow with SASS, I would call a function like so:
#function makelongshadow($color) {
$val: 0px 0px $color;
#for $i from 1 through 200 {
$val: #{$val}, #{$i}px #{$i}px #{$color};
}
#return $val;
}
Which would then be called with this mixin:
#mixin longshadow($color) {
text-shadow: makelongshadow($color);
}
Which provides us with the actual code.
That gets included in the element:
h1 {
#include longshadow(darken($color, 5% ));
}
#function is useful when you want to reuse it on different CSS properties.
Example, You have dynamic values that you want to use on both height and min-height, then using #function is the one you would use:
#function dynamic-height($height, $padding) {
#return $height + $padding;
}
.foo {
min-height: dynamic-height(300px, 30px);
}
.bar {
height: dynamic-height(300px, 30px);
}
But if you want to reuse it with same CSS properties, then you would use a #mixin:
#mixin dynamic-height($height, $padding) {
min-height: $height;
padding: $padding;
}
.foo {
#include #dynamic-height(300px, 30px);
}
think of #mixin as it is just a #function that returns a block of style rules.
also, you can use placeholders (like %selector) and #extend