CSS @use: વૈશ્વિક પ્રોજેક્ટ્સ માટે સ્ટાઈલ મોડ્યુલ ઈમ્પોર્ટ અને રૂપરેખાંકનમાં મહારત

CSS માં @use નિયમ એક શક્તિશાળી સુવિધા છે જે તમને સ્ટાઈલ મોડ્યુલ્સ આયાત કરવા અને રૂપરેખાંકિત કરવાની મંજૂરી આપે છે, જે તમારા વેબ પ્રોજેક્ટ્સમાં કોડની પુનઃઉપયોગીતા, જાળવણીક્ષમતા અને માપનીયતાને પ્રોત્સાહન આપે છે. આ ખાસ કરીને વૈશ્વિક પ્રોજેક્ટ્સ માટે નિર્ણાયક છે જ્યાં સુસંગતતા અને સંગઠન સર્વોપરી છે. આ વિસ્તૃત માર્ગદર્શિકા @use ની જટિલતાઓમાં ઊંડાણપૂર્વક જશે, જેમાં તેના સિન્ટેક્સ, ફાયદા, અદ્યતન તકનીકો અને શ્રેષ્ઠ પદ્ધતિઓનો સમાવેશ થશે.

CSS મોડ્યુલ્સ અને @use નો ઉપયોગ શા માટે કરવો?

પરંપરાગત CSS, જે શરૂ કરવા માટે સરળ છે, તે મોટા પ્રોજેક્ટ્સમાં ઝડપથી અણઘડ બની શકે છે. ગ્લોબલ સ્કોપ, નામકરણના વિરોધાભાસ અને વિશિષ્ટતાના મુદ્દાઓ અસ્તવ્યસ્ત પરિસ્થિતિ તરફ દોરી શકે છે. CSS મોડ્યુલ્સ આ સમસ્યાઓને એક વિશિષ્ટ મોડ્યુલમાં સ્ટાઈલ્સને સમાવીને ઉકેલે છે, આકસ્મિક સ્ટાઈલ લિકેજને અટકાવે છે અને કોડ સંગઠનમાં સુધારો કરે છે. @use નિયમ આ મોડ્યુલર અભિગમનો મુખ્ય ઘટક છે, જે ઘણા ફાયદાઓ પ્રદાન કરે છે:

• એન્કેપ્સ્યુલેશન: એક મોડ્યુલમાં વ્યાખ્યાયિત સ્ટાઈલ્સ અન્ય મોડ્યુલ્સથી અલગ રાખવામાં આવે છે, જે નામકરણના ટકરાવ અને અનિચ્છનીય સ્ટાઈલ ઓવરરાઈડ્સને અટકાવે છે.
• પુનઃઉપયોગીતા: મોડ્યુલ્સને બહુવિધ ઘટકો અથવા પૃષ્ઠો પર આયાત અને પુનઃઉપયોગ કરી શકાય છે, જે કોડની ડુપ્લિકેશન ઘટાડે છે અને સુસંગતતાને પ્રોત્સાહન આપે છે.
• જાળવણીક્ષમતા: મોડ્યુલની સ્ટાઈલ્સમાં ફેરફાર ફક્ત તે મોડ્યુલને જ અસર કરે છે, જે તમારા કોડબેઝને રિફેક્ટર અને જાળવવાનું સરળ બનાવે છે.
• રૂપરેખાંકન: @use તમને વેરિયેબલ્સ પસાર કરીને મોડ્યુલ્સને રૂપરેખાંકિત કરવાની મંજૂરી આપે છે, જે કસ્ટમાઇઝેશન અને થીમિંગને સક્ષમ કરે છે.

@use સિન્ટેક્સને સમજવું

@use નિયમનો મૂળભૂત સિન્ટેક્સ સીધોસાદો છે:

            @use 'path/to/module';
            

              
                Copy
              
            
          

આ વર્તમાન સ્ટાઈલશીટમાં module.css ફાઈલ (અથવા તમારા પ્રીપ્રોસેસરના આધારે સમાન) માં વ્યાખ્યાયિત બધી સ્ટાઈલ્સ અને વેરિયેબલ્સને આયાત કરે છે. સ્ટાઈલ્સ મોડ્યુલની ફાઈલનામ પરથી મેળવેલ નેમસ્પેસમાં સમાયેલ હોય છે.

નેમસ્પેસ

ડિફૉલ્ટ રૂપે, @use મોડ્યુલના ફાઈલનામ પર આધારિત નેમસ્પેસ બનાવે છે. આ નેમસ્પેસનો ઉપયોગ મોડ્યુલના વેરિયેબલ્સ અને મિક્સિન્સને ઍક્સેસ કરવા માટે થાય છે. ઉદાહરણ તરીકે, જો તમે _variables.css આયાત કરો છો:

            @use 'variables';

body {
  background-color: variables.$primary-color;
}

            

              
                Copy
              
            
          

તમે as કીવર્ડનો ઉપયોગ કરીને કસ્ટમ નેમસ્પેસ પણ સ્પષ્ટ કરી શકો છો:

            @use 'variables' as vars;

body {
  background-color: vars.$primary-color;
}

            

              
                Copy
              
            
          

આ ખાસ કરીને ત્યારે ઉપયોગી છે જ્યારે સંભવિત વિરોધાભાસી વેરિયેબલ નામો સાથે બહુવિધ મોડ્યુલ્સ આયાત કરવામાં આવે છે. કસ્ટમ નેમસ્પેસનો ઉપયોગ કરવાથી કોડની વાંચનક્ષમતા સુધરે છે અને અસ્પષ્ટતા ટાળે છે.

નેમસ્પેસ વિરોધાભાસને ટાળવું

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

• પૂર્વગ (Prefixing): મોડ્યુલમાંના બધા વેરિયેબલ્સ અને મિક્સિન્સ માટે સુસંગત પૂર્વગનો ઉપયોગ કરો. ઉદાહરણ તરીકે, $component-name-primary-color.
• વર્ગીકરણ (Categorization): તમારા મોડ્યુલ્સને તેમના હેતુના આધારે ગોઠવો (દા.ત., _colors.css, _typography.css, _components.css).
• વર્ણનાત્મક નામો: ગૂંચવણ ટાળવા માટે તમારા વેરિયેબલ્સ અને મિક્સિન્સ માટે સ્પષ્ટ અને વર્ણનાત્મક નામોનો ઉપયોગ કરો.

@use સાથે મોડ્યુલ્સને રૂપરેખાંકિત કરવું

@use ની સૌથી શક્તિશાળી સુવિધાઓમાંની એક વેરિયેબલ્સ પસાર કરીને મોડ્યુલ્સને રૂપરેખાંકિત કરવાની તેની ક્ષમતા છે. આ તમને મોડ્યુલ્સના સ્રોત કોડમાં ફેરફાર કર્યા વિના તેમના દેખાવ અને વર્તનને કસ્ટમાઇઝ કરવાની મંજૂરી આપે છે.

મોડ્યુલને રૂપરેખાંકિત કરવા માટે, તમે મોડ્યુલમાં વેરિયેબલ્સ માટે ડિફૉલ્ટ મૂલ્યો વ્યાખ્યાયિત કરો છો અને પછી with કીવર્ડનો ઉપયોગ કરીને મોડ્યુલ આયાત કરતી વખતે તે મૂલ્યોને ઓવરરાઈડ કરો છો.

ઉદાહરણ: થીમને રૂપરેખાંકિત કરવી

માની લો કે તમારી પાસે _theme.css મોડ્યુલ છે જે ડિફૉલ્ટ રંગ મૂલ્યોને વ્યાખ્યાયિત કરે છે:

            /* _theme.css */

$primary-color: #007bff !default;
$secondary-color: #6c757d !default;
$font-size: 16px !default;

            

              
                Copy
              
            
          

!default ફ્લેગ એ સુનિશ્ચિત કરે છે કે વેરિયેબલ ફક્ત ત્યારે જ આ મૂલ્ય લેશે જો તે પહેલાથી વ્યાખ્યાયિત ન થયું હોય.

હવે, તમે આ મોડ્યુલને આયાત કરી શકો છો અને ડિફૉલ્ટ મૂલ્યોને ઓવરરાઈડ કરી શકો છો:

            /* app.css */

@use 'theme' with (
  $primary-color: #ff0000,
  $font-size: 18px
);

body {
  background-color: theme.$primary-color; /* Output: #ff0000 */
  font-size: theme.$font-size; /* Output: 18px */
}

            

              
                Copy
              
            
          

આ તમને @use નિયમમાં ફક્ત રૂપરેખાંકન મૂલ્યો બદલીને વિવિધ થીમ્સ વચ્ચે સરળતાથી સ્વિચ કરવાની મંજૂરી આપે છે.

રૂપરેખાંકન માટેની શ્રેષ્ઠ પદ્ધતિઓ

• !default નો ઉપયોગ કરો: તમારા મોડ્યુલ્સમાં રૂપરેખાંકિત કરી શકાય તેવા વેરિયેબલ્સને વ્યાખ્યાયિત કરતી વખતે હંમેશા !default ફ્લેગનો ઉપયોગ કરો. આ સુનિશ્ચિત કરે છે કે જ્યારે મોડ્યુલ આયાત કરવામાં આવે ત્યારે વેરિયેબલ્સને ઓવરરાઈડ કરી શકાય છે.
• રૂપરેખાંકન વિકલ્પોનું દસ્તાવેજીકરણ કરો: તમારા મોડ્યુલના દસ્તાવેજીકરણમાં રૂપરેખાંકિત કરી શકાય તેવા વેરિયેબલ્સ અને તેમના હેતુને સ્પષ્ટપણે દસ્તાવેજીકૃત કરો. આ અન્ય વિકાસકર્તાઓને મોડ્યુલને કેવી રીતે કસ્ટમાઇઝ કરવું તે સમજવામાં સરળ બનાવે છે.
• સમજદાર ડિફૉલ્ટ પ્રદાન કરો: એવા ડિફૉલ્ટ મૂલ્યો પસંદ કરો જે મોટાભાગના ઉપયોગના કિસ્સાઓ માટે યોગ્ય હોય. આ કસ્ટમાઇઝેશનની જરૂરિયાતને ઘટાડે છે.
• મેપ્સનો ઉપયોગ કરવાનું વિચારો: જટિલ રૂપરેખાંકનો માટે, સંબંધિત વેરિયેબલ્સને જૂથબદ્ધ કરવા માટે મેપ્સનો ઉપયોગ કરવાનું વિચારો. આ કોડની વાંચનક્ષમતા અને સંગઠનમાં સુધારો કરી શકે છે.

@forward: મોડ્યુલ્સને બહારની દુનિયામાં એક્સપોઝ કરવું

@forward નિયમ તમને મોડ્યુલના API (વેરિયેબલ્સ, મિક્સિન્સ અને સ્ટાઈલ્સ) ના ભાગોને અન્ય મોડ્યુલ્સમાં પસંદગીપૂર્વક એક્સપોઝ કરવાની મંજૂરી આપે છે. આ અમૂર્ત મોડ્યુલ્સ બનાવવા માટે ઉપયોગી છે જે તેમની આંતરિક અમલીકરણ વિગતોને એક્સપોઝ કર્યા વિના પુનઃઉપયોગી ઉપયોગિતાઓનો સમૂહ પ્રદાન કરે છે.

ઉદાહરણ તરીકે, તમારી પાસે _utilities.css મોડ્યુલ હોઈ શકે છે જેમાં સહાયક વર્ગોનો સમૂહ હોય છે:

            /* _utilities.css */

.margin-top-sm {
  margin-top: 0.5rem;
}

.margin-bottom-sm {
  margin-bottom: 0.5rem;
}

$base-font-size: 16px;

            

              
                Copy
              
            
          

પછી તમે _layout.css મોડ્યુલ બનાવી શકો છો જે આ ઉપયોગિતાઓને ફોરવર્ડ કરે છે:

            /* _layout.css */

@forward 'utilities' hide($base-font-size);

            

              
                Copy
              
            
          

હવે, જ્યારે તમે _layout.css આયાત કરશો, ત્યારે તમને .margin-top-sm અને .margin-bottom-sm વર્ગોની ઍક્સેસ મળશે, પરંતુ $base-font-size વેરિયેબલની નહીં (કારણ કે તે છુપાયેલું હતું). આ તમને _utilities.css મોડ્યુલના કયા ભાગો અન્ય મોડ્યુલ્સમાં એક્સપોઝ કરવા તે નિયંત્રિત કરવાની મંજૂરી આપે છે.

પૂર્વગ સાથે @forward નો ઉપયોગ કરવો

મોડ્યુલને ફોરવર્ડ કરતી વખતે તમે પૂર્વગ પણ ઉમેરી શકો છો:

            /* _layout.css */

@forward 'utilities' as util-*;

            

              
                Copy
              
            
          

હવે, જ્યારે તમે _layout.css આયાત કરશો, ત્યારે ઉપયોગિતાઓ util- પૂર્વગ સાથે ઉપલબ્ધ થશે:

            .element {
  @extend .util-margin-top-sm;
}

            

              
                Copy
              
            
          

આ બહુવિધ મોડ્યુલ્સને ફોરવર્ડ કરતી વખતે નામકરણના ટકરાવને ટાળવા માટે મદદરૂપ થઈ શકે છે.

@import થી @use માં સ્થળાંતર

@use નિયમ જૂના @import નિયમને બદલવાનો હેતુ ધરાવે છે. જ્યારે @import હજુ પણ સમર્થિત છે, ત્યારે તેની કેટલીક મર્યાદાઓ છે જેને @use સંબોધિત કરે છે:

• ગ્લોબલ સ્કોપ: @import સ્ટાઈલ્સને ગ્લોબલ સ્કોપમાં આયાત કરે છે, જે નામકરણના વિરોધાભાસ અને વિશિષ્ટતાના મુદ્દાઓ તરફ દોરી શકે છે.
• કોઈ રૂપરેખાંકન નથી: @import વેરિયેબલ્સ સાથે મોડ્યુલ્સને રૂપરેખાંકિત કરવાનું સમર્થન કરતું નથી.
• પ્રદર્શન: @import પ્રદર્શન સમસ્યાઓ તરફ દોરી શકે છે, ખાસ કરીને નેસ્ટેડ ઈમ્પોર્ટ્સ સાથે.

@import થી @use માં સ્થળાંતર કરવાથી તમારા કોડબેઝનું સંગઠન, જાળવણીક્ષમતા અને પ્રદર્શન સુધરી શકે છે.

સ્થળાંતરના પગલાં

1. @import ને @use થી બદલો: @import ના બધા ઉદાહરણોને @use થી બદલો.
2. નેમસ્પેસ ઉમેરો: નામકરણના વિરોધાભાસને ટાળવા માટે તમારા @use નિયમોમાં નેમસ્પેસ ઉમેરો.
3. મોડ્યુલ્સને રૂપરેખાંકિત કરો: વેરિયેબલ્સ સાથે મોડ્યુલ્સને રૂપરેખાંકિત કરવા માટે with કીવર્ડનો ઉપયોગ કરો.
4. સંપૂર્ણપણે પરીક્ષણ કરો: સ્થળાંતર કર્યા પછી તમારી એપ્લિકેશનનું સંપૂર્ણપણે પરીક્ષણ કરો જેથી ખાતરી થઈ શકે કે બધી સ્ટાઈલ્સ અપેક્ષા મુજબ કામ કરી રહી છે.

અદ્યતન તકનીકો અને શ્રેષ્ઠ પદ્ધતિઓ

અહીં @use નો અસરકારક રીતે ઉપયોગ કરવા માટે કેટલીક અદ્યતન તકનીકો અને શ્રેષ્ઠ પદ્ધતિઓ છે:

• બેઝ સ્ટાઈલશીટ બનાવો: એક બેઝ સ્ટાઈલશીટ બનાવો જે બધા જરૂરી મોડ્યુલ્સને આયાત કરે છે અને તેમને ડિફૉલ્ટ મૂલ્યો સાથે રૂપરેખાંકિત કરે છે. આ તમારી એપ્લિકેશનની સ્ટાઈલ્સ માટે નિયંત્રણનો કેન્દ્રિય બિંદુ પ્રદાન કરે છે.
• સુસંગત નામકરણ સંમેલનનો ઉપયોગ કરો: તમારા વેરિયેબલ્સ, મિક્સિન્સ અને મોડ્યુલ્સ માટે સુસંગત નામકરણ સંમેલનનો ઉપયોગ કરો. આ કોડની વાંચનક્ષમતા અને જાળવણીક્ષમતા સુધારે છે.
• તમારા મોડ્યુલ્સનું દસ્તાવેજીકરણ કરો: તમારા મોડ્યુલ્સનું સ્પષ્ટપણે દસ્તાવેજીકરણ કરો, જેમાં તેમના હેતુ, રૂપરેખાંકિત કરી શકાય તેવા વેરિયેબલ્સ અને ઉપયોગના ઉદાહરણો વિશેની માહિતી શામેલ હોય.
• મોડ્યુલ્સને નાના અને કેન્દ્રિત રાખો: તમારા મોડ્યુલ્સને નાના અને ચોક્કસ હેતુ પર કેન્દ્રિત રાખો. આ તેમને સમજવામાં અને જાળવવામાં સરળ બનાવે છે.
• ઊંડા નેસ્ટિંગને ટાળો: @use નિયમોના ઊંડા નેસ્ટિંગને ટાળો. આ નિર્ભરતાઓને ટ્રેક કરવાનું મુશ્કેલ બનાવી શકે છે અને પ્રદર્શન સમસ્યાઓ તરફ દોરી શકે છે.
• CSS પ્રીપ્રોસેસરનો ઉપયોગ કરો: Sass અથવા Less જેવા CSS પ્રીપ્રોસેસરનો ઉપયોગ કરવાથી CSS મોડ્યુલ્સ અને @use સાથે કામ કરવાનું સરળ બની શકે છે. પ્રીપ્રોસેસર્સ વેરિયેબલ્સ, મિક્સિન્સ અને ફંક્શન્સ જેવી સુવિધાઓ પ્રદાન કરે છે જે તમારા વર્કફ્લોને સુધારી શકે છે.

વૈશ્વિક વિચારણાઓ અને આંતરરાષ્ટ્રીયકરણ (i18n)

વૈશ્વિક વેબ પ્રોજેક્ટ્સ વિકસાવતી વખતે, આંતરરાષ્ટ્રીયકરણ (i18n) અને સ્થાનીયકરણ (l10n) ને ધ્યાનમાં લેવું આવશ્યક છે. CSS તમારી વેબસાઇટના દ્રશ્ય દેખાવને વિવિધ ભાષાઓ અને સંસ્કૃતિઓ માટે અનુકૂળ બનાવવામાં નિર્ણાયક ભૂમિકા ભજવે છે.

દિશાત્મકતા (RTL/LTR)

અરબી અને હીબ્રુ જેવી ઘણી ભાષાઓ જમણેથી ડાબે (RTL) લખાય છે. તમારે ખાતરી કરવાની જરૂર છે કે તમારું CSS ડાબેથી જમણે (LTR) અને RTL બંને લેઆઉટને સમર્થન આપે છે. direction પ્રોપર્ટીનો ઉપયોગ ટેક્સ્ટની દિશાને નિયંત્રિત કરવા માટે કરી શકાય છે:

            body {
  direction: ltr; /* Default */
}

html[lang="ar"] body {
  direction: rtl;
}

            

              
                Copy
              
            
          

તમારે ટેક્સ્ટની દિશાના આધારે ચિહ્નો અને છબીઓ જેવા ઘટકોની સ્થિતિને પણ સમાયોજિત કરવાની જરૂર પડી શકે છે. CSS લોજિકલ પ્રોપર્ટીઝ જેમ કે `margin-inline-start` અને `margin-inline-end` આ માટે અત્યંત મદદરૂપ થઈ શકે છે અને `margin-left` અને `margin-right` પર તેને પ્રાધાન્ય આપવું જોઈએ.

ફોન્ટની પસંદગી

તમે જે ભાષાઓને લક્ષ્યાંકિત કરી રહ્યાં છો તેના અક્ષર સમૂહોને સમર્થન આપતા ફોન્ટ્સ પસંદ કરો. વિવિધ બ્રાઉઝર્સ અને ઓપરેટિંગ સિસ્ટમ્સમાં સુસંગત રેન્ડરિંગ સુનિશ્ચિત કરવા માટે વેબ ફોન્ટ્સનો ઉપયોગ કરવાનું વિચારો. Google Fonts બહુવિધ ભાષાઓને સમર્થન આપતા વિવિધ પ્રકારના ફોન્ટ્સ પ્રદાન કરે છે. ફોન્ટ્સ પસંદ કરતી વખતે સુલભતાને ધ્યાનમાં લેવી યોગ્ય છે. ફોન્ટનું કદ અને લાઇન ઊંચાઈ વાંચનક્ષમતા માટે મહત્વપૂર્ણ છે, ખાસ કરીને દ્રશ્ય ક્ષતિઓ ધરાવતા વપરાશકર્તાઓ માટે.

ઉદાહરણ: અરબી માટે અલગ ફોન્ટનો ઉપયોગ કરવો

            body {
  font-family: sans-serif;
}

html[lang="ar"] body {
  font-family: 'Noto Sans Arabic', sans-serif;
}

            

              
                Copy
              
            
          

સંખ્યા ફોર્મેટિંગ

સંખ્યા ફોર્મેટિંગ વિવિધ સંસ્કૃતિઓમાં બદલાય છે. ઉદાહરણ તરીકે, કેટલીક સંસ્કૃતિઓ દશાંશ વિભાજક તરીકે અલ્પવિરામનો ઉપયોગ કરે છે, જ્યારે અન્ય પૂર્ણવિરામનો ઉપયોગ કરે છે. વપરાશકર્તાના સ્થાનિકના આધારે સંખ્યાઓને યોગ્ય રીતે ફોર્મેટ કરવા માટે `Intl.NumberFormat` જેવી JavaScript લાઇબ્રેરીઓનો ઉપયોગ કરવાનું વિચારો.

તારીખ અને સમય ફોર્મેટિંગ

તારીખ અને સમયના ફોર્મેટ પણ વિવિધ સંસ્કૃતિઓમાં બદલાય છે. વપરાશકર્તાના સ્થાનિકના આધારે તારીખો અને સમયને યોગ્ય રીતે ફોર્મેટ કરવા માટે `Intl.DateTimeFormat` જેવી JavaScript લાઇબ્રેરીઓનો ઉપયોગ કરો.

ટેક્સ્ટ વિસ્તરણને સંભાળવું

જર્મન જેવી કેટલીક ભાષાઓમાં અંગ્રેજી કરતાં લાંબા શબ્દો અને શબ્દસમૂહો હોય છે. આ તમારી વેબસાઇટના લેઆઉટને અસર કરી શકે છે. ખાતરી કરો કે તમારું CSS લેઆઉટને તોડ્યા વિના ટેક્સ્ટ વિસ્તરણને સમાવવા માટે પૂરતું લવચીક છે. તમારે ઘટકોની પહોળાઈ અને શબ્દો અને અક્ષરો વચ્ચેના અંતરને સમાયોજિત કરવાની જરૂર પડી શકે છે.

ઉદાહરણ: i18n માટે CSS વેરિયેબલ્સનો ઉપયોગ કરવો

તમે ભાષા-વિશિષ્ટ મૂલ્યો, જેમ કે ફોન્ટના કદ, રંગો અને અંતરને સંગ્રહિત કરવા માટે CSS વેરિયેબલ્સનો ઉપયોગ કરી શકો છો. આ તમારી વેબસાઇટને વિવિધ ભાષાઓમાં અનુકૂળ બનાવવાનું સરળ બનાવે છે.

            :root {
  --font-size: 16px;
  --line-height: 1.5;
}

html[lang="de"] {
  --font-size: 17px; /* Slightly larger font size for German */
  --line-height: 1.6;
}

body {
  font-size: var(--font-size);
  line-height: var(--line-height);
}

            

              
                Copy
              
            
          

ઉદાહરણ: ગ્લોબલ થીમ સ્વિચરનો અમલ કરવો

અહીં @use અને રૂપરેખાંકનનો ઉપયોગ કરીને ગ્લોબલ થીમ સ્વિચર કેવી રીતે અમલમાં મૂકવો તેનું એક વ્યવહારુ ઉદાહરણ છે:

1. _themes.css મોડ્યુલ બનાવો: આ મોડ્યુલ વિવિધ થીમ્સ માટે રંગ પૅલેટને વ્યાખ્યાયિત કરે છે.
2. _components.css મોડ્યુલ બનાવો: આ મોડ્યુલ _themes.css મોડ્યુલમાંથી વેરિયેબલ્સનો ઉપયોગ કરીને તમારા ઘટકો માટે સ્ટાઈલ્સને વ્યાખ્યાયિત કરે છે.
3. થીમ્સ સ્વિચ કરવા માટે JavaScript ફંક્શન બનાવો: આ ફંક્શન પસંદ કરેલી થીમના આધારે CSS વેરિયેબલ્સને અપડેટ કરે છે.

            /* _themes.css */

$light-theme-primary-color: #ffffff !default;
$light-theme-secondary-color: #f0f0f0 !default;
$dark-theme-primary-color: #333333 !default;
$dark-theme-secondary-color: #222222 !default;

:root {
  --primary-color: $light-theme-primary-color;
  --secondary-color: $light-theme-secondary-color;
}

/* components.css */

@use 'themes' with (
  $light-theme-primary-color: #ffffff,
  $light-theme-secondary-color: #f0f0f0,
  $dark-theme-primary-color: #333333,
  $dark-theme-secondary-color: #222222
);

.button {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

/* JavaScript */

function switchTheme(theme) {
  if (theme === 'dark') {
    document.documentElement.style.setProperty('--primary-color', themes.$dark-theme-primary-color);

    document.documentElement.style.setProperty('--secondary-color', themes.$dark-theme-secondary-color);
  } else {
   document.documentElement.style.setProperty('--primary-color', themes.$light-theme-primary-color);
    document.documentElement.style.setProperty('--secondary-color', themes.$light-theme-secondary-color);
  }
}

            

              
                Copy
              
            
          

આ ઉદાહરણ દર્શાવે છે કે લવચીક અને જાળવણીક્ષમ થીમ સ્વિચર બનાવવા માટે @use અને રૂપરેખાંકનનો ઉપયોગ કેવી રીતે કરવો. તમે વધુ થીમ્સને સમર્થન આપવા અને તમારી એપ્લિકેશનના દેખાવના અન્ય પાસાઓને કસ્ટમાઇઝ કરવા માટે આ ઉદાહરણને વિસ્તૃત કરી શકો છો.

નિષ્કર્ષ

@use નિયમ મોડ્યુલર, જાળવણીક્ષમ અને માપનીય CSS બનાવવા માટે એક શક્તિશાળી સાધન છે. તેના સિન્ટેક્સ, રૂપરેખાંકન વિકલ્પો અને શ્રેષ્ઠ પદ્ધતિઓને સમજીને, તમે તમારા કોડબેઝના સંગઠન અને ગુણવત્તામાં નોંધપાત્ર સુધારો કરી શકો છો, ખાસ કરીને જ્યારે વૈશ્વિક વેબ પ્રોજેક્ટ્સ વિકસાવતા હોવ. વિશ્વભરના પ્રેક્ષકો માટે વધુ મજબૂત અને કાર્યક્ષમ વેબ એપ્લિકેશન્સ બનાવવા માટે CSS મોડ્યુલ્સ અને @use ને અપનાવો. સુલભતા અને આંતરરાષ્ટ્રીયકરણને પ્રાધાન્ય આપવાનું યાદ રાખો જેથી ખાતરી થઈ શકે કે તમારી વેબસાઇટ દરેક માટે ઉપયોગી અને આનંદપ્રદ છે.