Функција напајања - ЦСС-трикови

Anonim

Иако је врло користан у рачунању, Сасс помало недостаје са математичким помоћним функцијама. На званичном репозиторијуму је отворено издање у којем се тражи више функција повезаних са математиком током скоро 3 године.

Неки независни добављачи попут Цомпасс или СассиМатх пружају напредну подршку за математичке функције, али то су спољне зависности које би могло (требало?) Избећи.

Један од најпопуларнијих захтева по овом питању је функција напајања или чак експонентни оператор. Нажалост, још увек нема подршке за ово у Сасс-у и, иако је још увек у активној дискусији, мало је вероватно да ће се то догодити врло брзо.

У међувремену, могућност подизања броја до одређене мере је врло корисно у ЦСС-у. Ево неколико примера где би вам добро дошао:

  • за одређивање осветљености боје;
  • за фиксирање броја на одређену количину цифара;
  • направити неку (инверзну) тригонометрију ...

Сасс имплементација

На нашу срећу, могуће је (и сасвим једноставно) створити функцију напајања без ичега осим Сасс-а. Све што нам треба је петља и неки основни математички оператори (као што су *и /).

Позитивни целобројни експоненти

Наша функција (именована pow) у најмањем облику би изгледала овако:

@function pow($number, $exponent) ( $value: 1; @if $exponent > 0 ( @for $i from 1 through $exponent ( $value: $value * $number; ) ) @return $value; )

Ево примера:

.foo ( width: pow(20, 2) * 1px; // 400px )

Позитивни или негативни експоненти целог броја

Међутим, ради само са позитивним аргументом `$ повер`. Допуштање негативних експонената не би било тако тешко, потребан нам је само мали додатни услов:

@function pow($number, $exponent) ( $value: 1; @if $exponent > 0 ( @for $i from 1 through $exponent ( $value: $value * $number; ) ) @else if $exponent < 0 ( @for $i from 1 through -$exponent ( $value: $value / $number; ) ) @return $value; )

Ево примера:

.foo ( width: pow(10, -2) * 1px; // 0.0001px )

Позитивни или негативни експоненти

Сад, шта ако желимо нецелине бројеве експонената? Као 4.2на пример? Истина је да заиста није лако. И даље је изводљиво, али захтева више од само петље и неколико операција.

То је урађено на складишту Боурбон како би се modular-scale(… )функција комплетирала из оквира (иако је одбијена). Ево кода:

@function pow($number, $exponent) ( @if (round($exponent) != $exponent) ( @return exp($exponent * ln($number)); ) $value: 1; @if $exponent > 0 ( @for $i from 1 through $exponent ( $value: $value * $number; ) ) @else if $exponent pow(10, $ten-exp)) ( $ten-exp: $ten-exp + 1; ) @return summation(ln-maclaurin, $value / pow(10, $ten-exp), 1, 100) + $ten-exp * $ln-ten; )

Даља разматрања

Па, то је било интензивно. Ако вам затреба подршка за нецеловите експоненте (попут 4.2), препоручујем да користите спољну зависност која је пружа (као што је сасс-матх-пов) уместо да укључите сав овај код у свој пројекат. Није да је то лоше само по себи, али заправо није улога вашег пројекта да угости тако велику масу неауторског кода за полирање (зато имамо менаџере пакета).

Такође имајте на уму да су све ове операције прилично интензивне за тако танак слој као што је Сасс. У овом тренутку, и ако се ваш дизајн ослања на напредне математичке функције, вероватно је боље да имплементацију ових помагача пренесете са горњег слоја (Ноде.јс, Руби, итд.) На Сасс кроз систем додатака (Еиегласс, Руби драгуљ итд.).

Али за основну pow(… )употребу не могу да препоручим довољно једноставне верзије!