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%;
}
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?
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'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 am using the 978.gs system in a site that I am creating but it is inserting a small band at the top of the page moving the content down slightly. I don't want this to happen.
The site in question is Located Here look at the top of the page.
and my CSS code is
/* Initiate 978.gs */
div.layout-978 { width: 978px; margin: 0px auto; }
div.row { height: 1%; }
div.row-end { clear: both; font: 1px/1px sans-serif; height: 1px; overflow: hidden; }
div.col1, div.col2, div.col3, div.col4, div.col5, div.col6, div.col7, div.col8, div.col9, div.col10, div.col11, div.col12 { float: left; margin-left: 30px; }
div.col1:first-child, div.col2:first-child, div.col3:first-child, div.col4:first-child, div.col5:first-child, div.col6:first-child, div.col7:first-child, div.col8:first-child, div.col9:first-child, div.col10:first-child, div.col11:first-child, div.col12:first-child { margin-left: 0px; }
div.col1 { width: 54px; }
div.col2 { width: 138px; }
div.col3 { width: 222px; }
div.col4 { width: 306px; }
div.col5 { width: 390px; }
div.col6 { width: 474px; }
div.col7 { width: 558px; }
div.col8 { width: 642px; }
div.col9 { width: 726px; }
div.col10 { width: 810px; }
div.col11 { width: 894px; }
div.col12 { width: 978px; }
/* Main CSS */
body{
background: url('img/bg-texture.jpg');
position:relative;
}
Solution:
To fix this problem I edited the following css entry
body{
background: url('img/bg-texture.jpg');
position:relative;
margin-top:0px;
}