Sass Numeric Functions क्या हैं
Sass Numeric Functions का उपयोग numbers के साथ calculations और processing करने के लिए किया जाता है। ये numbers CSS properties जैसे width, height, margin, padding, font-size, opacity और z-index आदि में बहुत commonly इस्तेमाल होते हैं।
Beginner के लिए आसान भाषा में समझें तो:
- Sass Numeric Functions numbers को calculate, round, convert और compare करने में मदद करती हैं
- ये functions CSS को ज्यादा dynamic और flexible बनाती हैं
- Complex calculations को simple और readable code में बदल देती हैं
Sass में numbers unit के साथ भी हो सकते हैं, जैसे px, %, em, rem आदि, और Numeric Functions इन units के साथ सही तरीके से काम करती हैं।
Sass में Numbers कैसे काम करते हैं
Sass में number दो तरह के हो सकते हैं:
- Unit के साथ:
10px,50%,1.5em - Unit के बिना:
10,0.5,3
Numeric Functions इन values को process करके final CSS value generate करती हैं।
percentage() Function
percentage() क्या करता है
percentage() function decimal number को percentage value में convert करता है।
Syntax
percentage(number)
Example
.container {
width: percentage(0.75);
}
Explanation
इस code में:
0.75एक decimal number हैpercentage()function इसे percentage में convert करता है
यह function इसलिए उपयोग किया जाता है क्योंकि CSS layouts में percentage values बहुत common होती हैं।
Compile होने के बाद output CSS में यह बनेगा:
width: 75%;
Result में container की width उसके parent की 75% होगी।
round() Function
round() क्या करता है
round() function number को nearest whole number में round कर देता है।
Syntax
round(number)
Example
.box {
width: round(10.6px);
}
Explanation
यहां:
- original value
10.6pxहै round()इसे nearest integer में बदल देता है
10.6 का nearest integer 11 होता है, इसलिए output होगा:
width: 11px;
यह function तब उपयोगी होता है जब layout में exact pixel value चाहिए।
ceil() Function
ceil() क्या करता है
ceil() function number को हमेशा ऊपर की ओर round करता है।
Syntax
ceil(number)
Example
.box {
width: ceil(10.1px);
}
Explanation
इस example में:
- value
10.1pxहै ceil()इसे ऊपर round करके11pxबना देता है
यह function तब उपयोग किया जाता है जब minimum size guarantee करनी हो।
Compile होने के बाद output होगा:
width: 11px;
floor() Function
floor() क्या करता है
floor() function number को हमेशा नीचे की ओर round करता है।
Syntax
floor(number)
Example
.box {
width: floor(10.9px);
}
Explanation
यहां:
- value
10.9pxहै floor()इसे नीचे round करके10pxबना देता है
यह function spacing और layout control में उपयोगी होता है।
abs() Function
abs() क्या करता है
abs() function किसी negative number को positive number में convert कर देता है।
Syntax
abs(number)
Example
.box {
margin-left: abs(-20px);
}
Explanation
इस code में:
-20pxएक negative value हैabs()इसे positive value में बदल देता है
Output CSS में यह बनेगा:
margin-left: 20px;
यह function तब उपयोगी होता है जब calculation का result negative आ सकता है लेकिन CSS में positive value चाहिए।
min() Function
min() क्या करता है
min() function multiple numbers में से सबसे छोटी value return करता है।
Syntax
min(number1, number2, ...)
Example
.box {
width: min(300px, 50%);
}
Explanation
यह function:
300pxऔर50%में comparison करता है- Browser runtime पर जो value छोटी होगी, वही apply होगी
यह responsive layouts के लिए बहुत उपयोगी है, जहां fixed और flexible size के बीच balance चाहिए।
max() Function
max() क्या करता है
max() function multiple numbers में से सबसे बड़ी value return करता है।
Syntax
max(number1, number2, ...)
Example
.box {
width: max(200px, 40%);
}
Explanation
यह function:
- दिए गए values में से जो value बड़ी होगी, उसे apply करेगा
यह minimum readable size maintain करने के लिए उपयोग किया जाता है।
random() Function
random() क्या करता है
random() function एक random number generate करता है।
Syntax
random()
random(limit)
Example
.box {
z-index: random(10);
}
Explanation
यहां:
random(10)1 से 10 के बीच कोई भी random number generate करेगा
यह function rarely layout में use होता है, लेकिन testing और experimental designs में helpful होता है।
Sass Numeric Functions List
| Function Name | Description |
|---|---|
| percentage() | decimal को percentage में convert करता है |
| round() | number को nearest integer में round करता है |
| ceil() | number को ऊपर round करता है |
| floor() | number को नीचे round करता है |
| abs() | negative number को positive बनाता है |
| min() | सबसे छोटी value return करता है |
| max() | सबसे बड़ी value return करता है |
| random() | random number generate करता है |
Sass Numeric Functions का Practical Use
Sass Numeric Functions का real-world use:
- Responsive layout calculations
- Dynamic spacing और sizing
- Font-size scaling
- Consistent design system maintain करने में
इस chapter को पढ़ने के बाद beginner-level user numbers से related सभी common Sass operations को आसानी से समझ सकता है और अपने stylesheets में confidently apply कर सकता है।