SASS For Loop including 0 - loops

I have a for loop in SASS which loops through page classes to insert a colour break for each module. For example:
#for $i from 1 through 4 { // the loop
.m0#{$i} .module-title{
background-color: nth($m_col_lvl_01_list, $i);
}
//- end loop
}
Which compiles to:
.m01 .module-title{
background-color: green;
}
.m02 .module-title{
background-color: blue;
}
.m03 .module-title{
background-color: yellow;
}
.m04 .module-title{
background-color: orange;
}
In the task I have at the moment it includes .m00 Is there a way of including 00 in the loop?


I think you can still achieve what you want using 0 in the for loop.
$list: (green, blue, orange, red, yellow);
//loop from 0 to the length of the list which isn't hardcoded
#for $i from 0 to length($list) {
.m0#{$i} .module-title {
//simply add one to the loop index to get the correct list item
background-color: nth($list, $i + 1);
}
}
This compiles to the following CSS
.m00 .module-title {
background-color: green;
}
.m01 .module-title {
background-color: blue;
}
.m02 .module-title {
background-color: orange;
}
.m03 .module-title {
background-color: red;
}
.m04 .module-title {
background-color: yellow;
}

Related

React Material ui input field to custom

Hi does anyone have any idea to make the input field behave like this example?
https://www.westpac.com.au/personal-banking/home-loans/calculator/mortgage-calculator/
we should not allow user to delete 0 and when user type should replace 0 with the value, and when we delete all the value, the cursor will always stays at the end of the first digit.

The below code should work the way you want it.
function theFunction(e) {
if (e.value <= 0) return e.value = 0
if (e.value[0] == 0) return e.value = e.value.substring(1)
}
body{
width: 100vw;
height: 100vh;
}
.custom-input {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
background-color: rgb(42, 46, 66);
color: rgb(249, 249, 251);
padding: 18px;
font-size: 48px;
height: 84px;
margin-bottom: 18px;
border-color: rgb(171, 175, 177);
}
<body>
<input type="number" class="custom-input" id="custom-input" oninput="theFunction(this)" value="800">
</body>

I think you can use the if condition in your handleChange function, for example :
...
var result = 0;
if(input <= 0 || input == ''){
result = 0;
} else {
result = event.target.value;
}
this.setState({
inputValue: result
})
...
Hope this will help you :)

SCSS for loop: mix variable with index

In the following situation, I would like to combine variables with the loop index (in SCSS):
Predefined variables
$item-width-1: 400px;
$item-height-1: 340px;
$item-spacing-1: 40px;
$item-width-2: 200px;
$item-height-2: 440px;
$item-spacing-2: 100px;
$item-width-3: 300px;
$item-height-3: 240px;
$item-spacing-3: 60px;
For loop:
#for $i from 2 through 3 {
&:nth-child(#{$i}) {
.image { width: $item-width-#{$i}; height: $item-height-#{$i}; bottom: $item-spacing-#{$i}; }
.content { transform: translate(calc(#{$item-width-#{$i}} + 40px), 0); bottom: $item-spacing-#{$i}; }
.line { height: 108px + $item-spacing-#{$i}; left: $item-width-#{$i} / 2; }
&.active { width: $item-width-#{$i} + ($content-width + 80px); }
}
}
But it shows the following error:
Any ideas on how I could fix this?
Thank you in advance!

Use array index to change background color to element

I have created an ul element and I have put some li items inside. I want to change the background color of each li item using an array in a for loop. This is what I have, but the result is just a string :(
"use strict";
var colorArray,
i,
ulVar,
listItem;
colorArray = [
"color1",
"color2",
"color3",
"color4",
"color5",
"color6"
]
ulVar = document.createElement("ul");
ulVar.setAttribute("id", "#text-color");
ulVar.innerText = "Some unordered list"
document.body.appendChild(ulVar);
for(i = 0; i < colorArray.length; i++){
listItem = document.createElement("li");
listItem.setAttribute("class", colorArray[i]);
console.log(listItem.getAttribute("class")); //just to check what's inside
listItem.innerText = colorArray[i];
ulVar.appendChild(listItem);
}
The css code is just this:
#text-color {
color: #fff;
}
.color-1 {
background-color: #0000ff;
}
.color-2 {
background-color: #ff6600;
}
.color-3 {
background-color: #cc00cc;
}
.color-4 {
background-color: #009933;
}
.color-5 {
background-color: #669999;
}
.color-6 {
background-color: #663300;
}
I don't know how to make the colorArray[i] to return the class properties and not just string. I'm learning now so please don't judge me too hard :)

LessCss: nesting groups of selectors

Say in my main.less file which gets compiled into main.css, I have the following:
.section1 {
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7,
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11,
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12
{
border: 1px solid green;
}
}
.section2 {
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7,
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11,
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12
{
border: 1px solid red;
}
}
Clearly this is already becoming unwieldy, excessively cluttering my main.less file and adding duplication of sorts which could cause multiple unnecessary changes.
How can I improve this? Is there a way I could for example do something like this:
.allCellTypes
{
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7,
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11,
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12
}
.section1 .allCellTypes
{
border: 1px solid green;
}
.section2 .allCellTypes
{
border: 1px solid red;
}
Thanks
Edit 1: As per #Alessandro Minoccheri's suggestion, I compiled but the resulting css was as follows:
.section1 .allCellTypes
{
border: 1px solid green;
}
.section2 .allCellTypes
{
border: 1px solid red;
}
Any mention of the classes that would be covered by .allCellTypes are completely omitted. Perhaps there are two reasons for this?
The definitions for the classes which would be grouped into .allCellTypes are defined elsewhere (within compiled bootstrap files).
I compile the .less files using lessphp, perhaps it has a bug?
Edit 2: I placed the following code in the demo window on the lessphp page...
.cell1 {
background-color: red;
}
.cell2 {
background-color: green;
}
.cell3 {
background-color: blue;
}
.allCellTypesClass {
.cell1;
.cell2;
.cell3;
}
.section1 {
.allCellTypes {
.allCellTypesClass;
border: 1px solid red;
}
}
and I got the following result:
.cell1 {
background-color: red;
}
.cell2 {
background-color: green;
}
.cell3 {
background-color: blue;
}
.allCellTypesClass {
background-color: red;
background-color: green;
background-color: blue;
}
.section1 .allCellTypes {
background-color: red;
background-color: green;
background-color: blue;
border: 1px solid red;
}
So I'm afraid your answer, #Alessandro Minoccheri, is not doing what I wanted!

The gist of what I do is as follows:
My Mixin:
.red-border () {
border:#value #value #value;
}
Applying:
.section-2 [class*="col-"] {
.red-border;
}
If you don't want to affect nested columns, then:
.section-2 > [class*="col-"] {
.red-border;
}
If you only want a certain column breakpoint:
.section-2 > [class*="col-sm-"] {
.red-border;
}
If you don't want to affect forms (haven't tested this but should work fine).
.section-2 > [class*="col-"]:not(form) {
.red-border;
}

Just in case, you can get it in LESS like this:
.section1 {
.allCells; .allCellsProperties() {
border: 1px solid green;
}
}
.section2 {
.allCells; .allCellsProperties() {
border: 1px solid red;
}
}
.allCells() {.col- {&xs-, &sm-, &md-, &lg- {
&1, &2, &3, &4, &5, &6, &7, &8, &9, &10, &11, &12 {
.allCellsProperties();
}
}}}
But indeed, the attribute-selector-based solution suggested by #cab is more clean and less bloating.

You can create a class .allCellTypes and add all class that you want that inherited.After you can call this class and add other property
you can write this:
.allCellTypesClass
{
.col-xs-1;
.col-sm-1;
.col-md-1;
.col-lg-1;
.col-xs-2;
.col-sm-2;
.col-md-2;
.col-lg-2;
.col-xs-3;
.col-sm-3;
.col-md-3;
.col-lg-3;
.col-xs-4;
.col-sm-4;
.col-md-4;
.col-lg-4;
.col-xs-5;
.col-sm-5;
.col-md-5;
.col-lg-5;
.col-xs-6;
.col-sm-6;
.col-md-6;
.col-lg-6;
.col-xs-7;
.col-sm-7;
.col-md-7;
.col-lg-7;
.col-xs-8;
.col-sm-8;
.col-md-8;
.col-lg-8;
.col-xs-9;
.col-sm-9;
.col-md-9;
.col-lg-9;
.col-xs-10;
.col-sm-10;
.col-md-10;
.col-lg-10;
.col-xs-11;
.col-sm-11;
.col-md-11;
.col-lg-11;
.col-xs-12;
.col-sm-12;
.col-md-12;
.col-lg-12;
}
.section1
{
.allCellTypes
{
.allCellTypesClass;
border: 1px solid green;
}
}
.section2
{
.allCellTypes
{
.allCellTypesClass ;
border: 1px solid red;
}
}

Grouping Selectors inside of a loop using Sass

The Issue
I'm currently in a pickle. I need to group selectors inside of a Sass loop. I've tried many different ways to go about doing this such as:
body {
$store: null;
#for $i from 1 through 10 {
$store: append($store, ".offset-by-#{$i}", comma);
}
// produces content: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
#each $j in $store {
$store: unquote($j);
}
// produces .offset-by-10
}
What I'm trying to accomplish using pure Sass (no Ruby) is the following:
.offset-by-1,
.offset-by-2,
.offset-by-3,
...
.offset-by-10 { foo: bar; }
If you are a Sass god then please give me an idea of what to do here. If this is an inherent limitation of the meta-language then let me know about that too!
Considerations
I can't use anything other than a mixin to accomplish this because functions are expected to be used on a property value. Mixins, on the other hand allow the production of entire blocks of code.

Keep it simple, soldier!
%foo {
foo: bar; }
#for $i from 1 through 10 {
.offset-by-#{$i} {
#extend %foo; }}
UPD You can also have individual styles with this approach:
%foo {
foo: bar; }
#for $i from 1 through 10 {
.offset-by-#{$i} {
#extend %foo;
margin-left: 50px * $i; }}
Which results in the following CSS:
.offset-by-1, .offset-by-2, .offset-by-3, .offset-by-4, .offset-by-5, .offset-by-6, .offset-by-7, .offset-by-8, .offset-by-9, .offset-by-10 {
foo: bar; }
.offset-by-1 {
margin-left: 50px; }
.offset-by-2 {
margin-left: 100px; }
.offset-by-3 {
margin-left: 150px; }
.offset-by-4 {
margin-left: 200px; }
.offset-by-5 {
margin-left: 250px; }
.offset-by-6 {
margin-left: 300px; }
.offset-by-7 {
margin-left: 350px; }
.offset-by-8 {
margin-left: 400px; }
.offset-by-9 {
margin-left: 450px; }
.offset-by-10 {
margin-left: 500px; }

Have you tried something like this:
#mixin createNumbered($num, $className){
#for $i from 1 through $num {
.#{$className}-#{$i} {
#content;
}
}
}
#include createNumbered(10, 'foo-bar'){
color: white;
}
Updated:
#mixin createNumbered($num, $className){
$foo : '';
#for $i from 1 through $num {
$foo : $foo + '.' + $className + '-' + $i + ', ';
}
#{$foo} {
#content;
}
}
#include createNumbered(10, 'foo-bar'){
color: white;
}

This is likely overkill for what you need, but I needed to be able to add :last-child onto the class list. I built this on Clark Pan's Answer:
#mixin group-classes($start, $stop, $step, $selector, $selector-suffix, $property, $value) {
$selector-list: '';
$i: $start;
#while $i <= $stop {
$comma: ', ';
#if $i == $stop {
$comma: '';
}
$selector-list: $selector-list + $selector + '-' + $i + $selector-suffix + $comma;
$i: $i + $step;
}
#{$selector-list} {
#{$property}: #{$value}
}
}
And then to use it:
#include group-classes(1, 3, 1, '.e > .g', ':last-child', 'margin', 0);
Result:
.e > .g-1:first-child,
.e > .g-2:first-child,
.e > .g-3:first-child {
margin:0!important;
}

Resources