I wonder if there is a way to compose/decompose CSS shorthand with Sass. For example, I have:
$standardPadding: 4px 2px 1px 2px;
and I want to have:
$someSpecificPadding: doSomething($standardPadding, top, 2px);
then the final value of $someSpecificPadding is 2px 2px 1px 2px.
Is there existing any doSomething in Sass (scss) or Less ?
You could use this code to achieve your desired result
#function do_something($list, $args...) {
#each $mini-list in $args {
$value: nth($mini-list, 2);
$position: nth($mini-list, 1);
#if $position == top {
$list: set-nth($list, 1, $value);
}
#else if $position == right {
$list: set-nth($list, 2, $value);
}
#else if $position == bottom {
$list: set-nth($list, 3, $value);
}
#else if $position == left {
$list: set-nth($list, 4, $value);
}
}
#return $list;
}
The function can be used to change single or multiple positions in the shorthand value as shown below
$standardPadding: 4px 2px 1px 2px;
//change both top and bottom values
$standardPadding: do_something($standardPadding, top 18px, bottom 15px);
h2 {
border-width: $standardPadding; //returns 18px 2px 15px 2px
}
h3 {
//changes only top value
border-width: do_something($standardPadding, top 12px); //returns 12px 2px 15px 2px
}
Hope this helps.
You can use a mixin somewhat like this
#mixin padding($top, $left: $top, $bottom: $top, $right: $left){
padding-top: $top;
padding-left: $left;
padding-bottom: $bottom;
padding-right: $right;
}
Related
I've been staring at this for way too long, I really don't see what I did wrong here
#mixin border-stroke($val){
#if $val == light {border-stroke: 1px solid black;}
#else if $val == medium {border-stroke: 3px solid black;}
#else if $val == heavy {border-stroke: 6px solid black;}
#else {border-stroke: none;}
Your mixin is setting the (non-existent) CSS property border-stroke instead of just border.
Change it to this:
#mixin border-stroke($val) {
#if $val == light { border: 1px solid black; }
#else if $val == medium { border: 3px solid black; }
#else if $val == heavy { border: 6px solid black; }
#else { border: none; }
I want to remove hyphen(-) if map $spacers has key called null.
means it return only the className is this case it called m without hyphen(-).
$spacers: (
0: 0,
1: 1px,
2: 2px,
null: 3px,
4: 4px,
8: 8px
) !default;
#each $prop, $abbrev in (margin: m) {
#each $size, $length in $spacers {
.#{$abbrev}-#{$size} {
#{$prop}: $length !important;
}
}
}
the result that I get after compiling :
.m-0 {
margin: 0 !important;
}
.m-1 {
margin: 1px !important;
}
.m-2 {
margin: 2px !important;
}
// hyphen(-) shouldn't be here
.m- {
margin: 3px !important;
}
.m-4 {
margin: 4px !important;
}
.m-8 {
margin: 8px !important;
}
Use #if and #else.
#each $prop, $abbrev in (margin: m) {
#each $size, $length in $spacers {
#if $size {
.#{$abbrev}-#{$size} {
#{$prop}: $length !important;
}
} #else {
.#{$abbrev} {
#{$prop}: $length !important;
}
}
}
}
I need a SCSS mixin to make borders with. In this mixin, the $position variable, should be optional:
#mixin border($position, $width, $style, $color) {
#if $position {
border-#{$position}: $width $style $color;
} #else {
border: $width $style $color;
}
}
This is necessary so that I can use it in these 2 types of cases:
.box {
#include border('bottom', 1px, solid, #999) /*with position*/;
}
and
.button {
#include border(1px, solid, #999); /*without position*/
#include border-radius(9999999px);
padding: .5rem .75rem;
font-size: 14px;
}
For the second case, the compiler throws the error:
Mixin border is missing argument $color.
What am I doing wrong?
You can use default parameter for $position. I used the false boolean for default variable.
#mixin border($width, $style, $color, $position: false) {
#if $position {
border-#{$position}: $width $style $color;
} #else {
border: $width $style $color;
}
}
And you can use like this:
.button {
#include border(1px, solid, #999);
padding: 0.5rem 0.75rem;
font-size: 14px;
}
If you don't send any parameter, it enters else state (like above). If you send a position parameter, it enters the if state. Like this:
.button {
#include border(1px, solid, #999, right);
padding: 0.5rem 0.75rem;
font-size: 14px;
}
Also, keep in mind that optional parameters must come after mandatory parameters. This is a rule.
SCSS
#function space($parent-width, $width...) {
#return $width + $parent-width;
}
CSS
.box {
padding: space(2px, 25px 40px 50px 60px);
}
Result
.box {
padding: 25px 40px 50px 60px2px;
}
I wanted to create a simple function that execute the below result:
Expected result
.box {
padding: 27px 42px 52px 62px;
}
Your function should be:
#function space($parent-width, $width...) {
$result: ();
#for $i from 1 through length($width) {
$result: append($result, nth($width, $i)+$parent-width);
}
#return $result;
}
See live example.
I'm learning SASS/SCSS and am playing around with mixins, trying to get my head around the different accepted variations that are available.
Below is what I'm using to create box-shadows, I'm using an if and else statement to display ether with or without the inset property.
#mixin box-shadow($inset: false, $horizontal: 0px, $vertical: 1px, $blur: 2px, $color: 000) {
#if $inset {
box-shadow: $inset $horizontal $vertical $blur $color;
}
#else {
box-shadow: $horizontal $vertical $blur $color;
}
}
I'm wondering how to set the $inset: false to true for this to work as intended.
Or is there a more efficient way to achieve what I'm trying to do?
I think that instead of including the variable $inset, just include the keyword inset. This way, you can pass true or false and it will parse properly:
#mixin box-shadow($inset: false, $horizontal: 0px, $vertical: 1px, $blur: 2px, $color: 000) {
#if $inset {
box-shadow: inset $horizontal $vertical $blur $color;
}
#else {
box-shadow: $horizontal $vertical $blur $color;
}
}
.no-inset {
#include box-shadow($inset: false);
}
.inset {
#include box-shadow($inset: true);
}
Output:
.no-inset {
box-shadow: 0px 1px 2px 0;
}
.inset {
box-shadow: inset 0px 1px 2px 0;
}