Course Progress 88%

Sass Selector Functions

← Sass Map Sass Introspection →

Sass Selector Functions क्या है?

Sass Selector Functions का उपयोग CSS selectors के साथ काम करने के लिए किया जाता है। Selector का मतलब होता है वह pattern जिससे HTML elements को target किया जाता है, जैसे div, .class, #id, ul li आदि।

Beginner के लिए आसान भाषा में समझें तो:

  • Selector Functions selectors को analyze और manipulate करने में मदद करती हैं
  • यह functions check कर सकती हैं कि selector valid है या नहीं
  • Selector के अंदर मौजूद elements, classes या parents की जानकारी दे सकती हैं

Sass Selector Functions का उपयोग advanced styling logic, reusable components और complex CSS architecture में किया जाता है।

Sass में Selector क्या होता है

Selector वह तरीका है जिससे CSS बताती है कि किस HTML element पर style apply करनी है।

Example:

.container .box:hover

यहां:

  • .container parent selector है
  • .box child selector है
  • :hover pseudo-class है

अब हम Sass Selector Functions को detail में समझते हैं।

selector-nest() Function

selector-nest() क्या करता है

selector-nest() function multiple selectors को nest करके एक नया selector बनाता है।

Syntax

selector-nest(selector1, selector2, ...)

Example

$selector: selector-nest(".container", ".item");

#{$selector} {
  color: red;
}

Explanation

इस code में:

  • .container और .item को nest किया गया है
  • Sass इन्हें combine करके .container .item बना देता है

यह function इसलिए उपयोगी है क्योंकि dynamic selectors बनाना आसान हो जाता है।

Compile होने के बाद output CSS में यह बनेगा:

.container .item {
  color: red;
}

Result में .container के अंदर मौजूद .item elements का color red होगा।

selector-append() Function

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

selector-append() function selector के end में नया selector जोड़ता है।

Syntax

selector-append(selector, addition)

Example

$selector: selector-append(".btn", ":hover");

#{$selector} {
  background-color: blue;
}

Explanation

यहां:

  • .btn selector के end में :hover जोड़ा गया है
  • Result selector .btn:hover बनेगा

यह function hover, active या focus states बनाने के लिए बहुत उपयोगी है।

Compile होने के बाद output होगा:

.btn:hover {
  background-color: blue;
}

Result में button hover करने पर background color blue हो जाएगा।

selector-replace() Function

selector-replace() क्या करता है

selector-replace() function selector के किसी specific हिस्से को replace करता है।

Syntax

selector-replace(selector, original, replacement)

Example

$selector: selector-replace(".btn-primary", ".btn", ".button");

#{$selector} {
  padding: 10px;
}

Explanation

इस example में:

  • original selector .btn-primary है
  • .btn को .button से replace किया गया है

Result selector बनेगा:

.button-primary

Compile होने के बाद CSS में यह output आएगा:

.button-primary {
  padding: 10px;
}

यह function large projects में naming conventions change करने के लिए उपयोगी होता है।

selector-unify() Function

selector-unify() क्या करता है

selector-unify() function दो selectors को combine करके एक common selector बनाता है।

Syntax

selector-unify(selector1, selector2)

Example

$selector: selector-unify(".btn", ".active");

#{$selector} {
  color: white;
}

Explanation

यह function:

  • .btn और .active को combine करता है
  • Result selector .btn.active बनेगा

Compile होने के बाद output CSS होगा:

.btn.active {
  color: white;
}

Result में वही elements target होंगे जिनमें दोनों classes मौजूद हों।

selector-extend() Function

selector-extend() क्या करता है

selector-extend() function एक selector को दूसरे selector से extend करता है।

Syntax

selector-extend(selector, extendee, extender)

Example

$selector: selector-extend(".btn-primary", ".btn", ".btn-primary");

#{$selector} {
  font-weight: bold;
}

Explanation

यह function:

  • .btn-primary को .btn के styles से logically extend करता है

यह advanced selector manipulation के लिए उपयोग किया जाता है, खासकर reusable components में।

Compile होने के बाद CSS selectors properly merged होकर apply होते हैं।

is-superselector() Function

is-superselector() क्या करता है

is-superselector() function check करता है कि एक selector दूसरे selector को completely cover करता है या नहीं।

Syntax

is-superselector(super, sub)

Example

$value: is-superselector(".btn", ".btn.primary");

Explanation

यह function:

  • check करता है कि .btn selector .btn.primary को cover करता है या नहीं

Result true होगा, क्योंकि .btn broader selector है।

यह function conditional logic और selector validation में उपयोगी है।

simple-selectors() Function

simple-selectors() क्या करता है

simple-selectors() function complex selector को छोटे simple selectors में तोड़ देता है।

Syntax

simple-selectors(selector)

Example

$selectors: simple-selectors(".container .box.active");

Explanation

यह function:

  • selector को अलग-अलग parts में divide करता है

Result list होगी:

(".container", ".box.active")

यह function selector analysis और debugging के लिए उपयोगी है।

Sass Selector Functions List

Function NameDescription
selector-nest()selectors को nest करता है
selector-append()selector के end में जोड़ता है
selector-replace()selector का हिस्सा replace करता है
selector-unify()selectors को combine करता है
selector-extend()selector को extend करता है
is-superselector()selector relationship check करता है
simple-selectors()selector को parts में divide करता है

Sass Selector Functions का Practical Use

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

  • Dynamic और reusable selectors बनाने में
  • Component-based CSS architecture में
  • Large-scale projects में naming consistency बनाए रखने में
  • Advanced theming और state management में

इस chapter को पढ़ने के बाद beginner-level user Sass Selector Functions को समझकर selectors के साथ advanced लेकिन controlled तरीके से काम कर सकता है।

← Sass Map Sass Introspection →
  • Home