Question

我找到并更改了一些代码，因此可以使用它，但我遗漏了一件事。

$map: (1025: 12,768: 6 ,320: 1);

@each $point , $columns in $map {
  @if $point == 320 {
    @for $i from 1 through $columns {
      @media (max-width: $point + px) {
        $equ: 100% / $i;

        .col-#{$i}-m {
          width: $equ;
        }
      }
    }
  }@else if $point == 1025 {
    @for $i from 1 through $columns {
      @media (min-width: $point + px) {
        $equ: 100% / $i;

        .col-#{$columns} {
          width: $equ;
        }

        .offset-#{$i} {
          margin-left: $equ;
        }
      }
    }
  }@else if $point == 768 {
    @for $i from 1 through $columns {
      @media (min-width: $point + px) and (max-width: 1024px) {
        $equ: 100% / $i;

        .col-#{$columns}-t {
          width: $equ;
        }

        .offset-#{$i}-t {
          margin-left: $equ;
        }
      }
    }
  }
}

这是我的网格。我不能使用引导程序，所以我做了自己的。由此，我得到这个CSS。我将为桌面视图粘贴CSS，因为它们的工作原理相同。

@media (min-width: 1025px) {
  .col-1 {
    width: 100%; }
  .offset-1 {
    margin-left: 100%; } }

@media (min-width: 1025px) {
  .col-2 {
    width: 50%; }
  .offset-2 {
    margin-left: 50%; } }

@media (min-width: 1025px) {
  .col-3 {
    width: 33.33333%; }
  .offset-3 {
    margin-left: 33.33333%; } }

@media (min-width: 1025px) {
  .col-4 {
    width: 25%; }
  .offset-4 {
    margin-left: 25%; } }

@media (min-width: 1025px) {
  .col-5 {
    width: 20%; }
  .offset-5 {
    margin-left: 20%; } }

@media (min-width: 1025px) {
  .col-6 {
    width: 16.66667%; }
  .offset-6 {
    margin-left: 16.66667%; } }

@media (min-width: 1025px) {
  .col-7 {
    width: 14.28571%; }
  .offset-7 {
    margin-left: 14.28571%; } }

@media (min-width: 1025px) {
  .col-8 {
    width: 12.5%; }
  .offset-8 {
    margin-left: 12.5%; } }

@media (min-width: 1025px) {
  .col-9 {
    width: 11.11111%; }
  .offset-9 {
    margin-left: 11.11111%; } }

@media (min-width: 1025px) {
  .col-10 {
    width: 10%; }
  .offset-10 {
    margin-left: 10%; } }

@media (min-width: 1025px) {
  .col-11 {
    width: 9.09091%; }
  .offset-11 {
    margin-left: 9.09091%; } }

@media (min-width: 1025px) {
  .col-12 {
    width: 8.33333%; }
  .offset-12 {
    margin-left: 8.33333%; } }

我需要将输出反转。例如，col-1应该为width: 8.33333%;或col-12应该为width: 100%;。基本上，我需要反转数字，但是无论我如何尝试，总是一样。.

Answer 1

执行此操作时：

$equ: 100% / $i;

.col-#{$i}-m {
     width: $equ;
}

考虑循环将导致什么。首先，我将为1，100％除以1为100％。您希望哪一个是100％/ numberofcols。

类似这样的东西：

$equ: 100% / ($columns + 1 - $i);

.col-#{$i}-m {
     width: $equ;
}

Answer 2

@Oliver Orchard给我一个提示后，我设法解决了这个问题。这是代码：

public function createCsvTable($file_name, $lines)
    {
        $tableCreation = "CREATE TABLE IF NOT EXISTS " . $file_name . "(
            id int (11),
            Name VARCHAR(30), 
            Datum VARCHAR(30), 
            Property VARCHAR(30), 
            Criterion VARCHAR(30), 
            Type VARCHAR(30), 
            Nominal DECIMAL(10,2), 
            Actual DECIMAL(10,2), 
            Tolminus DECIMAL(10,2), 
            Tolplus DECIMAL(10,2), 
            Dev DECIMAL(10,2)
          );";
          $stmt = execute($tableCreation);

          $insertion = "INSERT INTO " . $file_name . "(
            id, Name, Datum, Property, Criterion, Type, 
            Nominal, Actual, Tolminus, Tolplus, Dev
          ) 
          VALUES 
            (
              ?,?,?,?,?,?, 
              ?,?,?,?,?
            );");
         $stmt = prepare($insertion);
         foreach ($lines as $line) {
             $stmt->bindParam(1, $line[0]);
             // do for every parameter
             $stmt->execute();
         }

    }

感谢帮助！

用mixins建立网格

2 个答案: