Is it possible to create a sass, scss, or css selector that could take a value in the selector and apply it to the style?
Example (with wrong syntax since I don't know how to do it:
.w(\d+) {
width: $1% ;
}
In the above example,
.w100 => width: 100%
.w82 => width: 82%
and so on.
you can use #for loop to do this.
Example:
#for $i from 1 through 100 {
.w#{$i} {
width: $i * 1%;
}
}
this loop will generates below css as output:
.w1 {
width: 1%;
}
.w2 {
width: 2%;
}
.w3 {
width: 3%;
}
.w4 {
width: 4%;
}
.
.
.
.w100 {
width: 100%;
}
Related
Maybe it is a silly question but how can I break this line of code (with a lots of :not) so it won't be that long:
input {
&:not(.ant-calendar-input):not(.ant-time-picker-panel-input):not(.ant-calendar-picker-input):not(.ant-time-picker-input) {
width: 100%;
height: 100px;
}
I tried this but it doesn't work:
input {
&:not(.ant-calendar-input),
&:not(.ant-time-picker-panel-input),
&:not(.ant-calendar-picker-input),
&:not(.ant-time-picker-input) {
width: 100%;
height: 100px;
}
Your original SCSS is equivalent to the following SCSS:
input {
&:not(.ant-calendar-input) {
&:not(.ant-time-picker-panel-input) {
&:not(.ant-calendar-picker-input) {
&:not(.ant-time-picker-input) {
width: 100%;
height: 100px;
}
}
}
}
}
Which looks a bit nicer as SASS:
input
&:not(.ant-calendar-input)
&:not(.ant-time-picker-panel-input)
&:not(.ant-calendar-picker-input)
&:not(.ant-time-picker-input)
width: 100%
height: 100px
I have a grid system in SCSS which calculates the width of the columns based on a 12-column grid. The calculations used to be right but it's recently been compiling wrong.
I get the same output for either of these versions.
SCSS:
#for $i from 1 through 11 {
.c#{$i} {
width: (100% / 12) * $i;
}
}
#for $i from 1 through 11 {
.c#{$i} {
width: 8.3333333333% * $i;
}
}
Compiled CSS:
.c1 {
width: 8.3333333333%; }
.c2 {
width: 16.6666666666%; }
.c3 {
width: 24.9999999999%; }
.c4 {
width: 33.3333333332%; }
.c5 {
width: 41.6666666665%; }
.c6 {
width: 49.9999999998%; }
.c7 {
width: 58.3333333331%; }
.c8 {
width: 66.6666666664%; }
.c9 {
width: 74.9999999997%; }
.c10 {
width: 83.333333333%; }
.c11 {
width: 91.6666666663%; }
Used to be:
.c1 {
width: 8.33333%; }
.c2 {
width: 16.66667%; }
.c3 {
width: 25%; }
.c4 {
width: 33.33333%; }
.c5 {
width: 41.66667%; }
.c6 {
width: 50%; }
.c7 {
width: 58.33333%; }
.c8 {
width: 66.66667%; }
.c9 {
width: 75%; }
.c10 {
width: 83.33333%; }
.c11 {
width: 91.66667%; }
Ideally, 6 columns would equate to 50% and the rest accordingly. Any ideas on how can I get it back to what it used to be?
You can use, for example:
scss --precision 5 main.scss main.css
Set precision as the number of digits that you need.
I want to get css code like this
.img-wrapper {
width: 100px;
height: 100px;
overflow: hidden;
}
.img-wrapper image {
width: 100px;
}
I want to use mixin in scss like this
#mixin fixed-img($width, $height) {
width: $width;
height: $height;
overflow: hidden;
...
}
.img-wrapper {
#include fixed-img(100px , 100px);
}
Can I get the the above css output by using only one mixin
use the parent selector & inside the mixin and define the rule for the nested img element
#mixin fixed-img($width, $height) {
width: $width;
height: $height;
overflow: hidden;
& img {
width: $width;
}
}
.img-wrapper {
#include fixed-img(100px , 100px);
}
Note that instead of
& img {
width: $width;
}
You may avoid to use the SASS variable and use inherit keyword (or also 100%)
& img {
width: inherit;
}
I'm trying to write a Sass loop that will create grid setup with ratio semantics.
I started off with:
$columns: 12 !default;
#mixin widths-setup($namespace: "") {
#for $i from 1 through $columns {
.width-#{$i} {
width: percentage($i/$columns);
}
}
}
which produces:
.width-1 { width: 8.33333%; }
.width-2 { width: 16.66667%; }
...
.width-12 { width: 100%; }
What I would like to produce, presumably using #if condition is
.width-1-1 { width: 100%; }
.width-1-2 { width: 50%; }
.width-2-2 { width: 100%; }
.width-1-3 { width: 33.3333%; }
.width-2-3 { width: 66.66667%; }
.width-3-3 { width: 100%; }
...
.width-1-12 { width: 8.3333%; }
.width-2-12 { width: 16.6666%; }
.width-3-12 { width: 25%; }
...
.width-12-12 { width: 100%; }
Each class starts with width, second number increases by one during each step in the loop until it equals {$i}, and the third number is the increase of {$i} which will stop at the number assigned to $columns variable.
Although there will be unnecessary classes (width-1-1, width-2-2, width-3-3, etc.) which will all equal the same width but that bloat doesn't concern me at this time.
$columns: 12 !default;
#mixin widths-setup($namespace: "") {
#for $i from 1 through $columns {
$cols: $i;
#for $k from 1 through $cols {
.width-#{$k}-#{$i} {
width: percentage($k/$cols);
}
}
}
}
This should output your expected (but still bloated) result.
I have .aClass
.aClass {
width: 20px;
height: 20px;
}
In .anotherClass I would like to calculate a width value based on the value of the width attribute in .aClass.
.anotherClass {
width: .aClass.width
}
The above example does not work.
I couldn´t find anything in the less docs. Is there any way to do this?
Declare variable at the top of code
#width: 10px
Then,
.aClass {
width: #width;
height: 20px;
}
.anotherClass {
width: #width;
}