may be the class name of the grid layout.

For example, write down the width of Sass represented by each Sass/SCSS in u (check px), and then precompile them uniformly.

If you want to use it during layout, you can directly add the corresponding layout class to the attribute of the label and you can reuse it.

You can check the typical Blueprint framework (this is no longer updated, but the information should be easy to understand). For new layout frameworks such as Susy, take a look at the grid layout method introduced in the manual. There are diagrams. After reading it, you will know why the class is named like this, what the corresponding attributes of this class look like, and the purpose and purpose of the class. usage.

The above is about what you can check to understand why the class name is written like this. Let me give you a simple example:

/* SCSS */
$u: 10;
@for $i from 2 through 24 {
    .layout#{$i} {
        width: $i * $u px;
    }
}

Use Compass to generate the following:

/* CSS */
.layout2 { width: 20 px; }

.layout3 { width: 30 px; }

.layout4 { width: 40 px; }

.layout5 { width: 50 px; }

.layout6 { width: 60 px; }

.layout7 { width: 70 px; }

.layout8 { width: 80 px; }

.layout9 { width: 90 px; }

.layout10 { width: 100 px; }

.layout11 { width: 110 px; }

.layout12 { width: 120 px; }

.layout13 { width: 130 px; }

.layout14 { width: 140 px; }

.layout15 { width: 150 px; }

.layout16 { width: 160 px; }

.layout17 { width: 170 px; }

.layout18 { width: 180 px; }

.layout19 { width: 190 px; }

.layout20 { width: 200 px; }

.layout21 { width: 210 px; }

.layout22 { width: 220 px; }

.layout23 { width: 230 px; }

.layout24 { width: 240 px; }

The above classes are generated by the CSS precompiler and are not written bit by bit. If you want to layout a certain element, just add multiple corresponding already written classes to the tag. Then you can lay it out relatively simply and neatly.

For example, in the title description, 4u 12u(mobile) may refer to this. p is displayed as 4 times the unit width u on the PC side. On the mobile side, because the pixel density of mobile phones is very high, a wider width is needed. Width (12 times u) so that it does not appear too small for browsing.

Add some more. The above code tells you how these CSS files are generated. Because it is generated as above, its naming is very regular, and these classes are added. At this time, you can know more clearly what you are adding to the label.

Used like this:

/* SCSS */

#element1 {
    @extend .layout20;
}

#element2 {
    @extend .layout24;
}

#element 3 {
    @extend .layout20;
}

The generated CSS is as follows

/* CSS */
.layout20, #element1, #element3 { width: 200 px; }
.layout24, #element2 { width: 240 px; }

It is recommended to check Sass/SCSS.

It’s the class name. I guess one is for PC and the other is for mobile. What’s strange is that the class name has parentheses added. Show me the original address.

It is possible that the class has parameters set! It’s best to send the address and take a look

It’s just a class name, only the author understands it. Class naming can be varied. This detail can be ignored and does not affect learning front-end knowledge.

You can take a look at the imported files

Judging from the class name, the PC side is a 12/4 layout, and the mobile side is a 12/12 layout. You can refer to bootstrap