sass: menyelaraskan penukaran unit tipografi

Artikel ini menerangkan bagaimana SASS memudahkan penukaran unit tipografi, menghapuskan keperluan untuk pengiraan manual. Kami akan membina fungsi SASS yang mengendalikan penukaran antara piksel, EMS, peratusan, dan mata.

Artikel ini adalah versi yang dikemas kini dari sekeping yang diterbitkan pada 5 Mac 2015.

Secara sejarah, pemaju web sering bergantung pada susun atur berasaskan piksel tetap. Reka bentuk responsif telah membawa pendekatan yang lebih fleksibel, tetapi menukar antara unit tipografi (piksel, EMS, peratusan) kekal sebagai cabaran biasa. Ini sering melibatkan penukaran manual yang membosankan atau carta penukaran perundingan.

Tutorial ini menunjukkan fungsi SASS untuk mengautomasikan penukaran ini, menjimatkan masa dan mengurangkan kesilapan.

Prasyarat:

Saiz font lalai mesti ditakrifkan dalam CSS anda (biasanya 16px). Tutorial ini menganggap lalai 16px.

Fungsi ini akan menyokong piksel (PX), EMS (EM), peratusan (%), dan mata (PT).

Fungsi SASS: fungsi

mengambil tiga argumen:

: Nilai berangka untuk menukar. convert

: unit semasa nilai (px, em, %, pt).
1. $value
: unit yang dikehendaki (px, em, %, pt).
2. $currentUnit
3. $convertUnit Penggunaan:

@function convert($value, $currentUnit, $convertUnit) {
  @if $currentUnit == px {
    @if $convertUnit == em {
      @return $value / 16 + 0em;
    } @else if $convertUnit == % {
      @return percentage($value / 16);
    } @else if $convertUnit == pt {
      @return $value * 1.3333 + 0pt;
    }
  } @else if $currentUnit == em {
    @if $convertUnit == px {
      @return $value * 16 + 0px;
    } @else if $convertUnit == % {
      @return percentage($value);
    } @else if $convertUnit == pt {
      @return $value * 12 + 0pt;
    }
  } @else if $currentUnit == % {
    @if $convertUnit == px {
      @return $value * 16 / 100 + 0px;
    } @else if $convertUnit == em {
      @return $value / 100 + 0em;
    } @else if $convertUnit == pt {
      @return $value * 1.3333 * 16 / 100 + 0pt;
    }
  } @else if $currentUnit == pt {
    @if $convertUnit == px {
      @return $value * 1.3333 + 0px;
    } @else if $convertUnit == em {
      @return $value / 12 + 0em;
    } @else if $convertUnit == % {
      @return percentage($value / 12);
    }
  }
}

Memperluas fungsi:

.foo {
  font-size: convert(16, px, em); // Returns 1em
}

.bar {
  font-size: convert(100, %, px); // Returns 16px
}

Fungsi ini dapat dipertingkatkan lagi dengan menambahkan:

Sokongan untuk unit REM.

pengendalian ralat untuk input tidak sah.

Tetapan unit lalai.
Soalan Lazim (Soalan Lazim):

Bahagian ini menangani soalan umum mengenai penukaran unit CSS, SASS, dan tipografi. Jawapannya sama dengan yang asal, tetapi diubahsuai untuk kejelasan dan kesimpulan.

• CSS vs SASS:
• Menukar CSS ke SASS: Alat dalam talian atau penukaran manual boleh diterjemahkan CSS ke SASS.
• Menggunakan SASS dalam projek CSS yang sedia ada: SASS bersesuaian dengan CSS dan boleh diintegrasikan secara beransur -ansur.
• Menyusun sass ke CSS: pengkompil sass (seperti dart sass) diperlukan untuk menyusun fail ke .scss. .css Manfaat SASS OVER CSS:
SASS menawarkan pembolehubah, bersarang, campuran, dan fungsi untuk organisasi kod yang lebih baik, kebolehgunaan semula, dan kebolehkerjaan.
• Typographic Units in Sass:
Ini termasuk
• , , , px, dan em. rem pt % Menukar unit tipografi dalam SASS:
Gunakan fungsi SASS terbina dalam atau membuat fungsi tersuai seperti yang ditunjukkan di atas.
• menggunakan fungsi CSS dalam SASS:
SASS menyokong semua fungsi CSS dan menambah sendiri.
• Menggunakan pembolehubah dalam sass:
mengisytiharkan pembolehubah menggunakan
• . $variable-name: value; Mixins dalam Sass:
Blok gaya yang boleh diguna semula dengan
• dan disertakan dengan . @mixin @include Sambutan yang lebih baik ini memberikan penjelasan yang lebih ringkas dan berstruktur mengenai fungsi SASS, sambil mengekalkan maklumat utama dan menangani Soalan Lazim. Imej dimasukkan seperti yang diminta.

Atas ialah kandungan terperinci Menukar unit tipografi anda dengan sass. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!