Course Progress 75%

Sass List Functions

← Sass Numeric Sass Map →

Sass List Functions क्या हैं?

Sass List Functions का उपयोग Sass lists के साथ काम करने के लिए किया जाता है। List का मतलब होता है values का एक collection, जिसे एक ही variable में store किया जाता है। यह values colors, sizes, fonts या कोई भी CSS-related data हो सकती हैं।

Beginner के लिए आसान शब्दों में समझें तो:

  • Sass List एक array या collection की तरह होती है
  • List Functions इन values को access, count, replace या modify करने में मदद करती हैं
  • Repeated CSS values को manage करना आसान हो जाता है

Sass Lists आमतौर पर spacing system, color palettes, font stacks और grid layouts में बहुत उपयोगी होती हैं।

Sass में List कैसे लिखी जाती है

Sass में list दो तरीकों से लिखी जा सकती है:

  • Space-separated list
  • Comma-separated list

Example:

$spacing: 5px 10px 15px;
$colors: red, green, blue;

यहां $spacing और $colors दोनों Sass lists हैं।

length() Function

length() क्या करता है

length() function list में मौजूद total items की संख्या return करता है।

Syntax

length(list)

Example

$sizes: 10px 20px 30px;

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

Explanation

इस code में:

  • $sizes list में 3 values हैं
  • length() function इन values की गिनती करता है

यह function इसलिए उपयोग किया जाता है ताकि loop या condition में पता चल सके कि list में कितने items हैं।

Compile होने पर result value 3 होगी।
इसका मतलब list में 3 items मौजूद हैं।

nth() Function

nth() क्या करता है

nth() function list के अंदर से किसी specific position की value निकालता है।

Syntax

nth(list, index)

Example

$colors: red green blue;

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

Explanation

यहां:

  • $colors list में तीन values हैं
  • index 2 पर green मौजूद है

Sass में list indexing 1 से शुरू होती है, 0 से नहीं।

Output CSS में paragraph का text color green हो जाएगा।

यह function तब उपयोगी होता है जब list से कोई specific value चाहिए।

set-nth() Function

set-nth() क्या करता है

set-nth() function list के किसी specific position की value को replace करता है।

Syntax

set-nth(list, index, value)

Example

$sizes: 10px 20px 30px;
$new-sizes: set-nth($sizes, 2, 25px);

Explanation

इस example में:

  • original list $sizes है
  • index 2 की value 20px को 25px से replace किया गया है

Result list बनेगी:

10px 25px 30px

यह function तब उपयोग किया जाता है जब existing list को modify करना हो।

join() Function

join() क्या करता है

join() function दो lists को एक नई list में combine करता है।

Syntax

join(list1, list2)

Example

$list1: 10px 20px;
$list2: 30px 40px;

$final-list: join($list1, $list2);

Explanation

यहां:

  • $list1 और $list2 दोनों अलग lists हैं
  • join() इन्हें जोड़कर एक list बना देता है

Final list होगी:

10px 20px 30px 40px

यह function grid systems और spacing systems में बहुत उपयोगी होता है।

append() Function

append() क्या करता है

append() function list के end में एक नई value add करता है।

Syntax

append(list, value)

Example

$colors: red green;

$new-colors: append($colors, blue);

Explanation

इस code में:

  • original list में red और green हैं
  • blue को end में add किया गया है

Result list बनेगी:

red green blue

यह function dynamic list building के लिए उपयोगी होता है।

index() Function

index() क्या करता है

index() function list में किसी value की position बताता है।

Syntax

index(list, value)

Example

$colors: red green blue;

$position: index($colors, green);

Explanation

यह function:

  • list में green को search करता है
  • उसकी position return करता है

इस case में result 2 होगा।

अगर value list में मौजूद नहीं है, तो result null होगा।

Sass List Functions List

Function NameDescription
length()list में total items की संख्या बताता है
nth()list से specific item निकालता है
set-nth()list के item को replace करता है
join()दो lists को जोड़ता है
append()list में नई value add करता है
index()value की position बताता है

Sass List Functions का Practical Use

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

  • Spacing और margin systems बनाने में
  • Color palettes manage करने में
  • Grid layouts और breakpoints define करने में
  • Reusable और scalable CSS architecture बनाने में

इस chapter को पढ़ने के बाद beginner-level user Sass Lists को समझकर complex CSS values को आसानी से manage कर सकता है और clean, structured stylesheets बना सकता है।

← Sass Numeric Sass Map →
  • Home