Question

在线发现此网格！我一直试图将它实现到我的代码中。但是，我无法弄清楚css，这是一团糟。

需要一些帮助解密它，进入传统的CSS吗？ 喜欢大括号？ {}

$color: #ebeced
$gray: #dddddd

*
    box-sizing: border-box
    &:before, &:after
        box-sizing: border-box

=small
    @media only screen and (max-width: 766px)
        @content

=foo
    +small
        width: 100%

.row
    width: 100%
    max-width: 1020px
    margin: 0 auto
    clear:both
    overflow: hidden
    padding-top: 50px

    +small
        padding: 0 10px


%flok
    min-height: 10px
    margin: 1.0416666666666665%
    float: left
    overflow: hidden
    // background: $color
    border: 4px solid $gray

    +small
        margin-left: 0
        margin-right: 0


=col1 
    width: 6.25%
    @extend %flok
    +foo

=col2
    width: 14.583333333333334%
    @extend %flok
    +foo

=col3
    width: 22.916666666666664%
    @extend %flok
    +foo

=col4
    width: 31.25%
    @extend %flok
    +foo

=col5
    width: 39.58333333333333%
    @extend %flok
    +foo

=col6
    width: 47.91666666666667%
    @extend %flok
    +foo

=col7
    width: 56.25%
    @extend %flok
    +foo

=col8
    width: 64.58333333333334%
    @extend %flok
    +foo

=col9
    width: 72.91666666666666%
    @extend %flok
    +foo

=col10
    width: 81.25%
    @extend %flok
    +foo

=col11
    width: 89.58333333333334%
    @extend %flok
    +foo

=col12
    width: 97.91666666666666%
    @extend %flok
    +foo

// decorate
body
    text-align: center
    line-height: 2.5
    margin: 0
    padding: 0
    color: darken($gray, 10%)
    font-family: 'Open Sans', 'sans-serif'
    font-weight: 300

h1
    text-align: center
    font-size: 45px
    line-height: 1.2
    padding: 45px 0 0
    color: darken($gray, 20%)

.colon1
    +col1

.colon2
    +col2

.colon3
    +col3

.colon4
    +col4

.colon5
    +col5

.colon6
    +col6

.colon7
    +col7

.colon8
    +col8

.colon9
    +col9

.colon10
    +col10

.colon11
    +col11

.colon12
    +col12

URL to CSSDeck

Answer 1

如果您转到演示并单击左上方的扳手，您将看到不完全是CSS，它是SASS，一种CSS编译语言。 Sass使程序员更容易编写CSS，特别是类似于你发布的示例的循环

要查看实际的CSS，请点击SASS顶部的(!)按钮，该按钮将提供以下内容

* {
    box-sizing: border-box;
}
*:before, *:after {
    box-sizing: border-box;
}
.row {
    width: 100%;
    max-width: 1020px;
    margin: 0 auto;
    overflow: hidden;
    padding-top: 50px;
}
@media only screen and (max-width: 766px) {
    .row {
        padding: 0 10px;
    }
}
.colon1, .colon2, .colon3, .colon4, .colon5, .colon6, .colon7, .colon8, .colon9, .colon10, .colon11, .colon12 {
    min-height: 10px;
    margin: 1.04167%;
    float: left;
    overflow: hidden;
    border: 4px solid #dddddd;
}
@media only screen and (max-width: 766px) {
    .colon1, .colon2, .colon3, .colon4, .colon5, .colon6, .colon7, .colon8, .colon9, .colon10, .colon11, .colon12 {
        margin-left: 0;
        margin-right: 0;
    }
}
body {
    text-align: center;
    line-height: 2.5;
    margin: 0;
    padding: 0;
    color: #c4c4c4;
    font-family:"Open Sans", "sans-serif";
    font-weight: 300;
}
h1 {
    text-align: center;
    font-size: 45px;
    line-height: 1.2;
    padding: 45px 0 0;
    color: #aaaaaa;
}
.colon1 {
    width: 6.25%;
}
@media only screen and (max-width: 766px) {
    .colon1 {
        width: 100%;
    }
}
.colon2 {
    width: 14.58333%;
}
@media only screen and (max-width: 766px) {
    .colon2 {
        width: 100%;
    }
}
.colon3 {
    width: 22.91667%;
}
@media only screen and (max-width: 766px) {
    .colon3 {
        width: 100%;
    }
}
.colon4 {
    width: 31.25%;
}
@media only screen and (max-width: 766px) {
    .colon4 {
        width: 100%;
    }
}
.colon5 {
    width: 39.58333%;
}
@media only screen and (max-width: 766px) {
    .colon5 {
        width: 100%;
    }
}
.colon6 {
    width: 47.91667%;
}
@media only screen and (max-width: 766px) {
    .colon6 {
        width: 100%;
    }
}
.colon7 {
    width: 56.25%;
}
@media only screen and (max-width: 766px) {
    .colon7 {
        width: 100%;
    }
}
.colon8 {
    width: 64.58333%;
}
@media only screen and (max-width: 766px) {
    .colon8 {
        width: 100%;
    }
}
.colon9 {
    width: 72.91667%;
}
@media only screen and (max-width: 766px) {
    .colon9 {
        width: 100%;
    }
}
.colon10 {
    width: 81.25%;
}
@media only screen and (max-width: 766px) {
    .colon10 {
        width: 100%;
    }
}
.colon11 {
    width: 89.58333%;
}
@media only screen and (max-width: 766px) {
    .colon11 {
        width: 100%;
    }
}
.colon12 {
    width: 97.91667%;
}
@media only screen and (max-width: 766px) {
    .colon12 {
        width: 100%;
    }
}

需要CSS网格的帮助

1 个答案: