Pertanyaan Bagaimana cara menggunakan banyak variabel Stylus di calc ()?


Semuanya ada di judul. Saya tidak bisa memasukkan beberapa variabel Stylus dalam fungsi CSS calc ().

Saya membuat kode Sass, saya akan mengubah diri saya di bawah Stylus:

// *.scss

$gutter : 1rem;

.sizeXS-m10 {
    width: calc(#{100% / 12 * 10} - #{$gutter});
}

Untuk satu variabel, tidak masalah:

// *.styl

$gutter = 1rem

.sizeXS-m10
  width 'calc(100% / 12 * 10 - %s)' % $gutter

Hal-hal menjadi rumit ketika mencoba mengintegrasikan hasil operasi ini dalam sebuah variabel:

100% / 12 * 10

4
2017-11-14 08:18


asal


Jawaban:


Bungkus saja nilainya ke dalam tanda kurung, seperti ini:

// *.styl

$gutter = 1rem

.sizeXS-m10
  width 'calc(%s / %s * %s - %s)' % (100% 12 10 $gutter)

7
2017-11-14 13:53



Dia menempatkan saya di trek:

// *.styl

$gutter = 1rem

.sizeXS-m10
  width 'calc(%s - %s)' % ((100% / 12 * 10) $gutter)

1
2017-11-14 15:49



Stylus melarikan diri semua isi fungsi calc

/* .stylus */
.test1 
  $offset = 5px
  $mult = 3
  height calc(1em + $offset * $mult)
/* .css */
.test1 {
  height: calc(1em + $offset * $mult);
}

sehingga Anda dapat menggunakan operator seperti sprintf % tapi itu tidak benar-benar mudah dibaca

/* .stylus */
.test2
  $offset = 5px
  $mult = 3
  height 'calc(1em + %s * %s)' % ($offset $mult)
/* .css */
.test2 {
  height: calc(1em + 5px * 3);
}

Anda bisa membuat calc2() mixin yang digunakan calc() tetapi stylus akan mencoba melakukan operasi

/* .stylus */
calc2($expr...)
  'calc(%s)' % $expr
.test3
  $offset = 5px
  $mult = 3
  height calc2(1em + $offset * $mult)
/* .css */
.test3 {
  height: calc(16em);
}

jadi Anda harus melarikan diri dari semua operator. Saya pikir lebih mudah dibaca daripada metode sprintf

/* .stylus */
calc2($expr...)
  'calc(%s)' % $expr
.test4
  $offset = 5px
  $mult = 3
  height calc2(1em \+ $offset \* $mult)
/* .css */
.test4 {
  height: calc(1em + 5px * 3);
}

jika mau, Anda dapat mengganti nama calc2() mixin calc(), itu berhasil

/* .stylus */
calc($expr...)
  'calc(%s)' % $expr
.test5
  $offset = 5px
  $mult = 3
  height calc(1em \+ $offset \* $mult)
/* .css */
.test5 {
  height: calc(1em + 5px * 3);
}

atau jika Anda tidak ingin membuat mix, Anda dapat menggunakan calc() dengan kasus lain ( Case()atau CASE() sebagai contoh)

/* .stylus */
.test6
  $offset = 5px
  $mult = 3
  height Calc(1em \+ $offset \* $mult)
/* .css */
.test6 {
  height: Calc(1em + 5px * 3);
}

0
2017-07-13 08:51