Course Progress 63%

Sass String Functions

← Sass Functions Sass Numeric →

Sass String Functions क्या हैं?

Sass String Functions का उपयोग text यानी string values के साथ काम करने के लिए किया जाता है। String का मतलब होता है कोई भी text value, जैसे "Hello", "Sass Tutorial" या "btn-primary"।

CSS में string values का उपयोग content, font-family, class naming logic और dynamic text generation में किया जाता है। Sass String Functions इन string values को manipulate करने में मदद करती हैं, जैसे:

  • string की length निकालना
  • string को quotes में डालना या हटाना
  • string के किसी हिस्से को extract करना
  • दो strings को जोड़ना

Beginner के लिए सरल शब्दों में, Sass String Functions text को control और process करने का तरीका देती हैं।

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

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

  • Quoted string: "Hello World"
  • Unquoted string: Hello World

Sass String Functions दोनों के साथ काम कर सकती हैं।

quote() Function

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

quote() function किसी unquoted string को quoted string में convert करता है।

Syntax

quote(string)

Example

p::before {
  content: quote(Welcome);
}

Explanation

इस code में:

  • Welcome एक unquoted string है
  • quote() function इसे quotes के अंदर convert कर देता है

यह function इसलिए उपयोग किया जाता है क्योंकि CSS की content property में text को quotes के अंदर होना जरूरी होता है।

Compile होने के बाद output CSS में value इस तरह होगी:

content: "Welcome";

Result में paragraph के पहले "Welcome" text दिखाई देगा।

unquote() Function

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

unquote() function quoted string से quotes हटा देता है।

Syntax

unquote(string)

Example

$font-name: "Open Sans";

body {
  font-family: unquote($font-name);
}

Explanation

यहां:

  • $font-name एक quoted string है
  • unquote() quotes को remove कर देता है

यह function इसलिए उपयोगी है क्योंकि कई CSS properties quotes को accept नहीं करतीं या unnecessary quotes avoid करनी होती हैं।

Compile होने पर output CSS में यह बनेगा:

font-family: Open Sans;

Result में browser Open Sans font को सही तरीके से apply करेगा।

str-length() Function

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

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

Syntax

str-length(string)

Example

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

Explanation

इस example में:

  • "Sass" string में 4 characters हैं

यह function value 4 return करेगा।

यह function validation, conditional logic और dynamic calculations में उपयोग किया जाता है।

str-insert() Function

str-insert() क्या करता है

str-insert() function किसी string के अंदर एक नई string को specific position पर insert करता है।

Syntax

str-insert(string, insert, index)

Example

$class-name: str-insert("btn-primary", "large-", 5);

Explanation

यहां:

  • original string है "btn-primary"
  • "large-" को position 5 पर insert किया गया है

Result string बनेगी:

btn-large-primary

यह function dynamic class names या custom naming logic बनाने के लिए उपयोगी होता है।

str-index() Function

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

str-index() function किसी string के अंदर दिए गए substring की position बताता है।

Syntax

str-index(string, substring)

Example

$position: str-index("Sass Tutorial", "Tutorial");

Explanation

इस code में:

  • "Tutorial" word "Sass Tutorial" string में मौजूद है

यह function उस word की starting position return करेगा।

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

यह function search और condition-based logic में उपयोग किया जाता है।

str-slice() Function

str-slice() क्या करता है

str-slice() function string के किसी specific हिस्से को extract करता है।

Syntax

str-slice(string, start-at, end-at)

Example

$value: str-slice("SassFunctions", 1, 4);

Explanation

यहां:

  • string "SassFunctions" है
  • index 1 से 4 तक characters निकाले गए हैं

Result string होगी:

Sass

यह function string trimming और partial text extraction में उपयोग किया जाता है।

to-upper-case() Function

to-upper-case() क्या करता है

to-upper-case() function string को uppercase letters में convert करता है।

Syntax

to-upper-case(string)

Example

p {
  content: to-upper-case("sass tutorial");
}

Explanation

यह function:

  • सभी characters को capital letters में बदल देता है

Output में text इस तरह दिखेगा:

SASS TUTORIAL

यह function headings, labels और emphasis text के लिए उपयोगी है।

to-lower-case() Function

to-lower-case() क्या करता है

to-lower-case() function string को lowercase letters में convert करता है।

Syntax

to-lower-case(string)

Example

p {
  content: to-lower-case("SASS TUTORIAL");
}

Explanation

यह function:

  • सभी capital letters को small letters में बदल देता है

Result में output होगा:

sass tutorial

यह function consistency और formatting के लिए उपयोग किया जाता है।

Sass String Functions List

Function NameDescription
quote()string को quotes में convert करता है
unquote()string से quotes हटाता है
str-length()string की length return करता है
str-insert()string के अंदर text insert करता है
str-index()substring की position बताता है
str-slice()string का हिस्सा निकालता है
to-upper-case()string को uppercase में बदलता है
to-lower-case()string को lowercase में बदलता है

Sass String Functions का Practical Use

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

  • Dynamic class name generation
  • CSS content property के लिए text handling
  • Theme-based naming logic
  • Consistent formatting और styling rules

इस chapter को पढ़ने के बाद beginner-level user Sass String Functions को समझकर अपने stylesheets में text-related logic आसानी से apply कर सकता है।

← Sass Functions Sass Numeric →
  • Home