Заставить SASS не вычислять содержимое переменной? - PullRequest
Новая
       32

Заставить SASS не вычислять содержимое переменной?

0 голосов
/ 30 мая 2018

я с этой проблемой?

Я пытаюсь использовать mxin для grid-row и grid-column в этом формате: 

@mixin grid-row($row){
    grid-row: $row;
    -ms-grid-row: $row;
}

@mixin grid-column($column){
    grid-column: $column;
    -ms-grid-column: $column;
}

Но в случае, когда я использую значенияКак и 1/3, SASS вычисляет значение вместо прямой печати значения.

Результат в скомпилированном css: 

grid-row: 0.3333333333;
-ms-grid-row: 0.3333333333;
grid-column: 0.3333333333;
-ms-grid-column: 0.3333333333;

Имеет метод, чтобы заставить SASS напечатать это значение diretamente(как строка)?

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

Ответы [ 2 ]

0 голосов
/ 30 мая 2018

Вы можете сделать это с помощью интерполяции , просто поместите значение так #{"value"} 

@mixin grid-row($row){
    grid-row: $row;
   -ms-grid-row: $row;
}

@mixin grid-column($column){
    grid-column: $column;
    -ms-grid-column: $column;
}

.item {
  @include grid-row(#{"1/3"});
  @include grid-column(#{"1/2"});
}

результат будет таким: 

.item {
  grid-row: 1/3;
  -ms-grid-row: 1/3;
  grid-column: 1/2;
  -ms-grid-column: 1/2;
}
0 голосов
/ 30 мая 2018

Пока я сделал это таким образом, и он работал нормально: 

@mixin grid-row ($init, $end: null) {

    @if ($end) {
        grid-row: #{$init + " / " + $end};
        -ms-grid-row: #{$init + " / " + $ end};
    }

    @else {
        grid-row: $init;
        -ms-grid-row: $init;
    }

}

@mixin grid-column ($init, $end: null) {
    @if ($end) {
        grid-column: #{$ init + " / " + $end};
        -ms-grid-column: #{$init + " / " + $end};
    }

    @else {
        grid-column: $init;
        -ms-grid-column: $init;
    }
}

Я все еще хотел бы знать, есть ли способ заставить SASS не вычислять содержимое переменных.

Спасибо!

...