scss 由SassMeister.com生成。

Posted 2021-05-18

.row{width:100%;max-width:1200px;margin:0 auto;padding:0 10px}.row *[class*='grid-']{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;float:left}.row *[class*='col-']{float:left;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;margin-left:1%;margin-right:1%}.row *[class*='col-'].alpha{margin-left:0%}.row *[class*='col-'].omega{margin-right:0%}.row .col-1{width:6.33333%}.row .col-1.alpha,.row .col-1.omega{width:7.33333%}.row *[class*='col-'].col-push-1{margin-left:9.33333%}.row .col-2{width:14.66667%}.row .col-2.alpha,.row .col-2.omega{width:15.66667%}.row *[class*='col-'].col-push-2{margin-left:17.66667%}.row .col-3{width:23%}.row .col-3.alpha,.row .col-3.omega{width:24%}.row *[class*='col-'].col-push-3{margin-left:26%}.row .col-4{width:31.33333%}.row .col-4.alpha,.row .col-4.omega{width:32.33333%}.row *[class*='col-'].col-push-4{margin-left:34.33333%}.row .col-5{width:39.66667%}.row .col-5.alpha,.row .col-5.omega{width:40.66667%}.row *[class*='col-'].col-push-5{margin-left:42.66667%}.row .col-6{width:48%}.row .col-6.alpha,.row .col-6.omega{width:49%}.row *[class*='col-'].col-push-6{margin-left:51%}.row .col-7{width:56.33333%}.row .col-7.alpha,.row .col-7.omega{width:57.33333%}.row *[class*='col-'].col-push-7{margin-left:59.33333%}.row .col-8{width:64.66667%}.row .col-8.alpha,.row .col-8.omega{width:65.66667%}.row *[class*='col-'].col-push-8{margin-left:67.66667%}.row .col-9{width:73%}.row .col-9.alpha,.row .col-9.omega{width:74%}.row *[class*='col-'].col-push-9{margin-left:76%}.row .col-10{width:81.33333%}.row .col-10.alpha,.row .col-10.omega{width:82.33333%}.row *[class*='col-'].col-push-10{margin-left:84.33333%}.row .col-11{width:89.66667%}.row .col-11.alpha,.row .col-11.omega{width:90.66667%}.row *[class*='col-'].col-push-11{margin-left:92.66667%}.row .col-12{width:98%}.row .col-12.alpha,.row .col-12.omega{width:99%}.row *[class*='col-'].col-push-12{margin-left:101%}.row .grid-1{width:1%}.row .push-1{margin-left:1%}.row .grid-2{width:2%}.row .push-2{margin-left:2%}.row .grid-3{width:3%}.row .push-3{margin-left:3%}.row .grid-4{width:4%}.row .push-4{margin-left:4%}.row .grid-5{width:5%}.row .push-5{margin-left:5%}.row .grid-6{width:6%}.row .push-6{margin-left:6%}.row .grid-7{width:7%}.row .push-7{margin-left:7%}.row .grid-8{width:8%}.row .push-8{margin-left:8%}.row .grid-9{width:9%}.row .push-9{margin-left:9%}.row .grid-10{width:10%}.row .push-10{margin-left:10%}.row .grid-11{width:11%}.row .push-11{margin-left:11%}.row .grid-12{width:12%}.row .push-12{margin-left:12%}.row .grid-13{width:13%}.row .push-13{margin-left:13%}.row .grid-14{width:14%}.row .push-14{margin-left:14%}.row .grid-15{width:15%}.row .push-15{margin-left:15%}.row .grid-16{width:16%}.row .push-16{margin-left:16%}.row .grid-17{width:17%}.row .push-17{margin-left:17%}.row .grid-18{width:18%}.row .push-18{margin-left:18%}.row .grid-19{width:19%}.row .push-19{margin-left:19%}.row .grid-20{width:20%}.row .push-20{margin-left:20%}.row .grid-21{width:21%}.row .push-21{margin-left:21%}.row .grid-22{width:22%}.row .push-22{margin-left:22%}.row .grid-23{width:23%}.row .push-23{margin-left:23%}.row .grid-24{width:24%}.row .push-24{margin-left:24%}.row .grid-25{width:25%}.row .push-25{margin-left:25%}.row .grid-26{width:26%}.row .push-26{margin-left:26%}.row .grid-27{width:27%}.row .push-27{margin-left:27%}.row .grid-28{width:28%}.row .push-28{margin-left:28%}.row .grid-29{width:29%}.row .push-29{margin-left:29%}.row .grid-30{width:30%}.row .push-30{margin-left:30%}.row .grid-31{width:31%}.row .push-31{margin-left:31%}.row .grid-32{width:32%}.row .push-32{margin-left:32%}.row .grid-33{width:33%}.row .push-33{margin-left:33%}.row .grid-34{width:34%}.row .push-34{margin-left:34%}.row .grid-35{width:35%}.row .push-35{margin-left:35%}.row .grid-36{width:36%}.row .push-36{margin-left:36%}.row .grid-37{width:37%}.row .push-37{margin-left:37%}.row .grid-38{width:38%}.row .push-38{margin-left:38%}.row .grid-39{width:39%}.row .push-39{margin-left:39%}.row .grid-40{width:40%}.row .push-40{margin-left:40%}.row .grid-41{width:41%}.row .push-41{margin-left:41%}.row .grid-42{width:42%}.row .push-42{margin-left:42%}.row .grid-43{width:43%}.row .push-43{margin-left:43%}.row .grid-44{width:44%}.row .push-44{margin-left:44%}.row .grid-45{width:45%}.row .push-45{margin-left:45%}.row .grid-46{width:46%}.row .push-46{margin-left:46%}.row .grid-47{width:47%}.row .push-47{margin-left:47%}.row .grid-48{width:48%}.row .push-48{margin-left:48%}.row .grid-49{width:49%}.row .push-49{margin-left:49%}.row .grid-50{width:50%}.row .push-50{margin-left:50%}.row .grid-51{width:51%}.row .push-51{margin-left:51%}.row .grid-52{width:52%}.row .push-52{margin-left:52%}.row .grid-53{width:53%}.row .push-53{margin-left:53%}.row .grid-54{width:54%}.row .push-54{margin-left:54%}.row .grid-55{width:55%}.row .push-55{margin-left:55%}.row .grid-56{width:56%}.row .push-56{margin-left:56%}.row .grid-57{width:57%}.row .push-57{margin-left:57%}.row .grid-58{width:58%}.row .push-58{margin-left:58%}.row .grid-59{width:59%}.row .push-59{margin-left:59%}.row .grid-60{width:60%}.row .push-60{margin-left:60%}.row .grid-61{width:61%}.row .push-61{margin-left:61%}.row .grid-62{width:62%}.row .push-62{margin-left:62%}.row .grid-63{width:63%}.row .push-63{margin-left:63%}.row .grid-64{width:64%}.row .push-64{margin-left:64%}.row .grid-65{width:65%}.row .push-65{margin-left:65%}.row .grid-66{width:66%}.row .push-66{margin-left:66%}.row .grid-67{width:67%}.row .push-67{margin-left:67%}.row .grid-68{width:68%}.row .push-68{margin-left:68%}.row .grid-69{width:69%}.row .push-69{margin-left:69%}.row .grid-70{width:70%}.row .push-70{margin-left:70%}.row .grid-71{width:71%}.row .push-71{margin-left:71%}.row .grid-72{width:72%}.row .push-72{margin-left:72%}.row .grid-73{width:73%}.row .push-73{margin-left:73%}.row .grid-74{width:74%}.row .push-74{margin-left:74%}.row .grid-75{width:75%}.row .push-75{margin-left:75%}.row .grid-76{width:76%}.row .push-76{margin-left:76%}.row .grid-77{width:77%}.row .push-77{margin-left:77%}.row .grid-78{width:78%}.row .push-78{margin-left:78%}.row .grid-79{width:79%}.row .push-79{margin-left:79%}.row .grid-80{width:80%}.row .push-80{margin-left:80%}.row .grid-81{width:81%}.row .push-81{margin-left:81%}.row .grid-82{width:82%}.row .push-82{margin-left:82%}.row .grid-83{width:83%}.row .push-83{margin-left:83%}.row .grid-84{width:84%}.row .push-84{margin-left:84%}.row .grid-85{width:85%}.row .push-85{margin-left:85%}.row .grid-86{width:86%}.row .push-86{margin-left:86%}.row .grid-87{width:87%}.row .push-87{margin-left:87%}.row .grid-88{width:88%}.row .push-88{margin-left:88%}.row .grid-89{width:89%}.row .push-89{margin-left:89%}.row .grid-90{width:90%}.row .push-90{margin-left:90%}.row .grid-91{width:91%}.row .push-91{margin-left:91%}.row .grid-92{width:92%}.row .push-92{margin-left:92%}.row .grid-93{width:93%}.row .push-93{margin-left:93%}.row .grid-94{width:94%}.row .push-94{margin-left:94%}.row .grid-95{width:95%}.row .push-95{margin-left:95%}.row .grid-96{width:96%}.row .push-96{margin-left:96%}.row .grid-97{width:97%}.row .push-97{margin-left:97%}.row .grid-98{width:98%}.row .push-98{margin-left:98%}.row .grid-99{width:99%}.row .push-99{margin-left:99%}.row .grid-100{width:100%}.row .push-100{margin-left:100%}@media screen and (max-width: 960px){.row *[class*='col-'].col-desktop-push-0{margin-left:1%}.row .col-desktop-1{width:6.33333%}.row .col-desktop-1.alpha,.row .col-desktop-1.omega{width:7.33333%}.row *[class*='col-'].col-desktop-push-1{margin-left:9.33333%}.row .col-desktop-2{width:14.66667%}.row .col-desktop-2.alpha,.row .col-desktop-2.omega{width:15.66667%}.row *[class*='col-'].col-desktop-push-2{margin-left:17.66667%}.row .col-desktop-3{width:23%}.row .col-desktop-3.alpha,.row .col-desktop-3.omega{width:24%}.row *[class*='col-'].col-desktop-push-3{margin-left:26%}.row .col-desktop-4{width:31.33333%}.row .col-desktop-4.alpha,.row .col-desktop-4.omega{width:32.33333%}.row *[class*='col-'].col-desktop-push-4{margin-left:34.33333%}.row .col-desktop-5{width:39.66667%}.row .col-desktop-5.alpha,.row .col-desktop-5.omega{width:40.66667%}.row *[class*='col-'].col-desktop-push-5{margin-left:42.66667%}.row .col-desktop-6{width:48%}.row .col-desktop-6.alpha,.row .col-desktop-6.omega{width:49%}.row *[class*='col-'].col-desktop-push-6{margin-left:51%}.row .col-desktop-7{width:56.33333%}.row .col-desktop-7.alpha,.row .col-desktop-7.omega{width:57.33333%}.row *[class*='col-'].col-desktop-push-7{margin-left:59.33333%}.row .col-desktop-8{width:64.66667%}.row .col-desktop-8.alpha,.row .col-desktop-8.omega{width:65.66667%}.row *[class*='col-'].col-desktop-push-8{margin-left:67.66667%}.row .col-desktop-9{width:73%}.row .col-desktop-9.alpha,.row .col-desktop-9.omega{width:74%}.row *[class*='col-'].col-desktop-push-9{margin-left:76%}.row .col-desktop-10{width:81.33333%}.row .col-desktop-10.alpha,.row .col-desktop-10.omega{width:82.33333%}.row *[class*='col-'].col-desktop-push-10{margin-left:84.33333%}.row .col-desktop-11{width:89.66667%}.row .col-desktop-11.alpha,.row .col-desktop-11.omega{width:90.66667%}.row *[class*='col-'].col-desktop-push-11{margin-left:92.66667%}.row .col-desktop-12{width:98%}.row .col-desktop-12.alpha,.row .col-desktop-12.omega{width:99%}.row *[class*='col-'].col-desktop-push-12{margin-left:101%}}@media screen and (max-width: 800px){.row *[class*='col-'].col-tablet-push-0{margin-left:1%}.row .col-tablet-1{width:6.33333%}.row .col-tablet-1.alpha,.row .col-tablet-1.omega{width:7.33333%}.row *[class*='col-'].col-tablet-push-1{margin-left:9.33333%}.row .col-tablet-2{width:14.66667%}.row .col-tablet-2.alpha,.row .col-tablet-2.omega{width:15.66667%}.row *[class*='col-'].col-tablet-push-2{margin-left:17.66667%}.row .col-tablet-3{width:23%}.row .col-tablet-3.alpha,.row .col-tablet-3.omega{width:24%}.row *[class*='col-'].col-tablet-push-3{margin-left:26%}.row .col-tablet-4{width:31.33333%}.row .col-tablet-4.alpha,.row .col-tablet-4.omega{width:32.33333%}.row *[class*='col-'].col-tablet-push-4{margin-left:34.33333%}.row .col-tablet-5{width:39.66667%}.row .col-tablet-5.alpha,.row .col-tablet-5.omega{width:40.66667%}.row *[class*='col-'].col-tablet-push-5{margin-left:42.66667%}.row .col-tablet-6{width:48%}.row .col-tablet-6.alpha,.row .col-tablet-6.omega{width:49%}.row *[class*='col-'].col-tablet-push-6{margin-left:51%}.row .col-tablet-7{width:56.33333%}.row .col-tablet-7.alpha,.row .col-tablet-7.omega{width:57.33333%}.row *[class*='col-'].col-tablet-push-7{margin-left:59.33333%}.row .col-tablet-8{width:64.66667%}.row .col-tablet-8.alpha,.row .col-tablet-8.omega{width:65.66667%}.row *[class*='col-'].col-tablet-push-8{margin-left:67.66667%}.row .col-tablet-9{width:73%}.row .col-tablet-9.alpha,.row .col-tablet-9.omega{width:74%}.row *[class*='col-'].col-tablet-push-9{margin-left:76%}.row .col-tablet-10{width:81.33333%}.row .col-tablet-10.alpha,.row .col-tablet-10.omega{width:82.33333%}.row *[class*='col-'].col-tablet-push-10{margin-left:84.33333%}.row .col-tablet-11{width:89.66667%}.row .col-tablet-11.alpha,.row .col-tablet-11.omega{width:90.66667%}.row *[class*='col-'].col-tablet-push-11{margin-left:92.66667%}.row .col-tablet-12{width:98%}.row .col-tablet-12.alpha,.row .col-tablet-12.omega{width:99%}.row *[class*='col-'].col-tablet-push-12{margin-left:101%}}@media screen and (max-width: 600px){.row *[class*='col-'].col-phablet-push-0{margin-left:1%}.row .col-phablet-1{width:6.33333%}.row .col-phablet-1.alpha,.row .col-phablet-1.omega{width:7.33333%}.row *[class*='col-'].col-phablet-push-1{margin-left:9.33333%}.row .col-phablet-2{width:14.66667%}.row .col-phablet-2.alpha,.row .col-phablet-2.omega{width:15.66667%}.row *[class*='col-'].col-phablet-push-2{margin-left:17.66667%}.row .col-phablet-3{width:23%}.row .col-phablet-3.alpha,.row .col-phablet-3.omega{width:24%}.row *[class*='col-'].col-phablet-push-3{margin-left:26%}.row .col-phablet-4{width:31.33333%}.row .col-phablet-4.alpha,.row .col-phablet-4.omega{width:32.33333%}.row *[class*='col-'].col-phablet-push-4{margin-left:34.33333%}.row .col-phablet-5{width:39.66667%}.row .col-phablet-5.alpha,.row .col-phablet-5.omega{width:40.66667%}.row *[class*='col-'].col-phablet-push-5{margin-left:42.66667%}.row .col-phablet-6{width:48%}.row .col-phablet-6.alpha,.row .col-phablet-6.omega{width:49%}.row *[class*='col-'].col-phablet-push-6{margin-left:51%}.row .col-phablet-7{width:56.33333%}.row .col-phablet-7.alpha,.row .col-phablet-7.omega{width:57.33333%}.row *[class*='col-'].col-phablet-push-7{margin-left:59.33333%}.row .col-phablet-8{width:64.66667%}.row .col-phablet-8.alpha,.row .col-phablet-8.omega{width:65.66667%}.row *[class*='col-'].col-phablet-push-8{margin-left:67.66667%}.row .col-phablet-9{width:73%}.row .col-phablet-9.alpha,.row .col-phablet-9.omega{width:74%}.row *[class*='col-'].col-phablet-push-9{margin-left:76%}.row .col-phablet-10{width:81.33333%}.row .col-phablet-10.alpha,.row .col-phablet-10.omega{width:82.33333%}.row *[class*='col-'].col-phablet-push-10{margin-left:84.33333%}.row .col-phablet-11{width:89.66667%}.row .col-phablet-11.alpha,.row .col-phablet-11.omega{width:90.66667%}.row *[class*='col-'].col-phablet-push-11{margin-left:92.66667%}.row .col-phablet-12{width:98%}.row .col-phablet-12.alpha,.row .col-phablet-12.omega{width:99%}.row *[class*='col-'].col-phablet-push-12{margin-left:101%}}@media screen and (max-width: 400px){.row *[class*='col-'].col-mobile-push-0{margin-left:1%}.row .col-mobile-1{width:6.33333%}.row .col-mobile-1.alpha,.row .col-mobile-1.omega{width:7.33333%}.row *[class*='col-'].col-mobile-push-1{margin-left:9.33333%}.row .col-mobile-2{width:14.66667%}.row .col-mobile-2.alpha,.row .col-mobile-2.omega{width:15.66667%}.row *[class*='col-'].col-mobile-push-2{margin-left:17.66667%}.row .col-mobile-3{width:23%}.row .col-mobile-3.alpha,.row .col-mobile-3.omega{width:24%}.row *[class*='col-'].col-mobile-push-3{margin-left:26%}.row .col-mobile-4{width:31.33333%}.row .col-mobile-4.alpha,.row .col-mobile-4.omega{width:32.33333%}.row *[class*='col-'].col-mobile-push-4{margin-left:34.33333%}.row .col-mobile-5{width:39.66667%}.row .col-mobile-5.alpha,.row .col-mobile-5.omega{width:40.66667%}.row *[class*='col-'].col-mobile-push-5{margin-left:42.66667%}.row .col-mobile-6{width:48%}.row .col-mobile-6.alpha,.row .col-mobile-6.omega{width:49%}.row *[class*='col-'].col-mobile-push-6{margin-left:51%}.row .col-mobile-7{width:56.33333%}.row .col-mobile-7.alpha,.row .col-mobile-7.omega{width:57.33333%}.row *[class*='col-'].col-mobile-push-7{margin-left:59.33333%}.row .col-mobile-8{width:64.66667%}.row .col-mobile-8.alpha,.row .col-mobile-8.omega{width:65.66667%}.row *[class*='col-'].col-mobile-push-8{margin-left:67.66667%}.row .col-mobile-9{width:73%}.row .col-mobile-9.alpha,.row .col-mobile-9.omega{width:74%}.row *[class*='col-'].col-mobile-push-9{margin-left:76%}.row .col-mobile-10{width:81.33333%}.row .col-mobile-10.alpha,.row .col-mobile-10.omega{width:82.33333%}.row *[class*='col-'].col-mobile-push-10{margin-left:84.33333%}.row .col-mobile-11{width:89.66667%}.row .col-mobile-11.alpha,.row .col-mobile-11.omega{width:90.66667%}.row *[class*='col-'].col-mobile-push-11{margin-left:92.66667%}.row .col-mobile-12{width:98%}.row .col-mobile-12.alpha,.row .col-mobile-12.omega{width:99%}.row *[class*='col-'].col-mobile-push-12{margin-left:101%}}

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

@import "compass/css3";

$max_width       : 1200px;
$grid_gutter     : 2%;

$viewports_width : '960px', '800px', '600px', '400px';
$viewports_title : 'desktop', 'tablet', 'phablet', 'mobile';

.row {
    width: 100%;
    max-width: $max_width;
    margin: 0 auto;
    padding: 0 10px;

    // Grid
    *[class*='grid-'] {
        @include box-sizing(border-box);
        float: left;
    }

    // Cols
    *[class*='col-'] {
        float: left;
        @include box-sizing(border-box);
        margin-left: $grid_gutter/2;
        margin-right: $grid_gutter/2;

        &.alpha { margin-left: 0%; }
        &.omega { margin-right: 0%; }
    }

    // Cols loop
    @for $a from 1 through 12 {
        .col-#{$a} {
            width: (100% / 12 * $a)-$grid_gutter;

            &.alpha,
            &.omega  { width: (100% / 12 * $a) - $grid_gutter/2; }
        }

        // Push collumns
        *[class*='col-'].col-push-#{$a} {
            margin-left:(100% / 12 * $a)+$grid_gutter/2;
        }
    }

    // Grid push
    @for $i from 1 through 100 {
        .grid-#{$i*1} { width: #{$i*1%}; }
        .push-#{$i*1} { margin-left: #{$i*1%}; }
    }

    @for $vp from 1 through length($viewports_width) {

        @media screen and (max-width: #{nth($viewports_width, $vp)}) {

            *[class*='col-'].col-#{nth($viewports_title, $vp)}-push-0 {
                margin-left:$grid_gutter/2;
            }

            @for $a from 1 through 12 {
                .col-#{nth($viewports_title, $vp)}-#{$a} {
                    width: (100% / 12 * $a)-$grid_gutter;

                    &.alpha,
                    &.omega  { width: (100% / 12 * $a) - $grid_gutter/2; }
                }
                // Push collumns
                *[class*='col-'].col-#{nth($viewports_title, $vp)}-push-#{$a} {
                    margin-left:(100% / 12 * $a)+$grid_gutter/2;
                }
            }
        }
    }
}