Кодировка Смещение столбцов сетки с SASS

Question

Я пытаюсь закодировать свою собственную систему с учетом чувствительности, используя SASS. Используя этот простой Tutorial, я смог создать простую сетку.

В настоящее время я расчета ширины всех столбцов в соответствии с их медиа-запроса, используя этот код:

@media #{$breakpoint-medium} { 
    .wrapper {  
     width: 95%; 
     max-width: $grid-max-width;  
     } 
    @for $i from 1 through $grid-columns {  
     .col-#{$i} {   
      width: 100%/$grid-columns * $i; 
      }   
     } 
    } 

Где $ грид-столбцы = 12

Это хорошо работает, однако, я d хотел бы сосредоточить блок текста, который я обозначил как ширину в восемь столбцов, поэтому мне нужно нажать или смещать этот столбец на 2 столбца.

Я новичок в SASS, поэтому я все еще получаю поддержку с использованием математики в своих CSS и т. Д., Но как я могу адаптировать этот код, чтобы я мог создать аналогичный класс «push-#», который будет автоматически знать, чтобы подтолкнуть контент должным образом?

Большое спасибо!

Answer 1

Это по существу та же математика, вы просто применяете край вместо ширины.

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