I Want to convert below mentioned CSS format to SCSS using variables or methods. Please suggest how to achieve.
CSS Format is:
.section-1-1{
margin-left:0;
}
.section-1-1 + .section-1-2 {
margin-left: 15px;
}
.section-1-1 + .section-1-3 {
margin-left: 15px;
}
.section-2-1{
margin-left:0;
}
.section-2-1 + .section-2-2 {
margin-left: 15px;
}
.section-2-1 + .section-2-3 {
margin-left: 15px;
}
Note: I may have to write more like .section-3-1, .section-4-1.... vice versa.
With sass you can clean up your code like this, no need to create variables.
.section-1-1 {
margin-left: 0;
+ {
.section-1-2 {
margin-left: 15px;
}
.section-1-3 {
margin-left: 15px;
}
.section-x { } ...
}
}
.section-2-1 { .... }
If you have a lot of classes, you can create classes in a loop.
@for $i from 1 through 3 {
.section-#{$i}-1 {
margin-left: 0px;
}
@for $j from 1 through 3 {
.section-#{$i}-1 + .section-#{$i}-#{$j} {
margin-left: 15px;
}
}
}
This will generate the following CSS.
.section-1-1 {
margin-left: 0px;
}
.section-1-1 + .section-1-1 {
margin-left: 15px;
}
.section-1-1 + .section-1-2 {
margin-left: 15px;
}
.section-1-1 + .section-1-3 {
margin-left: 15px;
}
.section-2-1 {
margin-left: 0px;
}
.section-2-1 + .section-2-1 {
margin-left: 15px;
}
.section-2-1 + .section-2-2 {
margin-left: 15px;
}
.section-2-1 + .section-2-3 {
margin-left: 15px;
}
.section-3-1 {
margin-left: 0px;
}
.section-3-1 + .section-3-1 {
margin-left: 15px;
}
.section-3-1 + .section-3-2 {
margin-left: 15px;
}
.section-3-1 + .section-3-3 {
margin-left: 15px;
}
Use CSS to SCSS converter: https://beautifytools.com/css-to-scss-converter.php
Here's the converter's output for your CSS:
.section-1-1 {
margin-left: 0;
+ {
.section-1-2 {
margin-left: 15px;
}
.section-1-3 {
margin-left: 15px;
}
}
}
.section-2-1 {
margin-left: 0;
+ {
.section-2-2 {
margin-left: 15px;
}
.section-2-3 {
margin-left: 15px;
}
}
}
