CSS ಫಂಕ್ಷನ್ ರೂಲ್: ಕಸ್ಟಮ್ ಫಂಕ್ಷನ್ ಡೆಫಿನಿಷನ್‌ಗಳ ಶಕ್ತಿಯನ್ನು ಅನಾವರಣಗೊಳಿಸುವುದು

ಸಿಎಸ್‌ಎಸ್ ನಿರಂತರವಾಗಿ ವಿಕಸನಗೊಳ್ಳುತ್ತಿದೆ, ಡೆವಲಪರ್‌ಗಳಿಗೆ ಡೈನಾಮಿಕ್ ಮತ್ತು ನಿರ್ವಹಿಸಬಹುದಾದ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಹೆಚ್ಚು ಶಕ್ತಿಶಾಲಿ ಸಾಧನಗಳನ್ನು ನೀಡುತ್ತಿದೆ. ಅಂತಹ ಒಂದು ವೈಶಿಷ್ಟ್ಯವೆಂದರೆ, ಎಲ್ಲಾ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಸಾರ್ವತ್ರಿಕವಾಗಿ ಬೆಂಬಲಿಸದಿದ್ದರೂ ಮತ್ತು ಸಾಮಾನ್ಯವಾಗಿ ಪ್ರಿಪ್ರೊಸೆಸರ್‌ಗಳ ಅಗತ್ಯವಿದ್ದರೂ, ಸಿಎಸ್‌ಎಸ್‌ನಲ್ಲಿ ಕಸ್ಟಮ್ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ ಸಾಮರ್ಥ್ಯ. ಈ ಸಾಮರ್ಥ್ಯವನ್ನು ಸಾಮಾನ್ಯವಾಗಿ Sass, Less, ಅಥವಾ Stylus ನಂತಹ ಪ್ರಿಪ್ರೊಸೆಸರ್‌ಗಳ ಮೂಲಕ ಕಾರ್ಯಗತಗೊಳಿಸಲಾಗುತ್ತದೆ. ಇದು ಸಂಕೀರ್ಣ ತರ್ಕವನ್ನು ಒಟ್ಟುಗೂಡಿಸಲು ಮತ್ತು ಅದನ್ನು ನಿಮ್ಮ ಸಿಎಸ್‌ಎಸ್‌ನಾದ್ಯಂತ ಮರುಬಳಕೆ ಮಾಡಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಇದರಿಂದಾಗಿ ಸ್ವಚ್ಛ, ಹೆಚ್ಚು ಸಂಘಟಿತ ಮತ್ತು ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿ ಕೋಡ್ ಸಾಧ್ಯವಾಗುತ್ತದೆ. ಈ ಲೇಖನವು ಸಿಎಸ್‌ಎಸ್ ಫಂಕ್ಷನ್ ರೂಲ್‌ಗಳ ಪರಿಕಲ್ಪನೆಯನ್ನು ಪರಿಶೀಲಿಸುತ್ತದೆ, ಅವುಗಳ ಸಿಂಟ್ಯಾಕ್ಸ್, ಬಳಕೆಯ ಪ್ರಕರಣಗಳು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನ್ವೇಷಿಸುತ್ತದೆ.

ಸಿಎಸ್‌ಎಸ್ ಫಂಕ್ಷನ್ ರೂಲ್‌ಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು (ಪ್ರಿಪ್ರೊಸೆಸರ್‌ಗಳೊಂದಿಗೆ)

ನೇಟಿವ್ ಸಿಎಸ್‌ಎಸ್ ನೇರವಾಗಿ ಕಸ್ಟಮ್ ಫಂಕ್ಷನ್ ಡೆಫಿನಿಷನ್‌ಗಳನ್ನು ಬೆಂಬಲಿಸದಿದ್ದರೂ (ಈ ಲೇಖನ ಬರೆಯುವ ಸಮಯದಲ್ಲಿ), ಸಿಎಸ್‌ಎಸ್ ಪ್ರಿಪ್ರೊಸೆಸರ್‌ಗಳು ಈ ಪ್ರಮುಖ ಕಾರ್ಯವನ್ನು ಒದಗಿಸುತ್ತವೆ. ಈ ಪ್ರಿಪ್ರೊಸೆಸರ್‌ಗಳು ಸಿಎಸ್‌ಎಸ್‌ ಅನ್ನು ವೇರಿಯಬಲ್‌ಗಳು, ಮಿಕ್ಸಿನ್‌ಗಳು ಮತ್ತು ಫಂಕ್ಷನ್‌ಗಳಂತಹ ವೈಶಿಷ್ಟ್ಯಗಳೊಂದಿಗೆ ವಿಸ್ತರಿಸುತ್ತವೆ, ನಂತರ ಇವುಗಳನ್ನು ಬ್ರೌಸರ್‌ಗಳು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಬಲ್ಲ стандарт ಸಿಎಸ್‌ಎಸ್‌ಗೆ ಕಂಪೈಲ್ ಮಾಡಲಾಗುತ್ತದೆ. ಸಿಎಸ್‌ಎಸ್ ಪ್ರಿಪ್ರೊಸೆಸರ್‌ ಅನ್ನು ಒಂದು ಅನುವಾದಕ ಎಂದು ಭಾವಿಸಿ, ಅದು ನಿಮ್ಮ ವರ್ಧಿತ ಕೋಡ್ ಅನ್ನು ತೆಗೆದುಕೊಂಡು ಅದನ್ನು ಸಾಮಾನ್ಯ ಸಿಎಸ್‌ಎಸ್‌ಗೆ ಪರಿವರ್ತಿಸುತ್ತದೆ. ನಿಜವಾದ ಸಿಎಸ್‌ಎಸ್ ಫಂಕ್ಷನ್ ರೂಲ್‌ಗಳು ಇನ್ನೂ ನೇರವಾಗಿ ಅಸ್ತಿತ್ವದಲ್ಲಿಲ್ಲದ ಕಾರಣ, ಉದಾಹರಣೆಗಳು ಪ್ರಿಪ್ರೊಸೆಸರ್ ಸಿಂಟ್ಯಾಕ್ಸ್ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿರುತ್ತವೆ. ಸಾಮಾನ್ಯವಾಗಿ, ಇದು Sass, Less ಅಥವಾ Stylus ಎಂದರ್ಥ.

ಆದ್ದರಿಂದ, ಇಲ್ಲಿ ತೋರಿಸಿರುವ ಕೋಡ್ ಉದಾಹರಣೆಗಳು ನೇರ ನೇಟಿವ್ ಸಿಎಸ್‌ಎಸ್ ಫಂಕ್ಷನ್ ರೂಲ್‌ಗಳನ್ನು ತೋರಿಸುವುದಕ್ಕಿಂತ ಹೆಚ್ಚಾಗಿ, ಸಿಎಸ್‌ಎಸ್ ಪ್ರಿಪ್ರೊಸೆಸರ್‌ಗಳೊಂದಿಗೆ ಫಂಕ್ಷನ್-ರೀತಿಯ ವರ್ತನೆಯನ್ನು ಹೇಗೆ *ಅನುಕರಿಸುವುದು* ಅಥವಾ *ಸಾಧಿಸುವುದು* ಎಂಬುದನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತವೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಮುಖ್ಯ. ಆರ್ಗ್ಯುಮೆಂಟ್‌ಗಳನ್ನು ಸ್ವೀಕರಿಸಿ ಮತ್ತು ಮೌಲ್ಯವನ್ನು ಹಿಂದಿರುಗಿಸುವ, ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಕೋಡ್ ಬ್ಲಾಕ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದು ಇದರ ಮುಖ್ಯ ಪರಿಕಲ್ಪನೆಯಾಗಿದೆ, ಇದು ನಿಮ್ಮ ಸ್ಟೈಲಿಂಗ್‌ನಲ್ಲಿ ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ರಚಿಸುತ್ತದೆ.

ಸಿಎಸ್‌ಎಸ್‌ನಲ್ಲಿ ಕಸ್ಟಮ್ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಏಕೆ ಬಳಸಬೇಕು?

• ಕೋಡ್ ಮರುಬಳಕೆ: ಒಂದೇ ರೀತಿಯ ಕೋಡ್ ತುಣುಕುಗಳನ್ನು ಹಲವು ಬಾರಿ ಪುನರಾವರ್ತಿಸುವುದನ್ನು ತಪ್ಪಿಸಿ. ಫಂಕ್ಷನ್ ಅನ್ನು ಒಮ್ಮೆ ವ್ಯಾಖ್ಯಾನಿಸಿ ಮತ್ತು ಅಗತ್ಯವಿರುವಲ್ಲೆಲ್ಲಾ ಅದನ್ನು ಮರುಬಳಕೆ ಮಾಡಿ.
• ನಿರ್ವಹಣೆ: ಫಂಕ್ಷನ್‌ನಲ್ಲಿನ ಬದಲಾವಣೆಗಳನ್ನು ಕೇವಲ ಒಂದೇ ಸ್ಥಳದಲ್ಲಿ ಮಾಡಬೇಕಾಗುತ್ತದೆ, ಇದು ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ ಮತ್ತು ದೋಷಗಳ ಅಪಾಯವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ.
• ಸಂಘಟನೆ: ಸಂಕೀರ್ಣ ಸ್ಟೈಲಿಂಗ್ ತರ್ಕವನ್ನು ಸಣ್ಣ, ಹೆಚ್ಚು ನಿರ್ವಹಿಸಬಹುದಾದ ಫಂಕ್ಷನ್‌ಗಳಾಗಿ ವಿಭಜಿಸಿ.
• ಡೈನಾಮಿಕ್ ಸ್ಟೈಲಿಂಗ್: ಬಣ್ಣಗಳು, ಗಾತ್ರಗಳು, ಅಥವಾ ಲೆಕ್ಕಾಚಾರಗಳಂತಹ ಇನ್‌ಪುಟ್ ಮೌಲ್ಯಗಳ ಆಧಾರದ ಮೇಲೆ ಹೊಂದಿಕೊಳ್ಳುವ ಸ್ಟೈಲ್‌ಗಳನ್ನು ರಚಿಸಿ.
• ಅಬ್ಸ್‌ಟ್ರಾಕ್ಷನ್: ಸಂಕೀರ್ಣ ಲೆಕ್ಕಾಚಾರಗಳು ಅಥವಾ ತರ್ಕವನ್ನು ಸರಳ ಫಂಕ್ಷನ್ ಕಾಲ್‌ನ ಹಿಂದೆ ಮರೆಮಾಡಿ, ನಿಮ್ಮ ಸಿಎಸ್‌ಎಸ್‌ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ.

ಸಿಂಟ್ಯಾಕ್ಸ್ ಮತ್ತು ಉದಾಹರಣೆಗಳು (Sass ಬಳಸಿ)

Sass (Syntactically Awesome Style Sheets) ಅತ್ಯಂತ ಜನಪ್ರಿಯ ಸಿಎಸ್‌ಎಸ್ ಪ್ರಿಪ್ರೊಸೆಸರ್‌ಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ ಮತ್ತು ಕಸ್ಟಮ್ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಶಕ್ತಿಯುತ ಮತ್ತು ಅರ್ಥಗರ್ಭಿತ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ. ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳೊಂದಿಗೆ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ಅನ್ವೇಷಿಸೋಣ:

ಮೂಲಭೂತ ಫಂಕ್ಷನ್ ಡೆಫಿನಿಷನ್

Sass ನಲ್ಲಿ, @function ನಿರ್ದೇಶಕವನ್ನು ಬಳಸಿ ಫಂಕ್ಷನ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲಾಗುತ್ತದೆ, ನಂತರ ಫಂಕ್ಷನ್ ಹೆಸರು, ಆರ್ಗ್ಯುಮೆಂಟ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿರುವ ಪ್ಯಾರಂಥಿಸಿಸ್ (ಯಾವುದಾದರೂ ಇದ್ದರೆ), ಮತ್ತು ಫಂಕ್ಷನ್ ಬಾಡಿಯನ್ನು ಒಳಗೊಂಡಿರುವ ಕರ್ಲಿ ಬ್ರೇಸ್‌ಗಳು ಬರುತ್ತವೆ. @return ನಿರ್ದೇಶಕವು ಫಂಕ್ಷನ್ ಹಿಂದಿರುಗಿಸಬೇಕಾದ ಮೌಲ್ಯವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ.

            @function calculate-width($base-width, $multiplier) {
 @return $base-width * $multiplier;
}

.element {
 width: calculate-width(100px, 2);
}

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, calculate-width ಫಂಕ್ಷನ್ ಎರಡು ಆರ್ಗ್ಯುಮೆಂಟ್‌ಗಳನ್ನು, $base-width ಮತ್ತು $multiplier ಅನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ, ಮತ್ತು ಅವುಗಳ ಗುಣಲಬ್ಧವನ್ನು ಹಿಂದಿರುಗಿಸುತ್ತದೆ. ನಂತರ .element ಕ್ಲಾಸ್ ಈ ಫಂಕ್ಷನ್ ಅನ್ನು ಬಳಸಿ ತನ್ನ ಅಗಲವನ್ನು 200px (100px * 2) ಗೆ ಹೊಂದಿಸುತ್ತದೆ.

ಡೀಫಾಲ್ಟ್ ಆರ್ಗ್ಯುಮೆಂಟ್‌ಗಳೊಂದಿಗೆ ಫಂಕ್ಷನ್‌ಗಳು

ನೀವು ಫಂಕ್ಷನ್ ಆರ್ಗ್ಯುಮೆಂಟ್‌ಗಳಿಗೆ ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯಗಳನ್ನು ಒದಗಿಸಬಹುದು. ಫಂಕ್ಷನ್ ಅನ್ನು ಕಾಲ್ ಮಾಡಿದಾಗ ಆರ್ಗ್ಯುಮೆಂಟ್ ಅನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸದಿದ್ದರೆ, ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವನ್ನು ಬಳಸಲಾಗುತ್ತದೆ.

            @function lighten-color($color, $amount: 20%) {
 @return lighten($color, $amount);
}

.element {
 background-color: lighten-color(#3498db);
 color: lighten-color(#2c3e50, 10%);
}

            

              
                Copy
              
            
          

ಇಲ್ಲಿ, lighten-color ಫಂಕ್ಷನ್ ಒಂದು $color ಮತ್ತು ಐಚ್ಛಿಕ $amount ಆರ್ಗ್ಯುಮೆಂಟ್ ಅನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ. $amount ಅನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸದಿದ್ದರೆ, ಅದು 20% ಗೆ ಡೀಫಾಲ್ಟ್ ಆಗುತ್ತದೆ. ನಂತರ ಈ ಫಂಕ್ಷನ್ Sass ನ ಅಂತರ್ನಿರ್ಮಿತ lighten ಫಂಕ್ಷನ್ ಅನ್ನು ಬಳಸಿ ಬಣ್ಣವನ್ನು ನಿರ್ದಿಷ್ಟ ಪ್ರಮಾಣದಲ್ಲಿ ತಿಳಿಗೊಳಿಸುತ್ತದೆ.

ಷರತ್ತುಬದ್ಧ ತರ್ಕದೊಂದಿಗೆ ಫಂಕ್ಷನ್‌ಗಳು

ಫಂಕ್ಷನ್‌ಗಳು @if, @else if, ಮತ್ತು @else ನಿರ್ದೇಶಕಗಳನ್ನು ಬಳಸಿ ಷರತ್ತುಬದ್ಧ ತರ್ಕವನ್ನು ಒಳಗೊಂಡಿರಬಹುದು. ಇದು ನಿರ್ದಿಷ್ಟ ಪರಿಸ್ಥಿತಿಗಳ ಆಧಾರದ ಮೇಲೆ ವಿಭಿನ್ನವಾಗಿ ವರ್ತಿಸುವ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ರಚಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

            @function text-color($background-color) {
 @if lightness($background-color) > 50% {
 @return #000;
 } @else {
 @return #fff;
 }
}

.element {
 background-color: #f0f0f0;
 color: text-color(#f0f0f0); // Black text
}

.dark-element {
 background-color: #333;
 color: text-color(#333); // White text
}

            

              
                Copy
              
            
          

ಈ text-color ಫಂಕ್ಷನ್ ಹಿನ್ನೆಲೆ ಬಣ್ಣದ ಹೊಳಪಿನ ಆಧಾರದ ಮೇಲೆ ಸೂಕ್ತವಾದ ಪಠ್ಯ ಬಣ್ಣವನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ. ಹಿನ್ನೆಲೆ ತಿಳಿಯಾಗಿದ್ದರೆ, ಅದು ಕಪ್ಪು ಬಣ್ಣವನ್ನು ಹಿಂದಿರುಗಿಸುತ್ತದೆ; ಇಲ್ಲದಿದ್ದರೆ, ಅದು ಬಿಳಿ ಬಣ್ಣವನ್ನು ಹಿಂದಿರುಗಿಸುತ್ತದೆ. ಇದು ಉತ್ತಮ ಕಾಂಟ್ರಾಸ್ಟ್ ಮತ್ತು ಓದುವಿಕೆಯನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.

ಲೂಪ್‌ಗಳೊಂದಿಗೆ ಫಂಕ್ಷನ್‌ಗಳು

Sass ಫಂಕ್ಷನ್‌ಗಳು @for, @while, ಮತ್ತು @each ನಿರ್ದೇಶಕಗಳನ್ನು ಬಳಸಿ ಲೂಪ್‌ಗಳನ್ನು ಸಹ ಒಳಗೊಂಡಿರಬಹುದು. ಸಂಕೀರ್ಣ ಸ್ಟೈಲ್‌ಗಳು ಅಥವಾ ಲೆಕ್ಕಾಚಾರಗಳನ್ನು ರಚಿಸಲು ಇದು ಉಪಯುಕ್ತವಾಗಿರುತ್ತದೆ.

            @function generate-shadows($color, $count) {
 $shadows: ();
 @for $i from 1 through $count {
 $shadow: 0 px * $i 0 px * $i rgba($color, 0.2);
 $shadows: append($shadows, $shadow, comma);
 }
 @return $shadows;
}

.element {
 box-shadow: generate-shadows(#000, 3);
}

            

              
                Copy
              
            
          

generate-shadows ಫಂಕ್ಷನ್ ಹೆಚ್ಚುತ್ತಿರುವ ಆಫ್‌ಸೆಟ್‌ಗಳೊಂದಿಗೆ ಬಾಕ್ಸ್ ನೆರಳುಗಳ ಸರಣಿಯನ್ನು ರಚಿಸುತ್ತದೆ. ಇದು $color ಮತ್ತು $count ಅನ್ನು ಆರ್ಗ್ಯುಮೆಂಟ್‌ಗಳಾಗಿ ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ. @for ಲೂಪ್ 1 ರಿಂದ $count ವರೆಗೆ ಪುನರಾವರ್ತಿಸುತ್ತದೆ, ಪ್ರತಿ ಪುನರಾವರ್ತನೆಗೆ ಒಂದು ನೆರಳನ್ನು ರಚಿಸಿ ಅದನ್ನು $shadows ಪಟ್ಟಿಗೆ ಸೇರಿಸುತ್ತದೆ. ಫಲಿತಾಂಶದ box-shadow ಪ್ರಾಪರ್ಟಿಯು ಅನೇಕ ನೆರಳು ಮೌಲ್ಯಗಳನ್ನು ಹೊಂದಿರುತ್ತದೆ, ಇದು ಒಂದು ಪದರದ ಪರಿಣಾಮವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ.

ಪರ್ಯಾಯ ಪ್ರಿಪ್ರೊಸೆಸರ್‌ಗಳು: Less ಮತ್ತು Stylus

Sass ಒಂದು ಪ್ರಮುಖ ಆಯ್ಕೆಯಾಗಿದ್ದರೂ, Less ಮತ್ತು Stylus ಇದೇ ರೀತಿಯ ಫಂಕ್ಷನ್ ಡೆಫಿನಿಷನ್ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ನೀಡುತ್ತವೆ, ಪ್ರತಿಯೊಂದೂ ತನ್ನದೇ ಆದ ಸಿಂಟ್ಯಾಕ್ಸ್ ಮತ್ತು ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಹೊಂದಿದೆ.

Less ಫಂಕ್ಷನ್‌ಗಳು

Less ನಲ್ಲಿ, ಫಂಕ್ಷನ್‌ಗಳನ್ನು 'ಮಿಕ್ಸಿನ್‌ಗಳು' ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ, ಅವು ಸಿಎಸ್‌ಎಸ್ ರೂಲ್‌ಸೆಟ್‌ಗಳನ್ನು ಔಟ್‌ಪುಟ್ ಮಾಡಿದಾಗ ಮತ್ತು ಮೌಲ್ಯಗಳನ್ನು ಹಿಂದಿರುಗಿಸಬಹುದು. Less ನಲ್ಲಿ ಮೀಸಲಾದ @function ನಿರ್ದೇಶಕವಿಲ್ಲ; ಬದಲಾಗಿ, ನೀವು ಮಿಕ್ಸಿನ್‌ನಲ್ಲಿ ಫಂಕ್ಷನ್-ರೀತಿಯ ವರ್ತನೆಯನ್ನು ಸಾಧಿಸಬಹುದು.

            .calculate-area(@width, @height) {
 @area: @width * @height;
 @return @area;
}

.element {
 @width: 10px;
 @height: 20px;
 width: @width;
 height: @height;
 @area: .calculate-area(@width, @height);
 area: @area; // Outputs: area: 200px;
}

            

              
                Copy
              
            
          

Less, ಮಿಕ್ಸಿನ್‌ಗೆ ರವಾನಿಸಲಾದ ಎಲ್ಲಾ ಆರ್ಗ್ಯುಮೆಂಟ್‌ಗಳನ್ನು ಪ್ರವೇಶಿಸಲು @arguments ವೇರಿಯಬಲ್ ಅನ್ನು ಬಳಸುತ್ತದೆ. ಇದು ಕಟ್ಟುನಿಟ್ಟಾದ ಅರ್ಥದಲ್ಲಿ ಫಂಕ್ಷನ್ ಅಲ್ಲದಿದ್ದರೂ, ಇದು ಸಮಾನವಾದ ಕಾರ್ಯವನ್ನು ಒದಗಿಸುತ್ತದೆ. "ಮಿಕ್ಸಿನ್ ಫಂಕ್ಷನ್" ನ ಫಲಿತಾಂಶವನ್ನು ವೇರಿಯಬಲ್‌ಗೆ ನಿಯೋಜಿಸಲು ಮಿಕ್ಸಿನ್ ಕೇವಲ ಮೌಲ್ಯವನ್ನು ಹಿಂದಿರುಗಿಸಬೇಕು (ಅಂದರೆ, ಅದು ನೇರವಾಗಿ ಯಾವುದೇ ಸಿಎಸ್‌ಎಸ್ ರೂಲ್‌ಸೆಟ್‌ಗಳನ್ನು ಔಟ್‌ಪುಟ್ ಮಾಡಬಾರದು) ಎಂಬುದನ್ನು ಗಮನಿಸುವುದು ಮುಖ್ಯ.

Stylus ಫಂಕ್ಷನ್‌ಗಳು

Stylus ಫಂಕ್ಷನ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಸ್ವಚ್ಛ ಮತ್ತು ಸಂಕ್ಷಿಪ್ತ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ನೀಡುತ್ತದೆ. ಇದಕ್ಕೆ ಸ್ಪಷ್ಟವಾದ @function ಅಥವಾ @return ನಿರ್ದೇಶಕಗಳ ಅಗತ್ಯವಿಲ್ಲ.

            calculateWidth(baseWidth, multiplier)
 return baseWidth * multiplier

.element
 width: calculateWidth(100px, 2)

            

              
                Copy
              
            
          

Stylus ಫಂಕ್ಷನ್‌ಗಳು ತಮ್ಮ ಸಿಂಟ್ಯಾಕ್ಸ್‌ನಲ್ಲಿ JavaScript ಫಂಕ್ಷನ್‌ಗಳಿಗೆ ಬಹಳ ಹೋಲುತ್ತವೆ. ಆರ್ಗ್ಯುಮೆಂಟ್‌ಗಳನ್ನು ಪ್ಯಾರಂಥಿಸಿಸ್‌ನಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆ, ಮತ್ತು ಫಂಕ್ಷನ್ ಬಾಡಿ ಕೊನೆಯದಾಗಿ ಮೌಲ್ಯಮಾಪನ ಮಾಡಿದ ಎಕ್ಸ್‌ಪ್ರೆಶನ್ ಅನ್ನು ಅಂತರ್ಗತವಾಗಿ ಹಿಂದಿರುಗಿಸುತ್ತದೆ. ಕೋಡ್ ಸಾಮಾನ್ಯವಾಗಿ ಹೆಚ್ಚು ಸಂಕ್ಷಿಪ್ತ ಮತ್ತು ಓದಬಲ್ಲದಾಗಿದೆ.

ಸಿಎಸ್‌ಎಸ್ ಫಂಕ್ಷನ್ ರೂಲ್‌ಗಳನ್ನು ಬಳಸಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು (ಪ್ರಿಪ್ರೊಸೆಸರ್‌ಗಳೊಂದಿಗೆ)

• ಹೆಸರಿಸುವ ಸಂಪ್ರದಾಯಗಳು: ನಿಮ್ಮ ಫಂಕ್ಷನ್‌ಗಳಿಗೆ ವಿವರಣಾತ್ಮಕ ಮತ್ತು ಸ್ಥಿರವಾದ ಹೆಸರುಗಳನ್ನು ಬಳಸಿ. ಫಂಕ್ಷನ್‌ನ ಉದ್ದೇಶವನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ಸೂಚಿಸುವ ಹೆಸರುಗಳನ್ನು ಆಯ್ಕೆಮಾಡಿ. ಉದಾಹರಣೆಗೆ, calc-pad ಗಿಂತ calculate-padding ಹೆಚ್ಚು ವಿವರಣಾತ್ಮಕವಾಗಿದೆ.
• ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಚಿಕ್ಕದಾಗಿ ಮತ್ತು ಕೇಂದ್ರೀಕೃತವಾಗಿಡಿ: ಪ್ರತಿಯೊಂದು ಫಂಕ್ಷನ್‌ಗೂ ಒಂದೇ, ಉತ್ತಮವಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಉದ್ದೇಶವಿರಬೇಕು. ಅನೇಕ ಕಾರ್ಯಗಳನ್ನು ನಿರ್ವಹಿಸುವ ಅತಿಯಾದ ಸಂಕೀರ್ಣ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ರಚಿಸುವುದನ್ನು ತಪ್ಪಿಸಿ.
• ನಿಮ್ಮ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ದಾಖಲಿಸಿ: ಪ್ರತಿ ಫಂಕ್ಷನ್‌ನ ಉದ್ದೇಶ, ಆರ್ಗ್ಯುಮೆಂಟ್‌ಗಳು ಮತ್ತು ಹಿಂದಿರುಗಿಸುವ ಮೌಲ್ಯವನ್ನು ವಿವರಿಸಲು ಕಾಮೆಂಟ್‌ಗಳನ್ನು ಸೇರಿಸಿ. ಇದು ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ನಿರ್ವಹಿಸಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ.
• ನಿಮ್ಮ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ: ನಿಮ್ಮ ಫಂಕ್ಷನ್‌ಗಳು ನಿರೀಕ್ಷೆಯಂತೆ ವರ್ತಿಸುತ್ತವೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ವಿಭಿನ್ನ ಇನ್‌ಪುಟ್ ಮೌಲ್ಯಗಳೊಂದಿಗೆ ಅವುಗಳನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಿ.
• ಅತಿಯಾದ ಬಳಕೆಯನ್ನು ತಪ್ಪಿಸಿ: ಫಂಕ್ಷನ್‌ಗಳು ಶಕ್ತಿಯುತವಾಗಿದ್ದರೂ, ಅವುಗಳನ್ನು ಅತಿಯಾಗಿ ಬಳಸುವುದನ್ನು ತಪ್ಪಿಸಿ. ಕೋಡ್ ಮರುಬಳಕೆ, ನಿರ್ವಹಣೆ, ಅಥವಾ ಸಂಘಟನೆಯ ವಿಷಯದಲ್ಲಿ ಗಮನಾರ್ಹ ಪ್ರಯೋಜನವನ್ನು ಒದಗಿಸಿದಾಗ ಮಾತ್ರ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಬಳಸಿ. ಕೆಲವೊಮ್ಮೆ, ಒಂದು ಸರಳ ಸಿಎಸ್‌ಎಸ್ ರೂಲ್ ಸಾಕಾಗುತ್ತದೆ.
• ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಪರಿಗಣಿಸಿ: ಸಂಕೀರ್ಣ ಫಂಕ್ಷನ್‌ಗಳು ನಿಮ್ಮ ಸ್ಟೈಲ್‌ಶೀಟ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಹುದು. ನಿಮ್ಮ ಫಂಕ್ಷನ್‌ಗಳು ಪರಿಣಾಮಕಾರಿಯಾಗಿವೆಯೇ ಮತ್ತು ಅನಗತ್ಯ ಓವರ್‌ಹೆಡ್ ಉಂಟುಮಾಡುವುದಿಲ್ಲವೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಅವುಗಳನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ. ವಿಶೇಷವಾಗಿ ಅತಿಯಾದ ಲೂಪಿಂಗ್ ಅಥವಾ ರಿಕರ್ಷನ್ ಅನ್ನು ತಪ್ಪಿಸಿ.
• ಸಾಧ್ಯವಾದಲ್ಲೆಲ್ಲಾ ಸಿಎಸ್‌ಎಸ್ ವೇರಿಯಬಲ್‌ಗಳನ್ನು ಬಳಸಿ: ಸಿಎಸ್‌ಎಸ್ ವೇರಿಯಬಲ್‌ಗಳಿಗೆ (ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟೀಸ್) ಹೆಚ್ಚುತ್ತಿರುವ ಬೆಂಬಲದೊಂದಿಗೆ, ಸರಳ ಮೌಲ್ಯ ಪರ್ಯಾಯಗಳಿಗಾಗಿ ಫಂಕ್ಷನ್‌ಗಳ ಬದಲಿಗೆ ಅವುಗಳನ್ನು ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ. ಸಿಎಸ್‌ಎಸ್ ವೇರಿಯಬಲ್‌ಗಳು ಬ್ರೌಸರ್‌ಗಳಿಂದ ನೇರವಾಗಿ ಬೆಂಬಲಿತವಾಗಿವೆ ಮತ್ತು ಪ್ರಿಪ್ರೊಸೆಸರ್‌ಗಳ ಅಗತ್ಯವಿಲ್ಲ.

ಬಳಕೆಯ ಪ್ರಕರಣಗಳು ಮತ್ತು ನೈಜ-ಪ್ರಪಂಚದ ಉದಾಹರಣೆಗಳು

ನಿಮ್ಮ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳ ದಕ್ಷತೆ ಮತ್ತು ನಿರ್ವಹಣೆಯನ್ನು ಸುಧಾರಿಸಲು ಕಸ್ಟಮ್ ಸಿಎಸ್‌ಎಸ್ ಫಂಕ್ಷನ್‌ಗಳನ್ನು (ಪ್ರಿಪ್ರೊಸೆಸರ್‌ಗಳ ಮೂಲಕ) ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ ಸನ್ನಿವೇಶಗಳಿಗೆ ಅನ್ವಯಿಸಬಹುದು. ಇಲ್ಲಿ ಕೆಲವು ಉದಾಹರಣೆಗಳಿವೆ:

ರೆಸ್ಪಾನ್ಸಿವ್ ಟೈಪೋಗ್ರಫಿ

ಪರದೆಯ ಅಗಲವನ್ನು ಆಧರಿಸಿ ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ಡೈನಾಮಿಕ್ ಆಗಿ ಹೊಂದಿಸುವ ಫಂಕ್ಷನ್ ಅನ್ನು ರಚಿಸಿ. ಇದು ನಿಮ್ಮ ಟೈಪೋಗ್ರಫಿಯು ವಿವಿಧ ಸಾಧನಗಳಲ್ಲಿ ಓದಬಲ್ಲ ಮತ್ತು ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕವಾಗಿ ಉಳಿಯಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.

            @function responsive-font-size($min-size, $max-size, $min-width, $max-width) {
 $slope: ($max-size - $min-size) / ($max-width - $min-width);
 $intercept: $min-size - $slope * $min-width;
 @return calc(#{$slope} * 100vw + #{$intercept});
}

h1 {
 font-size: responsive-font-size(20px, 36px, 320px, 1200px);
}

            

              
                Copy
              
            
          

ಈ ಫಂಕ್ಷನ್ ವ್ಯೂಪೋರ್ಟ್ ಅಗಲವು $min-width ಮತ್ತು $max-width ನಡುವೆ ಸ್ಕೇಲ್ ಆಗುತ್ತಿದ್ದಂತೆ $min-size ಮತ್ತು $max-size ನಡುವೆ ರೇಖೀಯವಾಗಿ ಸ್ಕೇಲ್ ಆಗುವ ಒಂದು ಫ್ಲೂಯಿಡ್ ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತದೆ. ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಲೆಕ್ಕಾಚಾರವನ್ನು ನಿರ್ವಹಿಸಲು calc() ಫಂಕ್ಷನ್ ಅನ್ನು ಬಳಸಲಾಗುತ್ತದೆ.

ಬಣ್ಣದ ನಿರ್ವಹಣೆ

ಮೂಲ ಬಣ್ಣವನ್ನು ಆಧರಿಸಿ ಬಣ್ಣದ ಪ್ಯಾಲೆಟ್‌ಗಳನ್ನು ರಚಿಸುವ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ರಚಿಸಿ. ಇದು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಅಥವಾ ಅಪ್ಲಿಕೇಶನ್‌ನಾದ್ಯಂತ ಸ್ಥಿರವಾದ ಬಣ್ಣದ ಸ್ಕೀಮ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.

            @function tint-color($color, $amount) {
 @return mix(#fff, $color, $amount);
}

@function shade-color($color, $amount) {
 @return mix(#000, $color, $amount);
}

.button {
 background-color: #27ae60;
 &:hover {
 background-color: tint-color(#27ae60, 20%);
 }
 &:active {
 background-color: shade-color(#27ae60, 20%);
 }
}

            

              
                Copy
              
            
          

ಈ ಫಂಕ್ಷನ್‌ಗಳು Sass ನಲ್ಲಿನ ಅಂತರ್ನಿರ್ಮಿತ mix ಫಂಕ್ಷನ್ ಅನ್ನು ಬಳಸಿ ಬಣ್ಣವನ್ನು ನಿರ್ದಿಷ್ಟ ಪ್ರಮಾಣದಲ್ಲಿ ಟಿಂಟ್ (ತಿಳಿಗೊಳಿಸುವುದು) ಅಥವಾ ಶೇಡ್ (ಗಾಢಗೊಳಿಸುವುದು) ಮಾಡುತ್ತವೆ. ಬಟನ್‌ಗಳು ಅಥವಾ ಇತರ ಸಂವಾದಾತ್ಮಕ ಅಂಶಗಳಿಗೆ ಹೋವರ್ ಮತ್ತು ಆಕ್ಟಿವ್ ಸ್ಥಿತಿಗಳನ್ನು ರಚಿಸಲು ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ.

ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್ಸ್

ಒಟ್ಟು ಕಾಲಮ್‌ಗಳ ಸಂಖ್ಯೆ ಮತ್ತು ಬಯಸಿದ ಗಟರ್ ಅಗಲವನ್ನು ಆಧರಿಸಿ ಗ್ರಿಡ್ ಕಾಲಮ್‌ಗಳ ಅಗಲವನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುವ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ರಚಿಸಿ. ಇದು ರೆಸ್ಪಾನ್ಸಿವ್ ಗ್ರಿಡ್ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸುವ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಸರಳಗೊಳಿಸಬಹುದು.

            @function grid-column-width($columns, $total-columns, $gutter) {
 @return calc((100% - ($total-columns - 1) * $gutter) / $total-columns * $columns + ($columns - 1) * $gutter);
}

.column {
 width: grid-column-width(4, 12, 20px);
}

            

              
                Copy
              
            
          

ಈ ಫಂಕ್ಷನ್ ಒಂದು ಗ್ರಿಡ್ ಕಾಲಮ್ ವ್ಯಾಪಿಸಿರುವ ಕಾಲಮ್‌ಗಳ ಸಂಖ್ಯೆ ($columns), ಗ್ರಿಡ್‌ನಲ್ಲಿನ ಒಟ್ಟು ಕಾಲಮ್‌ಗಳ ಸಂಖ್ಯೆ ($total-columns), ಮತ್ತು ಗಟರ್ ಅಗಲವನ್ನು ($gutter) ಆಧರಿಸಿ ಅದರ ಅಗಲವನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತದೆ. ಫಲಿತಾಂಶವು ಕಾಲಮ್‌ಗಳ ನಡುವಿನ ಗಟರ್‌ಗಳನ್ನು ಗಣನೆಗೆ ತೆಗೆದುಕೊಳ್ಳುವ ಶೇಕಡಾವಾರು-ಆಧಾರಿತ ಅಗಲವಾಗಿರುತ್ತದೆ.

ಸಂಕೀರ್ಣ ಲೇಔಟ್ ಮೌಲ್ಯಗಳನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುವುದು

ನೀವು ಒಂದು ಲೇಔಟ್ ರಚಿಸಬೇಕಾಗಿದೆಯೆಂದು ಭಾವಿಸಿ, ಅಲ್ಲಿ ಒಂದು ಅಂಶದ ಎತ್ತರವನ್ನು ಇನ್ನೊಂದು ಅಂಶದ ಎತ್ತರ ಮತ್ತು ಕೆಲವು ಸ್ಥಿರ ಆಫ್‌ಸೆಟ್‌ಗಳ ಆಧಾರದ ಮೇಲೆ ಡೈನಾಮಿಕ್ ಆಗಿ ಲೆಕ್ಕಾಚಾರ ಮಾಡಲಾಗುತ್ತದೆ. ಒಂದು ಫಂಕ್ಷನ್ ಈ ಲೆಕ್ಕಾಚಾರವನ್ನು ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದಂತೆ ಮಾಡುತ್ತದೆ.

            @function calculate-dynamic-height($reference-height, $top-offset, $bottom-offset) {
  @return calc($reference-height - $top-offset - $bottom-offset);
}

.container {
  height: 500px; // Assume this is dynamically set via JS or other means
}

.dynamic-element {
  height: calculate-dynamic-height(500px, 20px, 30px); //Uses the container height
}

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆ ಸರಳವಾಗಿದೆ, ಆದರೆ ರೆಫರೆನ್ಸ್ ಎತ್ತರ ಬದಲಾದಾಗ ಅನೇಕ ಅಂಶಗಳ ಎತ್ತರವನ್ನು ಸುಲಭವಾಗಿ ಅಪ್‌ಡೇಟ್ ಮಾಡಲು ಅಂತಹ ಫಂಕ್ಷನ್ ಹೇಗೆ ಅನುಮತಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಇದು ಪ್ರದರ್ಶಿಸುತ್ತದೆ. ಫಂಕ್ಷನ್ ಲೆಕ್ಕಾಚಾರದ ಸಂಕೀರ್ಣತೆಯನ್ನು ಒಟ್ಟುಗೂಡಿಸುತ್ತದೆ.

ಸಿಎಸ್‌ಎಸ್ ಫಂಕ್ಷನ್ ರೂಲ್‌ಗಳ ಭವಿಷ್ಯ

ಪ್ರಸ್ತುತ ಸಿಎಸ್‌ಎಸ್ ಪ್ರಿಪ್ರೊಸೆಸರ್‌ಗಳು ಈ ಅಂತರವನ್ನು ತುಂಬುತ್ತಿದ್ದರೂ, ನೇಟಿವ್ ಸಿಎಸ್‌ಎಸ್ ಫಂಕ್ಷನ್ ರೂಲ್‌ಗಳ ಸಾಧ್ಯತೆಯು ಒಂದು ರೋಮಾಂಚಕಾರಿ ನಿರೀಕ್ಷೆಯಾಗಿದೆ. ನೇಟಿವ್ ಬೆಂಬಲವು ಪ್ರಿಕಂಪೈಲೇಷನ್‌ನ ಅಗತ್ಯವನ್ನು ನಿವಾರಿಸುತ್ತದೆ ಮತ್ತು ಸಿಎಸ್‌ಎಸ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ನಿರ್ವಹಣೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ. ಸಿಎಸ್‌ಎಸ್‌ನಲ್ಲಿ ಫಂಕ್ಷನ್-ರೀತಿಯ ರಚನೆಗಳ ಅನುಷ್ಠಾನವನ್ನು ಅನ್ವೇಷಿಸಲು ಸಿಎಸ್‌ಎಸ್ ವರ್ಕಿಂಗ್ ಗ್ರೂಪ್‌ನಲ್ಲಿ ನಡೆಯುತ್ತಿರುವ ಚರ್ಚೆಗಳು ಮತ್ತು ಪ್ರಸ್ತಾಪಗಳಿವೆ. ಸಿಎಸ್‌ಎಸ್ ಹೌದಿನಿ (CSS Houdini) ನಂತಹ ವೈಶಿಷ್ಟ್ಯಗಳು ಸಿಎಸ್‌ಎಸ್‌ ಅನ್ನು ಕಸ್ಟಮ್ ಪಾರ್ಸಿಂಗ್ ಮತ್ತು ರೆಂಡರಿಂಗ್ ಸಾಮರ್ಥ್ಯಗಳೊಂದಿಗೆ ವಿಸ್ತರಿಸಲು ಸಂಭಾವ್ಯ ಮಾರ್ಗಗಳನ್ನು ನೀಡುತ್ತವೆ, ಇದು ನಿಜವಾದ ಸಿಎಸ್‌ಎಸ್ ಫಂಕ್ಷನ್ ರೂಲ್‌ಗಳಿಗೆ ದಾರಿ ಮಾಡಿಕೊಡಬಹುದು.

ತೀರ್ಮಾನ

ಸಿಎಸ್‌ಎಸ್ ಪ್ರಿಪ್ರೊಸೆಸರ್‌ಗಳ ಮೂಲಕ ಸಾಧಿಸಲಾದ ಸಿಎಸ್‌ಎಸ್ ಫಂಕ್ಷನ್ ರೂಲ್‌ಗಳು, ಡೈನಾಮಿಕ್, ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಮತ್ತು ನಿರ್ವಹಿಸಬಹುದಾದ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಒಂದು ಶಕ್ತಿಯುತ ಯಾಂತ್ರಿಕ ವ್ಯವಸ್ಥೆಯನ್ನು ಒದಗಿಸುತ್ತವೆ. ಕಸ್ಟಮ್ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಮತ್ತು ಬಳಸಲು ಸಿಂಟ್ಯಾಕ್ಸ್ ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ, ನಿಮ್ಮ ಸಿಎಸ್‌ಎಸ್ ಕೋಡ್‌ನ ದಕ್ಷತೆ ಮತ್ತು ಸಂಘಟನೆಯನ್ನು ನೀವು ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸಬಹುದು. ನೇಟಿವ್ ಸಿಎಸ್‌ಎಸ್ ಫಂಕ್ಷನ್ ಬೆಂಬಲಕ್ಕಾಗಿ ಕಾಯುತ್ತಿರುವಾಗ, Sass, Less, ಮತ್ತು Stylus ನಂತಹ ಪ್ರಿಪ್ರೊಸೆಸರ್‌ಗಳ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಬಳಸಿಕೊಳ್ಳುವುದು ಯಾವುದೇ ಫ್ರಂಟ್-ಎಂಡ್ ಡೆವಲಪರ್‌ಗೆ ಮೌಲ್ಯಯುತ ತಂತ್ರವಾಗಿ ಉಳಿದಿದೆ. ಕಸ್ಟಮ್ ಫಂಕ್ಷನ್‌ಗಳ ಶಕ್ತಿಯನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ ಮತ್ತು ನಿಮ್ಮ ಸಿಎಸ್‌ಎಸ್ ಡೆವಲಪ್‌ಮೆಂಟ್ ವರ್ಕ್‌ಫ್ಲೋನಲ್ಲಿ ಹೊಸ ಮಟ್ಟದ ನಮ್ಯತೆ ಮತ್ತು ನಿಯಂತ್ರಣವನ್ನು ಅನ್ಲಾಕ್ ಮಾಡಿ. ಸರಳ ಪರ್ಯಾಯಗಳಿಗಾಗಿ ಸಿಎಸ್‌ಎಸ್ ವೇರಿಯಬಲ್‌ಗಳನ್ನು ಪರಿಗಣಿಸಲು ಮರೆಯದಿರಿ, ಮತ್ತು ಯಾವಾಗಲೂ ಸ್ವಚ್ಛ, ಉತ್ತಮವಾಗಿ ದಾಖಲಿಸಲಾದ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯ ಕೋಡ್‌ಗಾಗಿ ಶ್ರಮಿಸಿ.