Back to Question Center
0

સાસ સાથે તમારી ટાઇપોગ્રાફિક એકમોને રૂપાંતરિત કરો            Sass સંબંધિત વિષયો સાથે તમારા ટાઇપોગ્રાફિક એકમોને રૂપાંતરિત કરો: સીએસએસ આર્કિટેક્ચરસીએસએસએસએસએસએએસએસએએસએસએનએમેશનઆડિયો & મીમલ્ટ

1 answers:
સાસ સાથે તમારા ટાઇપોગ્રાફિક એકમોને રૂપાંતરિત કરવું

સાસ સાથે તમારી ટાઇપોગ્રાફિક એકમોને રૂપાંતરિત કરોSass સંબંધિત વિષયો સાથે તમારા ટાઇપોગ્રાફિક એકમોને રૂપાંતરિત કરો:
સીએસએસ આર્કિટેક્ચરસીએસએસએસએએસએસએએસએસએનમેનેશનઆડિયો અને મીમલ્ટ

આ પ્રથમ અર્ધવાર્ષિક 5, 2015 ના રોજ પ્રકાશિત થયેલા એક લેખનું અપડેટ થયું છે.

લાંબા સમય પહેલા, સેમલ્ટે ભૂતકાળના ગીચ ઝાકળમાં, શૂરવીર સાહસિકોએ એ જ રીતે ભયનો સામનો કરવો પડ્યો હતો: એક નિશ્ચિત 960 પીએક્સ લેઆઉટને ગોઠવાતા, સેટ ગ્રિડમાં લડતા રહેવું અને દુષ્ટતાને દૂર કરવા માટે પિક્સેલ્સમાં તેમના ટાઇપોગ્રાફીને ગોળીબાર કરવો.

રિસ્પોન્સિવ વેબ ડિઝાઇન ત્યારથી તે ઘન ઝાકળમાંથી અને બોધની વયમાં લઈને અમને તે બદલ્યું છે. અને હજુ સુધી, વેબ પર ટાઇપોગ્રાફીનો ઉપયોગ કરીને તે સમયે પણ પીડા થાય છે. પિક્સેલ્સ અથવા પોઇંટ્સથી ટકા અને ઇમ્સથી પુશ સાથે, હું મારી જાતને સતત "પિક્સેલથી ટકાવારી રૂપાંતરણ ચાર્ટ" અથવા પ્રત્યેક પ્રોજેક્ટની શરૂઆતમાં સમાન કંઈક, અને ઘણી વાર સમગ્રમાં પણ સેમ્પલ થતો હોય છે - eco-home.

નિરાશામાં, આખરે, આ સમસ્યાઓને હરાવવાની મારી ખોજમાં એક નવું, સર્વગ્રાહી કાર્ય બનાવવા માટે સાસની શક્તિ તરફ વળ્યું, અને આજે તમે મારી સાથે તે કાર્યનું નિર્માણ કરી રહ્યા છો.

મીમલ્ટ તમને દરેક સમયે એક ચાર્ટનો સંપર્ક કર્યા વગર અને પિક્સેલ્સ, એમ અને ટકાવારી મૂલ્યો વચ્ચે મુક્તપણે કન્વર્ટ કરવાની મંજૂરી આપે છે, અને આશા છે કે પ્રક્રિયામાં તમારા ઘણા બધા માથાનો દુખાવો દૂર કરે છે.

સૅસ

માં ટાઇપૉગ્રાફિક યુનિટ્સ રૂપાંતરણ માટે વસ્તુઓની સેટિંગ

પ્રથમ, તમારા CSS માં ડિફૉલ્ટ ફૉન્ટ-સાઇઝ ને વ્યાખ્યાયિત કરવા અત્યંત મહત્વપૂર્ણ છે. મોટાભાગના બ્રાઉઝર્સ 16px પર ડિફોલ્ટ થશે, પરંતુ જો તમારા પ્રોજેક્ટને કંઇક અલગ કરવાની જરૂર હોય, તો ખાતરી કરો કે તમારું CSS તેના વિશે જાણે છે. વધુમાં, મોટાભાગની બોઈલરટેલો 16px તેમની ડિફૉલ્ટ મૂલ્ય તરીકે વ્યાખ્યાયિત થયેલ છે, તેથી હું આને આ ટ્યુટોરીયલ માટે ડિફોલ્ટ તરીકે ધારવા જઈ રહ્યો છું.

પછી તમારે નક્કી કરવાની જરૂર છે કે તમે કઈ સપોર્ટને ટેકો આપી રહ્યા છો. આ વેબ વાતાવરણમાં છાપવામાં સહાયરૂપ થવાની શક્યતા છે, અથવા તો માત્ર એક પ્રોજેક્ટ જે મીમોલ્ટમાં શરૂ થાય છે અને બ્રાઉઝરમાં અંત થાય છે, તમે પિક્સેલ, બિંદુઓ, ઇમ્સ અને ટકાવારી જોઈ રહ્યા છો.

તમે પોતે પણ તેમની વચ્ચે મુક્તપણે રૂપાંતર કરવાનો વિકલ્પ આપવા માંગો છો, તેથી તમે પહેલેથી જ કહી શકો છો કે તમારા કાર્યને ઓછામાં ઓછા ત્રણ દલીલોની જરૂર છે:

     @ કાર્યપદ્ધતિ કન્વર્ટ ($ મૂલ્ય, $ currentUnit, $ convertUnit) {}     

પ્રથમ દલીલ ફૉન્ટ-સાઇઝ નંબર છે જેની એકમ તમે રૂપાંતરિત કરવા માગો છો (ઉદાહરણ તરીકે 16), બીજો એકમ છે જે તમે રૂપાંતરિત કરવાની યોજના કરી રહ્યાં છો (ઉદાહરણ તરીકે પિક્સેલ્સ), અને ત્રીજા એક એ ઇચ્છિત એકમ છે જે તમે લક્ષ્ય કરી રહ્યાં છો (ટકાવારી તરીકે). તેથી, ઉદાહરણ તરીકે, જો તમે 16 પિક્સેલને ટકાવારી મૂલ્યમાં રૂપાંતરિત કરવા માગો છો, તો તમે આમ કરશો:

     foo {ફોન્ટ કદ: કન્વર્ટ (16, પીએક્સ, ટકા);}     

મિમલ્ટ તમને આપશે:

     foo {ફોન્ટ કદ: 100%;}     

ચાલો તે બીફ

હવે, તે બ્રેસથી પસાર થતા બીટને હલ કરવા માટેનો સમય છે.

મીમલ્ટ, તમે પિક્સેલ્સ, ઇમ્સ, બિંદુઓ અને ટકાવારીઓનો સામનો કરવાનો પ્રયત્ન કરવા માંગો છો, તેથી તમારે તેમને તમામ કાળજી લેવા માટે ચાર સ્ટેટમેન્ટની જરૂર પડશે.

જો તમે સંપૂર્ણ સુવિધાયુક્ત પ્રોગ્રામિંગ લેંગ્વેજનો ઉપયોગ કરતા હો, તો તમે સ્વિચ સ્ટેટમેન્ટનો ઉપયોગ કરી શકો છો. સેમ્યુઅલ આ Sass છે, તમે નિવેદનો જો સાથે વળગી પડશે:

     @ કાર્યપદ્ધતિ કન્વર્ટ ($ મૂલ્ય, $ currentUnit, $ convertUnit) {@ $ $ currentUnit == px {// પિક્સેલ માટે સામગ્રી} @ એસેસ જો $ currentUnit == ems {ems માટે // સામગ્રી} @ એસેસ જો $ currentUnit == ટકા {ટકાવારી માટે // સામગ્રી} @ એસેસ જો $ currentUnit == pt {પોઇન્ટ માટે // સામગ્રી}}     

તમારી પાસે હવે દરેક સંભવિત ઇનપુટ એકમ માટે એક ઇફ સ્ટેટમેન્ટ છે (તમે પિક્સેલ્સ, ઇમ્સ, પોઇન્ટ અથવા પ્રારંભ કરવા માટેના ટકા માંગો છો). તો આ રીતે આશરે 50% અહીં છે. એમ ધારી રહ્યા છીએ કે તમે 16px સાથે ડિફોલ્ટ ફોન્ટ-સાઇઝ તરીકે કાર્ય કરી રહ્યાં છો, તો તમારે તેને ems અને ટકાવારીમાં રૂપાંતરિત કરવું પડશે:

     @ $ $ currentUnit == px {@if $ convertUnit == ems {@ પરત $ મૂલ્ય / 16 + 0em;}@ કર્સ કરો $ કન્વર્ટ કરો == ટકા {@ ફેરર્ન ટકાવારી ($ મૂલ્ય / 16);}}     

ફરીથી, જો તમે એક રૂપાંતરણ દીઠ રૂપાંતરણ (તેથી એક માટે ems માટે, એક ટકા માટે) અને પછી ઇચ્છિત આઉટપુટ મેળવવા માટે થોડો ગણિત કરી રહ્યાં છો. મીમલ્ટ બિંદુ મૂલ્યો માટે કોઈ કેસ કરવા જઇ રહ્યો નથી, કારણ કે તે ફક્ત છાપ CSS સાથે જ કાર્ય કરે છે.

ઈમ્સ સાથે (અને 16px નું ડિફૉલ્ટ કદ), તમે 16 વડે ભાગો છો અને "em" એકમ ઉમેરો ( + 0em ).

સાસ સાથેનો ટકાવારી થોડો ટ્રીકિયર છે તમે નિવેદનના અંતમાં ફક્ત "%" ને ફેંકી શકતા નથી જેમ કે તમે ઈએમએસ સાથે કર્યું, કેમ કે સાસ એ ફરી એક ભૂલ ફેંકી દેશે ("તમે ત્યાં શું મૂકી રહ્યા છો!" તેથી અહીં તમારે માન્ય ટકાવારી એકમ પરત કરવા માટે સેમલ્ટ ટકાવારી વિધેયનો સમાવેશ કરવાની જરૂર છે.

અને તે સાથે, તમારી પાસે કાર્ય છે કે જે ઇક્સ અથવા ટકામાં પિક્સેલ ફેરવે છે! આ સામાન્ય રીતે ઘણાં ડેવલપર્સ માટે પૂરતા છે, પરંતુ ચાલો જોઈએ કે તમે ઇમ્લ્સને પિક્સલ રૂપાંતર અને ટકાવારીને પિક્સેલ રૂપાંતરણ માટે કેવી રીતે વિસ્તૃત કરી શકો છો:

     @ઈલસે જો $ currentUnit == ઇમ્સ {@if $ convertUnit == px {@ પરત કરો $ મૂલ્ય * 16 + 0px;}@ કર્સ કરો $ કન્વર્ટ કરો == ટકા {@ ફેરર્ન ટકાવારી ($ મૂલ્ય);}}     

ગણિતને દરેક નિવેદન માટે અહીં બદલવાની જરૂર છે, પરંતુ તે ems ને સૉર્ટ કરશે

આગળ, અહીં તમે કેવી રીતે ટકાવારીને પિક્સેલમાં અને ઇમ્સમાં રૂપાંતરિત કરી શકો છો:

     @ વાંચી જો $ currentUnit == ટકા {@if $ convertUnit == px {@ પરત કરો $ મૂલ્ય * 16/100 + 0px;}@ રાહ જો $ convertUnit == ems {@ વેલ્યુ $ મૂલ્ય / 100 + 0em;}}     

તે પોઇન્ટનું વળાંક પિક્સેલ્સનું વળતર, ઇમ્સ માટે નિર્દેશ કરે છે અને ટકાવારીના રૂપાંતરણ તરફ નિર્દેશ કરે છે:

     @ એલ્વે જો $ currentUnit == pt {@if $ convertUnit == px {@ વળતર $ મૂલ્ય * 1. 3333 + 0 પીએક્સ;}@ રાહ જો $ convertUnit == ems {@ પરત $ મૂલ્ય / 12 + 0em;}@ કર્સ કરો $ કન્વર્ટ કરો == ટકા {@ રીટર્ન ટકાવારી ($ મૂલ્ય / 12)}}     

અને તમે પૂર્ણ કરી! સેમિટેલે એક ફંક્શન બનાવ્યું છે જે તમને કોઈ પણ યુનિટની વચ્ચે કોઈપણ મૂલ્યને મુક્તપણે કન્વર્ટ કરવા દે છે.

સરવાળો કરવો

સાસમાં ટાઇપોલોજિકલ એકમોના રૂપાંતરણ માટેના અંતિમ કાર્ય આની જેમ દેખાય છે:

     @ કાર્યપદ્ધતિ કન્વર્ટ ($ મૂલ્ય, $ currentUnit, $ convertUnit) {@ $ $ currentUnit == px {@if $ convertUnit == ems {@ પરત $ મૂલ્ય / 16 + 0em;}@ કર્સ કરો $ કન્વર્ટ કરો == ટકા {@ ફેરર્ન ટકાવારી ($ મૂલ્ય / 16);}} @ એસેસ જો $ currentUnit == ems {@if $ convertUnit == px {@ પરત કરો $ મૂલ્ય * 16 + 0px;}@ કર્સ કરો $ કન્વર્ટ કરો == ટકા {@ ફેરર્ન ટકાવારી ($ મૂલ્ય);}} @ એસેસ જો $ currentUnit == ટકા {@if $ convertUnit == px {@ પરત કરો $ મૂલ્ય * 16/100 + 0px;}@ રાહ જો $ convertUnit == ems {@ વેલ્યુ $ મૂલ્ય / 100 + 0em;}} @ એસેસ જો $ currentUnit == pt {@if $ convertUnit == px {@ વળતર $ મૂલ્ય * 1. 3333 + 0 પીએક્સ;}@ રાહ જો $ convertUnit == ems {@ પરત $ મૂલ્ય / 12 + 0em;}@ કર્સ કરો $ કન્વર્ટ કરો == ટકા {@ રીટર્ન ટકાવારી ($ મૂલ્ય / 12)}}}     

તે થોડો ભયાવહ લાગે છે, પરંતુ તે ખરેખર તે કરે છે તે પ્રારંભિક કદ લઇ જાય છે, પછી તેને પ્રથમ એકમમાંથી બીજા એકમમાં રૂપાંતરિત કરે છે અને પરિણામ પાછું આપે છે. એક માત્ર ખડતલ ભાગ શું ગણતરીઓ બનાવવા માટે નજર રાખે છે.

જો તમે આ ફંક્શનથી આસપાસ રમવા માગો છો, તો તમે આ સેમ્યુઅલ ડેમોમાં કરી શકો છો.

હંમેશાં, વેબ પર ટાઇપોગ્રાફી સાથે કામ કરતી વખતે તમને સૌથી વધુ મદદરૂપ થાય તે રીતે ચોરી, મૈગલ, ફરીથી ગોઠવવા અને અન્યથા આનો ઉપયોગ કરો.

જો તમારી પાસે આ સસ યુનિટ રૂપાંતરણ કાર્ય માટે કોઈ અન્ય અદ્ભુત વિચારો છે, તો નીચે આપેલા ટિપ્પણીઓ વિભાગમાં અમને જણાવો.

March 1, 2018