Sass loop for generating dynamic ratio-semantic classes - css

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.

Related

Can you apply a sass Regex Selector to a style value?

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%;
}

What is the meaning of this unconventional CSS code?

Helping a client update their Shopify theme. The previous designer used an unconventional method for the base grid. I need help translating the code.
Read an old article about this subject, but I still did not understand.
$phone: "screen and (max-width: 640px)";
$tablet: "screen and (min-width: 641px) and (max-width: 1007px)";
$tablet-and-up: "screen and (min-width: 641px)";
$pocket: "screen and (max-width: 1007px)";
$lap: "screen and (min-width: 1008px) and (max-width: 1239px)";
$lap-and-up: "screen and (min-width: 1008px)";
$desk: "screen and (min-width: 1240px)";
$widescreen: "screen and (min-width: 1500px)";
.\31\/2, .\32\/4, .\36\/12 {
width: 50%;
}
.\31\/3, .\34\/12 {
width: 33.33333%;
}
.\32\/3, .\38\/12 {
width: 66.66667%;
}
.\31\/4, .\33\/12 {
width: 25%;
}
.\33\/4, .\39\/12 {
width: 75%;
}
.\31\/12 {
width: 8.33333%;
}
.\32\/12 {
width: 16.66667%;
}
.\35\/12 {
width: 41.66667%;
}
.\37\/12 {
width: 58.33333%;
}
.\31\30\/12 {
width: 83.33333%;
}
.\31\31\/12 {
width: 91.66667%;
}
#media #{$phone} {
.hidden-phone {
display: none !important;
}
.\31\/2--phone, .\32\/4--phone, .\36\/12--phone {
width: 50%;
}
.\31\/3--phone, .\34\/12--phone {
width: 33.33333%;
}
.\32\/3--phone, .\38\/12--phone {
width: 66.66667%;
}
.\31\/4--phone, .\33\/12--phone {
width: 25%;
}
.\33\/4--phone, .\39\/12--phone {
width: 75%;
}
.\31\/12--phone {
width: 8.33333%;
}
.\32\/12--phone {
width: 16.66667%;
}
.\35\/12--phone {
width: 41.66667%;
}
.\37\/12--phone {
width: 58.33333%;
}
.\31\30\/12--phone {
width: 83.33333%;
}
.\31\31\/12--phone {
width: 91.66667%;
}
}
#media #{$tablet} {
.hidden-tablet {
display: none !important;
}
.\31\/2--tablet, .\32\/4--tablet, .\36\/12--tablet {
width: 50%;
}
.\31\/3--tablet, .\34\/12--tablet {
width: 33.33333%;
}
.\32\/3--tablet, .\38\/12--tablet {
width: 66.66667%;
}
.\31\/4--tablet, .\33\/12--tablet {
width: 25%;
}
.\33\/4--tablet, .\39\/12--tablet {
width: 75%;
}
.\31\/12--tablet {
width: 8.33333%;
}
.\32\/12--tablet {
width: 16.66667%;
}
.\35\/12--tablet {
width: 41.66667%;
}
.\37\/12--tablet {
width: 58.33333%;
}
.\31\30\/12--tablet {
width: 83.33333%;
}
.\31\31\/12--tablet {
width: 91.66667%;
}
}
#media #{$tablet-and-up} {
.hidden-tablet-and-up {
display: none !important;
}
.\31\/2--tablet-and-up, .\32\/4--tablet-and-up, .\36\/12--tablet-and-up {
width: 50%;
}
.\31\/3--tablet-and-up, .\34\/12--tablet-and-up {
width: 33.33333%;
}
.\32\/3--tablet-and-up, .\38\/12--tablet-and-up {
width: 66.66667%;
}
.\31\/4--tablet-and-up, .\33\/12--tablet-and-up {
width: 25%;
}
.\33\/4--tablet-and-up, .\39\/12--tablet-and-up {
width: 75%;
}
.\31\/12--tablet-and-up {
width: 8.33333%;
}
.\32\/12--tablet-and-up {
width: 16.66667%;
}
.\35\/12--tablet-and-up {
width: 41.66667%;
}
.\37\/12--tablet-and-up {
width: 58.33333%;
}
.\31\30\/12--tablet-and-up {
width: 83.33333%;
}
.\31\31\/12--tablet-and-up {
width: 91.66667%;
}
}
#media #{$pocket} {
.hidden-pocket {
display: none !important;
}
.\31\/2--pocket, .\32\/4--pocket, .\36\/12--pocket {
width: 50%;
}
.\31\/3--pocket, .\34\/12--pocket {
width: 33.33333%;
}
.\32\/3--pocket, .\38\/12--pocket {
width: 66.66667%;
}
.\31\/4--pocket, .\33\/12--pocket {
width: 25%;
}
.\33\/4--pocket, .\39\/12--pocket {
width: 75%;
}
.\31\/12--pocket {
width: 8.33333%;
}
.\32\/12--pocket {
width: 16.66667%;
}
.\35\/12--pocket {
width: 41.66667%;
}
.\37\/12--pocket {
width: 58.33333%;
}
.\31\30\/12--pocket {
width: 83.33333%;
}
.\31\31\/12--pocket {
width: 91.66667%;
}
}
#media #{$lap} {
.hidden-lap {
display: none !important;
}
.\31\/2--lap, .\32\/4--lap, .\36\/12--lap {
width: 50%;
}
.\31\/3--lap, .\34\/12--lap {
width: 33.33333%;
}
.\32\/3--lap, .\38\/12--lap {
width: 66.66667%;
}
.\31\/4--lap, .\33\/12--lap {
width: 25%;
}
.\33\/4--lap, .\39\/12--lap {
width: 75%;
}
.\31\/12--lap {
width: 8.33333%;
}
.\32\/12--lap {
width: 16.66667%;
}
.\35\/12--lap {
width: 41.66667%;
}
.\37\/12--lap {
width: 58.33333%;
}
.\31\30\/12--lap {
width: 83.33333%;
}
.\31\31\/12--lap {
width: 91.66667%;
}
}
#media #{$lap-and-up} {
.hidden-lap-and-up {
display: none !important;
}
.\31\/2--lap-and-up, .\32\/4--lap-and-up, .\36\/12--lap-and-up {
width: 50%;
}
.\31\/3--lap-and-up, .\34\/12--lap-and-up {
width: 33.33333%;
}
.\32\/3--lap-and-up, .\38\/12--lap-and-up {
width: 66.66667%;
}
.\31\/4--lap-and-up, .\33\/12--lap-and-up {
width: 25%;
}
.\33\/4--lap-and-up, .\39\/12--lap-and-up {
width: 75%;
}
.\31\/12--lap-and-up {
width: 8.33333%;
}
.\32\/12--lap-and-up {
width: 16.66667%;
}
.\35\/12--lap-and-up {
width: 41.66667%;
}
.\37\/12--lap-and-up {
width: 58.33333%;
}
.\31\30\/12--lap-and-up {
width: 83.33333%;
}
.\31\31\/12--lap-and-up {
width: 91.66667%;
}
}
#media #{$desk} {
.hidden-desk {
display: none !important;
}
.\31\/2--desk, .\32\/4--desk, .\36\/12--desk {
width: 50%;
}
.\31\/3--desk, .\34\/12--desk {
width: 33.33333%;
}
.\32\/3--desk, .\38\/12--desk {
width: 66.66667%;
}
.\31\/4--desk, .\33\/12--desk {
width: 25%;
}
.\33\/4--desk, .\39\/12--desk {
width: 75%;
}
.\31\/12--desk {
width: 8.33333%;
}
.\32\/12--desk {
width: 16.66667%;
}
.\35\/12--desk {
width: 41.66667%;
}
.\37\/12--desk {
width: 58.33333%;
}
.\31\30\/12--desk {
width: 83.33333%;
}
.\31\31\/12--desk {
width: 91.66667%;
}
}
/* Create each media query */
#media #{$widescreen} {
.hidden-widescreen {
display: none !important;
}
.\31\/2--widescreen, .\32\/4--widescreen, .\36\/12--widescreen {
width: 50%;
}
.\31\/3--widescreen, .\34\/12--widescreen {
width: 33.33333%;
}
.\32\/3--widescreen, .\38\/12--widescreen {
width: 66.66667%;
}
.\31\/4--widescreen, .\33\/12--widescreen {
width: 25%;
}
.\33\/4--widescreen, .\39\/12--widescreen {
width: 75%;
}
.\31\/12--widescreen {
width: 8.33333%;
}
.\32\/12--widescreen {
width: 16.66667%;
}
.\35\/12--widescreen {
width: 41.66667%;
}
.\37\/12--widescreen {
width: 58.33333%;
}
.\31\30\/12--widescreen {
width: 83.33333%;
}
.\31\31\/12--widescreen {
width: 91.66667%;
}
}
Hoping to understand the patterns for "\31" "\32" "\36" "\37", and hopefully a translation the first 12-grid declarations.

CSS identifiers, such as classes and IDs, cannot begin with a digit (0 - 9).
From the spec:
4.1.3 Characters and
case
In CSS, identifiers (including element names, classes, and IDs in
selectors) can contain only the characters [a-z, A-Z, 0-9] and ISO
10646 characters U+0080 and higher, plus the hyphen (-) and the
underscore (_); they cannot start with a digit, two hyphens, or a
hyphen followed by a digit.
However, the same section also says this:
Backslash escapes are always considered to be part of an identifier or a string.
This means that, while you cannot start an identifier with a digit, you can use backslash escape code (\foo) that will convert to a digit. Note that this rule applies in CSS, but not HTML, where almost any character combination is an acceptable value.
So that's what you're seeing in your code. Numerical HTML class values that must be escaped to work in CSS. Here are some examples:
\31 is the Unicode Code Point for the digit one.
\32 is the Unicode Code Point for the digit two.
\33 is the Unicode Code Point for the digit three.
Another purpose of the backslash escape in CSS is to cancel the meaning of special characters.
The forward slash (/) has special meaning in CSS. It must, therefore, be escaped for proper use.
So let's now decipher the class names in your code:
.\31\/2, .\32\/4, .\36\/12 { width: 50%; }
The first escape (\31) is Unicode for "1".
The second escape (\/2) cancels the special meaning of the forward slash.
So the HTML looks like this:
class = "1/2"
class = "2/4"
class = "6/12"
Here are a few more from your list:
.\31\/3, .\34\/12 { width: 33.33333%; } /* HTML class values = 1/3, 4/12 */
.\32\/3, .\38\/12 { width: 66.66667%; } /* HTML class values = 2/3, 8/12 */
.\31\/12 { width: 8.33333%; } /* HTML class value = 1/12 */
.\35\/12 { width: 41.66667%; } /* HTML class value = 5/12 */
.\31\30\/12 { width: 83.33333%; } /* HTML class value = 10/12 */
.\31\31\/12 { width: 91.66667%; } /* HTML class value = 11/12 */

from what I can gather with what I found online it's mostly escaping going on for some odd naming convention that from what I've read is probably not a great idea to begin with.
.\31\/2, .\32\/4, .\36\/12 { /* this */
.1/2, .2/4, .6/12 { /* translates to this */
width: 50%;
}
.\31\/3, .\34\/12 { /* this */
.1/3, .4/12 { /* translates to this */
width: 33.33333%;
}
I don't know if you've seen this article but the accepted answer breaks it down pretty well. after the \3 is like the start. then the \/ is escaping the slash.
What does .container.\31 25\25 mean in CSS?

Break line of code with many :not in scss

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

SCSS percentage calculations wrong

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.

Making a sass (scss) based grid - how to create a list of class names with one declaration [duplicate]

This question already has answers here:
How to dynamically generate a list of classes with commas separating them?
(3 answers)
Closed 7 years ago.
So I'm creating a very simple grid and want to limit the amount of repeated declarations.
My Scss grid
$columns: 12;
$margin: 10;
$max-width: 1200;
// do not edit these values
$layout-margin-width: $max-width + $margin * 2;
$percent-margin: $margin / $layout-margin-width;
// Grid Container
.main {
max-width: $max-width + px;
margin: 0 auto;
&:before,
&:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
}
// Grid Columns
#for $i from 1 through $columns {
.grid-#{$i} {
width: ( ($i / $columns) - 2 * $percent-margin) * 100%;
padding: 0;
margin: 0 $percent-margin * 100%;
float: left;
}
}
Which outputs to
.main { max-width: 1200px; margin: 0 auto; }
.main:before, .main:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.grid-1 { width: 6.69399%; padding: 0; margin: 0 0.81967%; float: left; }
//
.grid-12 { width: 98.36066%; padding: 0; margin: 0 0.81967%; float: left; }
That creates a lot of repeating CSS so I'd like to be able to have a list the grid class names together and have float:left etc in a single declaration, like this
.grid-1,
.grid-2,
//
.grid-12 {
float:left;
//other declarations
}
How do I structure the Scss loop to do this?

I think you can do something like this using #extend.
Example
%grid {
float:left;
}
#for $i from 1 through $columns {
.grid-#{$i} {
width: ( ($i / $columns) - 2 * $percent-margin) * 100%;
padding: 0;
margin: 0 $percent-margin * 100%;
#extend: %grid;
}
}
This will then output your css like this.
.grid-1,
.grid-2,
.grid-3 {
float: left;
}

Resources