div {
<strong i="5">@value</strong>: 1px;
a: <strong i="6">@value</strong> * 1rem; // 1px - ok
b: <strong i="7">@value</strong> * 1px * 1rem; // 1px - ok
d: <strong i="8">@value</strong> / 1px; // 1px - ok
c: <strong i="9">@value</strong> / 1px * 1rem; // 1rem - unexpected
e: <strong i="10">@value</strong> / 1px + 0rem; // 1rem - unexpected
}
c
ΠΈ d
Π²ΡΡΠ΅ΡΠΏΠΎΠΌΡΠ½ΡΡΡΠ΅ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΡ ΠΏΡΠΎΡΠΈΠ²ΠΎΡΠ΅ΡΠ°Ρ http://lesscss.org/features/#features -overview-feature-operations Π·Π°ΡΠ²Π»Π΅Π½ΠΈΡ, ΡΡΠΎ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅ΡΡ ΠΊΡΠ°ΠΉΠ½ΡΡ Π»Π΅Π²ΡΡ Π΅Π΄ΠΈΠ½ΠΈΡΡ Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΡ (Ρ.Π΅. Π²ΡΠ΅ Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²ΡΡΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡΡΡ 1px
). Π’Π΅ΡΡΡ ΠΎΡ
Π²Π°ΡΡΠ²Π°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ a / b / c
ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠ»ΡΡΠ°ΠΉΠ½ΠΎ Π΄Π°Π΅Ρ ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌΡΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ.
ΠΡΠ½ΠΎΡΠΈΡΡΡ ΠΊ β 2418 ΠΈ β 2472.
Π§Π΅ΡΡΠ½ΠΎ Π³ΠΎΠ²ΠΎΡΡ, Ρ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π±ΡΠ» ΠΏΠΎΠΊΠ»ΠΎΠ½Π½ΠΈΠΊΠΎΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΡΠΌΠ΅ΡΠΈΠ²Π°ΡΡ Π΅Π΄ΠΈΠ½ΠΈΡΡ Π² Less. ΠΡΠΎ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠΌΡΡΠ»Π° Ρ ΠΌΠ°ΡΠ΅ΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ, ΠΈ, ΠΊΠ°ΠΊ Π²Ρ ΠΎΡΠΌΠ΅ΡΠΈΠ»ΠΈ, Π²ΡΠ΅ ΠΎΡΠ½ΠΎΠ²Π°Π½ΠΎ Π½Π° ΠΏΠΎΡΡΠ΄ΠΊΠ΅ ΠΎΡΠ΅Π½ΠΊΠΈ ... ΡΡΠΎ ΡΠ°ΠΊΠΆΠ΅ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠΌΡΡΠ»Π°.
ΠΠ΄Π½Π°ΠΊΠΎ, ΠΊΠΎΠ³Π΄Π° Ρ ΠΏΠΎΡΠΌΠΎΡΡΠ΅Π» Π½Π° ΠΊΠΎΠ΄ strictUnits
, ΡΡΠΎ ΡΠΎΠΆΠ΅ Π½Π΅ ΠΈΠΌΠ΅Π»ΠΎ Π΄Π»Ρ ΠΌΠ΅Π½Ρ ΡΠΌΡΡΠ»Π°. ΠΡΠΎ ΡΠΎΠΆΠ΅ Π½Π΅ ΠΏΠΎΡ
ΠΎΠΆΠ΅ Π½Π° ΡΠΎ, ΡΡΠΎ Ρ Π΄ΡΠΌΠ°Π».
Π’Π°ΠΊ ΡΡΠΎ Π΄Π°, ΡΡΠΎ ΡΡΡΠ°Π½Π½ΠΎ, Π½ΠΎ Ρ Π½Π΅ ΡΠΊΠ»ΠΎΠ½Π΅Π½ ΡΡΠΈΡΠ°ΡΡ, ΡΡΠΎ ΡΡΠΎ ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½ΠΎ. Π― Π±ΠΎΠ»Π΅Π΅ ΡΠΊΠ»ΠΎΠ½Π΅Π½ ΠΊ ΠΈΡΡΠ΅Π·Π½ΠΎΠ²Π΅Π½ΠΈΡ ΠΌΠ°ΡΠ΅ΠΌΠ°ΡΠΈΠΊΠΈ ΡΠΎ ΡΠΌΠ΅ΡΠ°Π½Π½ΡΠΌΠΈ Π΅Π΄ΠΈΠ½ΠΈΡΠ°ΠΌΠΈ. ΠΠΎ ΡΡΠΎ ΡΠΎΠ»ΡΠΊΠΎ Ρ. ΠΠ°ΠΊ ΠΈ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ 1px * 1px
Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ 1px^2
(Π±Π΅ΡΠΏΠΎΠ»Π΅Π·Π½ΠΎ, Π½ΠΎ Π²Π΅ΡΠ½ΠΎ). Π ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ 1px / 1px
Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ 1
. Sass ΡΠ»ΠΈΡΠΊΠΎΠΌ ΡΠ»ΠΎΠΆΠ΅Π½ Π² Π½Π΅ΠΊΠΎΡΠΎΡΡΡ
Π²ΠΈΠ΄Π°Ρ
ΠΌΠ°ΡΠ΅ΠΌΠ°ΡΠΈΠΊΠΈ, Π½ΠΎ ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π±Π°Π·ΠΎΠ²ΡΠ΅ ΠΌΠ°ΡΠ΅ΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΏΡΠΈΠ½ΡΠΈΠΏΡ Π΄Π»Ρ ΡΠ°ΠΊΠΈΡ
Π²Π΅ΡΠ΅ΠΉ, ΠΊΠ°ΠΊ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡ ΠΌΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ.
<strong i="13">@value</strong> / 1px * 1rem
ΠΠ°ΡΠ΅ΠΌΠ°ΡΠΈΠΊΠ° Π·Π΄Π΅ΡΡ 10px / 1px
. ΠΡΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π΄Π°ΡΡ 1
(Π½Π΅ Π² Less, ΠΏΡΠΎΡΡΠΎ Π² ΠΏΡΠΈΠ½ΡΠΈΠΏΠ΅, Π° Π² Sass). 1 * 1rem = 1rem
. ΠΠ΅ ΠΎΠ±ΠΈΠΆΠ°ΠΉΡΠ΅ΡΡ Π½Π° Alexis Π·Π° ΠΏΡΠΎΠΈΡΡ
ΠΎΠΆΠ΄Π΅Π½ΠΈΠ΅ ΡΡΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΈ, Π½ΠΎ Π²ΡΠ±ΠΎΡ ΠΏΠ΅ΡΠ²ΠΎΠΉ Π΅Π΄ΠΈΠ½ΠΈΡΡ Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΎΡΡΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΡΡΠ°Π½Π½ΡΠΉ, ΡΡΡΠ΄Π½ΡΠΉ Π΄Π»Ρ ΠΎΡΠ΅Π½ΠΊΠΈ ΠΈ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ ΠΊ ΡΡΠΈΠΌ ΠΊΡΠ°ΠΉΠ½ΠΈΠΌ ΡΠ»ΡΡΠ°ΡΠΌ Ρ ΠΎΡΠΈΠ±ΠΊΠ°ΠΌΠΈ.
Π’ΠΎΠ»ΡΠΊΠΎ ΠΌΠΎΠΈ 0,02 Π΄ΠΎΠ»Π»Π°ΡΠ°.
Π― Π΄ΡΠΌΠ°Ρ, ΡΡΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΡΠΈ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅: ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡΠΌ Π² ΠΌΠ°ΡΠ΅ΠΌΠ°ΡΠΈΠΊΠ΅, Π΅ΡΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π² ΡΠΌΠ΅ΡΠ°Π½Π½ΡΡ Π΅Π΄ΠΈΠ½ΠΈΡΠ°Ρ , ΡΠ°ΠΊ ΡΡΠΎ ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ Π΅ΡΡΡ ΡΡΠ΅ΡΠΈΠΉ Π²Π°ΡΠΈΠ°Π½Ρ:
strictUnits: false
- ΠΏΠΎΠΏΡΡΠΊΠ° Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ ΠΌΠ°ΡΠ΅ΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΡ ΠΈ Π΅Π΄ΠΈΠ½ΠΈΡΡ ΠΏΡΠΈΠ½ΡΠΆΠ΄Π΅Π½ΠΈΡstrictUnits: ?
- Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, 1px / 1px // output 1
, 100vh - 10px // output 100vh - 10px
Ρ.Π΅. ΡΠΎ ΡΠΌΠ΅ΡΠ°Π½Π½ΡΠΌΠΈ Π΅Π΄ΠΈΠ½ΠΈΡΠ°ΠΌΠΈ, ΠΎΡΡΠ°Π²ΡΡΠ΅ Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΠΊ Π΅ΡΡΡ ΠΈ Π²ΡΠ²ΠΎΠ΄ - ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π΄Π»Ρ ΠΏΠΎΠ΄Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Π½Π°Π·Π½Π°ΡΠ΅Π½Π½ΡΡ
ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΌ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ
Π² calc () - Π±ΡΠ΄ΡΡΠΈΠΉ Π΄Π΅ΡΠΎΠ»Ρ?strictUnits: true
- Π²ΡΠ²Π΅ΡΡΠΈ ΠΎΡΠΈΠ±ΠΊΡ (Π½Π΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ, ΡΠ΅ΠΌ ΡΡΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ.)ΠΠ΅Π»ΠΎ Π½Π΅ Π² Π»ΠΈΡΠ½ΠΎΠΌ ΠΌΠ½Π΅Π½ΠΈΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ Π΅Π΄ΠΈΠ½ΠΈΡ / Π°ΡΠΈΡΠΌΠ΅ΡΠΈΠΊΠΈ. ΠΠ΅Π»ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΊΠΎΠΌΠΏΠΈΠ»ΡΡΠΎΡ Π½Π΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠΉ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ. (ΠΠ± ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠΌ ΡΠΌ., ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, https://github.com/less/less.js/issues/1366#issuecomment-342361948).
ΠΠ΅Π»ΠΎ Π½Π΅ Π² Π»ΠΈΡΠ½ΠΎΠΌ ΠΌΠ½Π΅Π½ΠΈΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ Π΅Π΄ΠΈΠ½ΠΈΡ / Π°ΡΠΈΡΠΌΠ΅ΡΠΈΠΊΠΈ. Π Π΅ΡΡ ΠΈΠ΄Π΅Ρ ΠΎ ΠΊΠΎΠΌΠΏΠΈΠ»ΡΡΠΎΡΠ΅, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠΉ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ
ΠΠ°, Ρ ΠΏΠΎΠ½ΡΠ». ΠΠΎ Π² ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌ ΠΈΡΠΎΠ³Π΅ ΡΠ΅ΡΡ ΠΈΠ΄Π΅Ρ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΡΡΠΎ Β«ΠΈΡΠΏΡΠ°Π²ΠΈΡΡΒ», Π½Π΅ ΡΠ°ΠΊ Π»ΠΈ? ΠΡΠ°ΠΊ, Ρ ΠΏΡΠΎΡΡΠΎ ΠΎΠΊΠΎΠ»ΡΠ½ΡΠΌ ΠΏΡΡΠ΅ΠΌ Π³ΠΎΠ²ΠΎΡΡ, ΡΡΠΎ Π½Π΅ Π΄ΡΠΌΠ°Ρ, ΡΡΠΎ ΡΡΠΎ ΡΡΠΎΠΈΡ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ, ΡΡΠΎΠ±Ρ ΠΈΡΠΏΡΠ°Π²ΠΈΡΡ, ΠΈ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅ΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΈΠ½ΡΡΠΈΡΠΈΠ²Π½ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅. ΠΠΎ Π΄Π°, ΡΡΠΎ ΠΏΡΠΎΡΡΠΎ ΠΌΠΎΠ΅ ΠΌΠ½Π΅Π½ΠΈΠ΅, ΡΡΠ²Π°ΠΊ.
@ seven-phase-max ΠΡΠΎΡΡΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: Ρ ΠΏΠ΅ΡΠ΅ΠΏΠΈΡΠ°Π» Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² ΡΠ°Π±ΠΎΡΡ Ρ ΡΠ½ΠΈΡΠ°ΠΌΠΈ, ΠΈ Ρ Π½ΠΈΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π±ΡΠ»Π° ΠΊΠ°ΠΊΠ°Ρ-ΡΠΎ ΡΡΡΠ°Π½Π½Π°Ρ Π°ΠΊΡΠΎΠ±Π°ΡΠΈΠΊΠ° Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠ³ΠΎ ΡΠ½ΠΈΡΠ°. Π― ΠΏΠΎΠ½ΡΠ», ΡΡΠΎ ΡΡΠΎ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΠ΅, ΠΊΠΎΠ³Π΄Π° Π»Π΅Π²ΡΠΉ ΡΠ½ΠΈΡ ΠΏΠΎΠ±Π΅ΠΆΠ΄Π°Π΅Ρ, ΠΊΠΎΠ³Π΄Π° ΠΏΠ΅ΡΠ΅Π΄Π°Π΅ΡΡΡ Π²Π°ΡΠΈΠ°Π½Ρ ΠΏΡΠΈΠ½ΡΠΆΠ΄Π΅Π½ΠΈΡ.
(ΠΡΠ»ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΠΌ, Π³Π΄Π΅ ΡΠ°Π·Π½ΡΠ΅ ΠΌΠ½Π΅Π½ΠΈΡ ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΡ
ΡΠ»ΡΡΡΠ΅Π½ΠΈΡΡ
ΡΡΡΠΎΠ³ΠΈΡ
Π΅Π΄ΠΈΠ½ΠΈΡ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ, Π½ΠΎ ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΎ Π±ΡΠ»ΠΎ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½ΠΎ ΠΏΠΎ Π²ΡΠ΅ΠΌΡ ΡΡΠ΅ΠΊΠ΅ΡΡ (ΠΈΠ»ΠΈ, ΠΏΠΎ ΠΊΡΠ°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅ΡΠ΅, Ρ Π½Π΅ ΠΌΠΎΠ³Ρ Π±ΡΡΡΡΠΎ Π½Π°ΠΉΡΠΈ Π²ΡΠ΄Π΅Π»Π΅Π½Π½ΡΡ Π²Π΅ΡΠΊΡ), Ρ Π΄ΡΠΌΠ°Ρ, Ρ ΠΏΡΠΎΡΡΠΎ ΠΎΠ·Π²ΡΡΠΈΠ²Π°Ρ ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΡΠ°ΡΡΡ :)
ΠΠΎΠ΅ Π»ΠΈΡΠ½ΠΎΠ΅ ΠΌΠ½Π΅Π½ΠΈΠ΅ ΠΎ
strictUnits:? - Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, 1px / 1px // Π²ΡΠ²ΠΎΠ΄ 1, 100vh - 10px // Π²ΡΠ²ΠΎΠ΄ 100vh - 10px
ΡΡΠΎ-ΡΠΎ Π²ΡΠΎΠ΄Π΅: Π½Π΅ ΡΡΠΎΠΈΡ (ΠΈΠ·-Π·Π° ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ / ΡΡΠΈΠ»ΠΈΡ). ΠΡΡΠ³ΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΡΠ»ΡΡΡΠ°ΡΡ Π½Π΅ΡΠ΅Π³ΠΎ (ΠΊΡΠΎΠΌΠ΅ ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΡΡ ΠΎΡΠΈΠ±ΠΎΠΊ, ΠΊΠ°ΠΊ ΡΠΊΠ°Π·Π°Π½ΠΎ Π²ΡΡΠ΅).
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΎΠ½ Π±ΡΠ» Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΡΠΌ (Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΠΊΠΎΠ΄ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ΅Ρ
ΠΈ Π΄ΡΡΠ³ΠΈΡ
ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΡΡΠΈΡΠ½ΡΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ / ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ² ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΉ / ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ²), Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΎΠ±ΡΠ°Π±ΠΎΡΠ°ΡΡ Π²ΡΠ΅ ΠΎΠ±ΡΡΠ½ΡΠ΅ Π°ΡΠΈΡΠΌΠ΅ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠ°Π²Π΅Π½ΡΡΠ²Π° ΠΈ, ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π²Π²Π΅ΡΡΠΈ Β«ΠΌΠ½ΠΈΠΌΡΠ΅Β» Π΅Π΄ΠΈΠ½ΠΈΡΡ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ pxΒ²
ΠΈ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΠΉ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΄Π»Ρ a: 1px; b: 2px; c: 4px;
ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌΡΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ a*b/c
(ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΠΎ, ΠΏΡΠΈΠ½ΠΈΠΌΠ°Ρ (a*b)/c = a*(b/c)
) Π±ΡΠ΄Π΅Ρ .5px
ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ a*b
Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ 2pxΒ²
(ΠΏΠΎ ΠΊΡΠ°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅ΡΠ΅, Π²Π½ΡΡΡΠΈ).
ΠΡΡΡ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠ΅ΠΉ (ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΠΎ, Π±ΡΠ»ΠΎ Π±Ρ ΡΡΡΠ°Π½Π½ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΡΡΠΈΡΠ°ΡΡ ΡΠ°ΠΊΠΈΠ΅ Π²Π΅ΡΠΈ, ΠΊΠ°ΠΊ 1/1hz = 1s
ΠΈ Ρ. Π., ΠΠΎ ΡΠΎΡΠΌΠ°Π»ΡΠ½ΠΎ ...) ΠΠΎΠ΄ΡΡΠ΅Ρ Π² ΡΠ΅Π½ΡΠ°Ρ
: Ρ ΡΠΊΠ°Π·Π°Π», ΡΡΠΎ CSS Units
- ΡΡΠΎ ΡΠ»ΠΈΡΠΊΠΎΠΌ Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΌΠ΅Π΄Π²Π΅Π΄Ρ ΡΠΊΠ½ΡΡΡ Π΅Π³ΠΎ Π±Π΅Π· ΠΏΡΠΈΡΠΈΠ½Ρ (Β« ΠΏΡΠΎΡΡΠΎ ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ 1px/1px = 1
Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΈΠ½ΡΡΠΈΡΠΈΠ²Π½ΠΎ ΠΏΠΎΠ½ΡΡΠ½ΡΠΌΒ»).
strictUnits: true - Π²ΡΠ΄Π°ΡΡ ΠΎΡΠΈΠ±ΠΊΡ (Π½Π΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ, ΡΠ΅ΠΌ ΡΡΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ.)
Π ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ, Π΅ΡΠ»ΠΈ ΠΊΠΎΠΌΡ-ΡΠΎ Π½Π΅ Π½ΡΠ°Π²ΠΈΡΡΡ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½ΠΈΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡ ΠΈ / ΠΈΠ»ΠΈ ΡΠΌΠ΅ΡΠ°Π½Π½ΡΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡΡ, ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ Π²Π²Π΅ΡΡΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΡΡΠΎΠ³ΠΈΠΉ ΡΡΠΈΠ»Ρ ΠΊΠΎΠ΄ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, Π½Π΅ ΡΠ°Π·ΡΠ΅ΡΠ°ΡΡΠΈΠΉ ΡΠ°ΠΊΡΡ ββΠ°ΡΠΈΡΠΌΠ΅ΡΠΈΠΊΡ (ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΠ΅ΠΊΡΡΠΈΠΉ strictUnits: true
Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΡΠ²Π»ΡΠ΅ΡΡΡ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠΌ Π΄Π»Ρ ΠΏΡΠΈΠ½ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ ΡΡΠΈΠ»Ρ ΠΊΠΎΠ΄ΠΈΡΠΎΠ²Π°Π½ΠΈΡ).
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
Π§Π΅ΡΡΠ½ΠΎ Π³ΠΎΠ²ΠΎΡΡ, Ρ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π±ΡΠ» ΠΏΠΎΠΊΠ»ΠΎΠ½Π½ΠΈΠΊΠΎΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΡΠΌΠ΅ΡΠΈΠ²Π°ΡΡ Π΅Π΄ΠΈΠ½ΠΈΡΡ Π² Less. ΠΡΠΎ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠΌΡΡΠ»Π° Ρ ΠΌΠ°ΡΠ΅ΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ, ΠΈ, ΠΊΠ°ΠΊ Π²Ρ ΠΎΡΠΌΠ΅ΡΠΈΠ»ΠΈ, Π²ΡΠ΅ ΠΎΡΠ½ΠΎΠ²Π°Π½ΠΎ Π½Π° ΠΏΠΎΡΡΠ΄ΠΊΠ΅ ΠΎΡΠ΅Π½ΠΊΠΈ ... ΡΡΠΎ ΡΠ°ΠΊΠΆΠ΅ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠΌΡΡΠ»Π°.
ΠΠ΄Π½Π°ΠΊΠΎ, ΠΊΠΎΠ³Π΄Π° Ρ ΠΏΠΎΡΠΌΠΎΡΡΠ΅Π» Π½Π° ΠΊΠΎΠ΄
strictUnits
, ΡΡΠΎ ΡΠΎΠΆΠ΅ Π½Π΅ ΠΈΠΌΠ΅Π»ΠΎ Π΄Π»Ρ ΠΌΠ΅Π½Ρ ΡΠΌΡΡΠ»Π°. ΠΡΠΎ ΡΠΎΠΆΠ΅ Π½Π΅ ΠΏΠΎΡ ΠΎΠΆΠ΅ Π½Π° ΡΠΎ, ΡΡΠΎ Ρ Π΄ΡΠΌΠ°Π».Π’Π°ΠΊ ΡΡΠΎ Π΄Π°, ΡΡΠΎ ΡΡΡΠ°Π½Π½ΠΎ, Π½ΠΎ Ρ Π½Π΅ ΡΠΊΠ»ΠΎΠ½Π΅Π½ ΡΡΠΈΡΠ°ΡΡ, ΡΡΠΎ ΡΡΠΎ ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½ΠΎ. Π― Π±ΠΎΠ»Π΅Π΅ ΡΠΊΠ»ΠΎΠ½Π΅Π½ ΠΊ ΠΈΡΡΠ΅Π·Π½ΠΎΠ²Π΅Π½ΠΈΡ ΠΌΠ°ΡΠ΅ΠΌΠ°ΡΠΈΠΊΠΈ ΡΠΎ ΡΠΌΠ΅ΡΠ°Π½Π½ΡΠΌΠΈ Π΅Π΄ΠΈΠ½ΠΈΡΠ°ΠΌΠΈ. ΠΠΎ ΡΡΠΎ ΡΠΎΠ»ΡΠΊΠΎ Ρ. ΠΠ°ΠΊ ΠΈ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ
1px * 1px
Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ1px^2
(Π±Π΅ΡΠΏΠΎΠ»Π΅Π·Π½ΠΎ, Π½ΠΎ Π²Π΅ΡΠ½ΠΎ). Π ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ1px / 1px
Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ1
. Sass ΡΠ»ΠΈΡΠΊΠΎΠΌ ΡΠ»ΠΎΠΆΠ΅Π½ Π² Π½Π΅ΠΊΠΎΡΠΎΡΡΡ Π²ΠΈΠ΄Π°Ρ ΠΌΠ°ΡΠ΅ΠΌΠ°ΡΠΈΠΊΠΈ, Π½ΠΎ ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π±Π°Π·ΠΎΠ²ΡΠ΅ ΠΌΠ°ΡΠ΅ΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΏΡΠΈΠ½ΡΠΈΠΏΡ Π΄Π»Ρ ΡΠ°ΠΊΠΈΡ Π²Π΅ΡΠ΅ΠΉ, ΠΊΠ°ΠΊ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ Π΅Π΄ΠΈΠ½ΠΈΡ ΠΌΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ.<strong i="13">@value</strong> / 1px * 1rem
ΠΠ°ΡΠ΅ΠΌΠ°ΡΠΈΠΊΠ° Π·Π΄Π΅ΡΡ
10px / 1px
. ΠΡΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π΄Π°ΡΡ1
(Π½Π΅ Π² Less, ΠΏΡΠΎΡΡΠΎ Π² ΠΏΡΠΈΠ½ΡΠΈΠΏΠ΅, Π° Π² Sass).1 * 1rem = 1rem
. ΠΠ΅ ΠΎΠ±ΠΈΠΆΠ°ΠΉΡΠ΅ΡΡ Π½Π° Alexis Π·Π° ΠΏΡΠΎΠΈΡΡ ΠΎΠΆΠ΄Π΅Π½ΠΈΠ΅ ΡΡΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΈ, Π½ΠΎ Π²ΡΠ±ΠΎΡ ΠΏΠ΅ΡΠ²ΠΎΠΉ Π΅Π΄ΠΈΠ½ΠΈΡΡ Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΎΡΡΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΡΡΠ°Π½Π½ΡΠΉ, ΡΡΡΠ΄Π½ΡΠΉ Π΄Π»Ρ ΠΎΡΠ΅Π½ΠΊΠΈ ΠΈ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ ΠΊ ΡΡΠΈΠΌ ΠΊΡΠ°ΠΉΠ½ΠΈΠΌ ΡΠ»ΡΡΠ°ΡΠΌ Ρ ΠΎΡΠΈΠ±ΠΊΠ°ΠΌΠΈ.Π’ΠΎΠ»ΡΠΊΠΎ ΠΌΠΎΠΈ 0,02 Π΄ΠΎΠ»Π»Π°ΡΠ°.