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.
Related
Current I have the below, but it would be great to easily loop through the break points if possible.
#for $i from 1 through 200 {
.m-#{$i}px {
margin: 1px * $i !important;
&-sm {
#include media-breakpoint-up(sm) {
margin: 1px * $i !important;
}
}
&-md {
#include media-breakpoint-up(md) {
margin: 1px * $i !important;
}
}
&-lg {
#include media-breakpoint-up(lg) {
margin: 1px * $i !important;
}
}
&-xl {
#include media-breakpoint-up(xl) {
margin: 1px * $i !important;
}
}
&-xxl {
#include media-breakpoint-up(xxl) {
margin: 1px * $i !important;
}
}
}
}
There is more of this code to cover:
mt
mx
my
mr
ml
Plus I have something similar setup for padding and a few other elements, it would be great to reduce the code as it is taking a fair while to generate the code.
Any help would be great.
You can store your breakpoints in a list and use a #each loop:
$breakpoints: sm, md, lg, xl, xxl;
#for $i from 1 through 200 {
.m-#{$i}px {
margin: 1px * $i !important;
#each $breakpoint in $breakpoints {
&-#{$breakpoint} {
#include media-breakpoint-up($breakpoint) {
margin: 1px * $i !important;
}
}
}
}
}
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;
}
}
}
}
Is it possible to simplify and make this more easily maintained with sass?
.padding-8 { padding: 8px !important; }
.padding-10 { padding: 10px !important; }
.padding-top-0 { padding-top: 0 !important; }
.padding-top-3 { padding-top: 3px !important; }
.padding-bottom-0 { padding-bottom: 0 !important; }
.padding-bottom-3 { padding-bottom: 3px !important; }
.padding-bottom-5 { padding-bottom: 5px !important; }
.margin-top-0 { margin-top: 0 !important; }
.margin-top-5 { margin-top: 5px !important; }
.margin-bottom-0 { margin-bottom: 0 !important; }
.margin-bottom-5 { margin-bottom: 5px !important; }
etc..
Is it also possible to write something like .padding-$dir-$value { padding-$dir: $value px !important; } so you can use a class with f.ex padding-left-13?
Make two maps with the properties you want to mix.
For each combination create a placeholder class. I think it's appropiate if you don't want to create a full list of classes that maybe you won't use. This is the modular-friendly use.
Extend the class in your element.
$paddingDirection:('right','left','top','bottom');
$paddingLength:(15,30,45,50);
#each $dir in $paddingDirection{
#each $len in $paddingLength{
%padding-#{$dir}-#{$len}{ padding-#{$dir}: #{$len}px;}
}
}
.any-class{
#extend %padding-right-30;
}
/*output*/
.any-class {
padding-right: 30px;
}
Original answer here
you can use this: (enhanced the above solution)
$paddingDirection:('right','left','top','bottom');
$paddingLength:(15,30,45,50);
// if you only wants to use "padding" without postfix
#each $len in $paddingLength {
.padding-#{$len} { padding: #{$len}px;}
}
// if you want to use padding-left, padding-right etc.
#each $dir in $paddingDirection {
#each $len in $paddingLength {
.padding-#{$dir}-#{$len} { padding-#{$dir}: #{$len}px;}
}
}
usage:
<div class="padding-15"></div>
<div class="padding-left-15 padding-top-15"></div>
I have a mixin like this:
.lib-vw (#prop, #value) {
#result: (#value / ((1440 * 0.01) * 1px)) * 1vw;
#{prop}: #value;
#{prop}: #result;
}
and use it like this:
div {
.lib-vw(margin-top, 18px);
}
output is something like this:
div {
margin-top: 18px;
margin-top: 1.25vw;
}
Here's demo
Now i want .lib-vw() support multiple values, like this:
.lib-vw(margin, 18px 10px);
.lib-vw(margin, 18px 10px 20px);
.lib-vw(margin, 18px 10px 20px 30px);
how to update (or create new one) my mixin to support multiple values?
Thanks in advance.
You just have to make mixin, which takes 4 values and combines them to one:
.lib-vw (#prop, #value1, #value2, #value3, #value4) {
#result1: (#value1 / ((1440 * 0.01) * 1px)) * 1vw;
#result2: (#value2 / ((1440 * 0.01) * 1px)) * 1vw;
#result3: (#value3 / ((1440 * 0.01) * 1px)) * 1vw;
#result4: (#value4 / ((1440 * 0.01) * 1px)) * 1vw;
#result: #result1 #result2 #result3 #result4;
#value: #value1 #value2 #value3 #value4;
#{prop}: #value;
#{prop}: #result;
}
div {
.lib-vw(margin, 18px, 18px, 18px, 18px);
}
Demo
The Lists Less plugin provides "vector arithmetic" feature. I.e. if you use the plugin your original code will work for multiple values as well:
.lib-vw(#prop, #value) {
#{prop}: #value;
#{prop}: 1vw * #value / (1440 * 0.01);
}
div {
.lib-vw(margin-top, 18px);
}
span {
.lib-vw(margin, 11px 22px 33px 44px);
}
CSS result:
div {
margin-top: 18px;
margin-top: 1.25vw;
}
span {
margin: 11px 22px 33px 44px;
margin: 0.76388889vw 1.52777778vw 2.29166667vw 3.05555556vw;
}
There was a task of converting pixels to vw for screens > 767px, I used mixins:
#sm_: ~'(min-width: 768px)';
.vw(#prop, #value) {
#vw:round((#value*100/1726),4);
#{prop}:1px*#value;
#media #sm_{
#{prop}:1vw*#vw;
}
}
.vw2(#prop, #value1, #value2) {
#vw1:round((#value1*100/1726),4);
#vw2:round((#value2*100/1726),4);
#{prop}:1px*#value1 1px*#value2;
#media #sm_{
#{prop}:1vw*#vw1 1vw*#vw2;
}
}
.vw3(#prop, #value1, #value2, #value3) {
#vw1:round((#value1*100/1726),4);
#vw2:round((#value2*100/1726),4);
#vw3:round((#value3*100/1726),4);
#{prop}:1px*#value1 1px*#value2 1px*#value3;
#media #sm_{
#{prop}:1vw*#vw1 1vw*#vw2 1vw*#vw3;
}
}
.vw4(#prop, #value1, #value2, #value3, #value4) {
#vw1:round((#value1*100/1726),4);
#vw2:round((#value2*100/1726),4);
#vw3:round((#value3*100/1726),4);
#vw4:round((#value4*100/1726),4);
#{prop}:1px*#value1 1px*#value2 1px*#value3 1px*#value4;
#media #sm_{
#{prop}:1vw*#vw1 1vw*#vw2 1vw*#vw3 1vw*#vw4;
}
}
Use it like this:
.block-one{
.vw(margin, 20);
}
.block-two{
.vw2(margin, 20, 30);
}
.block-three{
.vw3(margin, 20, 30, 40);
}
.block-four{
.vw4(margin, 20, 30, 40, 50);
}
CSS output:
.block-one {
margin: 20px;
}
#media (min-width: 768px) {
.block-one {
margin: 1.1587vw;
}
}
.block-two {
margin: 20px 30px;
}
#media (min-width: 768px) {
.block-two {
margin: 1.1587vw 1.7381vw;
}
}
.block-three {
margin: 20px 30px 40px;
}
#media (min-width: 768px) {
.block-three {
margin: 1.1587vw 1.7381vw 2.3175vw;
}
}
.block-four {
margin: 20px 30px 40px 50px;
}
#media (min-width: 768px) {
.block-four {
margin: 1.1587vw 1.7381vw 2.3175vw 2.8969vw;
}
}
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;
}