Sass Functions

Sass Functions क्या होते हैं?

Sass Functions ऐसे predefined या user-defined tools होते हैं जो किसी value को process करके नया result return करते हैं। यह functions बिल्कुल programming language के functions की तरह काम करते हैं, लेकिन इनका उपयोग CSS values जैसे color, number, string, list और map के साथ किया जाता है।

Beginner के लिए सरल शब्दों में, Sass Function का काम है:

• किसी value को input के रूप में लेना
• उस value पर calculation या processing करना
• और एक final value वापस देना, जो CSS में apply हो सके

Sass Functions का उपयोग करने से CSS code:

• ज्यादा dynamic बनता है
• calculations आसान हो जाती हैं
• repeated logic को reuse किया जा सकता है
• complex styling को simple बनाया जा सकता है

Sass Functions का Basic Syntax

function-name(arguments);

यह syntax बताता है कि:

• function-name वह function है जो Sass provide करता है
• arguments वे values हैं जिन पर function काम करेगा

जब Sass compile होकर CSS बनता है, तब function का result actual CSS value में convert हो जाता है।

Sass Functions का उपयोग क्यों किया जाता है

Sass Functions इसलिए उपयोग किए जाते हैं क्योंकि:

• CSS में direct calculation सीमित होती है
• Colors को lighten, darken, mix करना आसान हो जाता है
• Responsive design में dynamic values generate की जा सकती हैं
• Code readable और maintainable बनता है

अब हम Sass के सभी मुख्य Function categories और उनके functions को विस्तार से समझेंगे।

Sass Color Functions

Color Functions colors के साथ काम करने के लिए उपयोग किए जाते हैं।

lighten()

p {
  color: lighten(#3498db, 20%);
}

यह code दिए गए color को 20% तक light कर देता है।
यह function इसलिए उपयोग किया जाता है ताकि same color का हल्का version बनाया जा सके।
इसका output एक हल्का blue color होगा जो CSS में apply हो जाएगा।

darken()

h1 {
  color: darken(#3498db, 15%);
}

यह code color को 15% तक dark कर देता है।
इसका उपयोग तब किया जाता है जब hover या heading के लिए darker shade चाहिए।
Result में original color से गहरा blue मिलेगा।

mix()

div {
  background-color: mix(red, blue, 50%);
}

यह function दो colors को mix करता है।
50% का मतलब दोनों colors बराबर मात्रा में mix होंगे।
Output में purple जैसा color बनेगा।

rgba()

.box {
  background-color: rgba(0, 0, 0, 0.5);
}

यह function color के साथ transparency add करता है।
यह overlay या shadow effect के लिए उपयोगी है।
Output में half-transparent black background मिलेगा।

Sass Number Functions

Number Functions mathematical calculations के लिए होते हैं।

percentage()

.container {
  width: percentage(0.75);
}

यह code decimal value को percentage में convert करता है।
0.75 का मतलब 75% होता है।
Output CSS में width: 75%; बनेगा।

round()

.box {
  width: round(10.6px);
}

यह function value को nearest integer में round करता है।
10.6px round होकर 11px बन जाएगा।
यह तब उपयोगी है जब precise pixel value चाहिए।

ceil()

.box {
  width: ceil(10.1px);
}

यह function value को हमेशा ऊपर की ओर round करता है।
10.1px का result 11px होगा।
यह layout adjustment में उपयोगी होता है।

floor()

.box {
  width: floor(10.9px);
}

यह function value को नीचे की ओर round करता है।
10.9px का output 10px होगा।

Sass String Functions

String Functions text values के साथ काम करते हैं।

quote()

p::before {
  content: quote(Hello World);
}

यह function string को quotes में convert करता है।
यह CSS content property में text दिखाने के लिए उपयोग होता है।
Output में "Hello World" दिखाई देगा।

unquote()

p::after {
  content: unquote("Welcome");
}

यह function string से quotes हटा देता है।
Result में text बिना quotes के render होगा।

str-length()

$value-length: str-length("Sass");

यह function string की length count करता है।
“Sass” में 4 characters हैं।
Result value 4 होगी।

Sass List Functions

List Functions Sass lists के साथ काम करते हैं।

length()

$list: 10px 20px 30px;

.box {
  content: length($list);
}

यह function list में मौजूद items की संख्या बताता है।
इस list में 3 items हैं।
Output में value 3 होगी।

nth()

$list: red green blue;

p {
  color: nth($list, 2);
}

यह function list का specific item निकालता है।
Index 2 पर green है।
Output में text का color green होगा।

Sass Map Functions

Map Functions key-value pairs के लिए होते हैं।

map-get()

$colors: (
  primary: blue,
  secondary: green
);

h1 {
  color: map-get($colors, primary);
}

यह function map से value निकालता है।
primary key की value blue है।
Output में heading का color blue होगा।

map-has-key()

$value: map-has-key($colors, secondary);

यह function check करता है कि map में key मौजूद है या नहीं।
अगर key मिले तो result true होगा।
यह condition-based styling में उपयोगी है।

Sass Function Categories Summary Table

Category	Common Functions
Color Functions	lighten(), darken(), mix(), rgba()
Number Functions	percentage(), round(), ceil(), floor()
String Functions	quote(), unquote(), str-length()
List Functions	length(), nth()
Map Functions	map-get(), map-has-key()

Sass Functions का Real Use Case

Sass Functions का उपयोग real projects में:

• Theme colors generate करने
• Responsive layouts के लिए calculations
• Dynamic spacing और font sizes
• Maintainable और scalable CSS architecture बनाने

इस chapter को पढ़ने के बाद एक beginner यह समझ सकता है कि Sass Functions क्या हैं, क्यों जरूरी हैं, और practical तरीके से CSS styling को बेहतर बनाने में कैसे मदद करती हैं।