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;
}
}
}
}
}
Related
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;
}
}
}
}
Considering this following scss code:
#mixin homeSlider(
$dim: 150px,
$h1: "h1 { font-size: 4em; margin-top: 0; }"
){
section {
margin-top: -$dim;
}
$h1;
}
#include homeSlider( $dim: 50px, $h1: "h1 { font-size: 3em; margin-top: 0; }" )
I need to know how is it possible to achieve my goal
Try this
#mixin homeSlider($dim, $h1-font-size){
section {
margin-top: -$dim;
h1 {
font-size: $h1-font-size;
margin-top: 0;
}
}
}
#include homeSlider(50px, 3em;) /* $dim = 50px - $h1-font-size = 3em; */
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>
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 checked the following article in which it presented the following mixing:
rem font size with pixel fallback
#function calculateRem($size) {
$remSize: $size / 16px;
#return $remSize * 1rem;
}
#mixin font-size($size) {
font-size: $size;
font-size: calculateRem($size);
}
I feel very confortable using rem on my projects, after placing font-size: 62.5% on the html so 1rem = 10pixels.
But I would like to know if there is a mixing or a method to create a pixel fallback for any rem used in a whole project, as for example:
&:before{
color: white;
margin: 0 0.5rem 0 0;
left: 0;
text-align: center;
top: 0;
width: 3.2rem;
}
In this case the margin-right = 5pixels and width 32pixels. The issue with rem units is that IE8, Opera mini or Safari 3.2 is not supported. So the site would not be correctly visible from any of these browsers.
Is there a way to automate the pixel fallback using rem throughout a project?
Here is a solution so you can use the rem to px mixin for any property:
html {
font-size: 62.5%;
}
#function calculateRem($size) {
$remSize: $size / 10px;
#return #{$remSize}rem;
}
#mixin rem($propertie, $value) {
#{$propertie}: $value;
#{$propertie}: calculateRem($value);
}
p {
font-size: calculateRem(32px);
#include rem(width, 100px);
#include rem(margin, 50px);
}
OUTPUT
html {
font-size: 62.5%;
}
p {
font-size: 3.2rem;
width: 100px; /* Fallback */
width: 10rem;
margin: 50px; /* FallBack */
margin: 5rem;
}
An example: http://sassmeister.com/gist/e888e641925002b5895c
This solution will work with shortcut properties that contain mixed values.
// Global Var
$root-font-size: 16;
#mixin rem($property, $values) {
$pxvalues: null;
$remvalues: null;
#each $value in $values{
$pxvalue: null;
$remvalue: null;
#if type-of($value) == 'number'{
#if ($value > 0 or $value < 0){
$pxvalue: ($value)+px;
$remvalue: ($value / $root-font-size)+rem;
} #else {
$pxvalue: $value;
$remvalue: $value;
}
} #else {
$pxvalue: $value;
$remvalue: $value;
}
$pxvalues: append($pxvalues, $pxvalue);
$remvalues: append($remvalues, $remvalue);
}
#{$property}: $pxvalues;
#{$property}: $remvalues;
}
// Usage: pass pixel values without units
.foo{
#include rem(margin, 80 auto);
}
Output:
.foo{
margin: 80px auto;
margin: 5rem auto;
}