Sass @extend మరియు పరివర్తన

Sass @extend సింగిల్ బుటన్ బేసిక్ క్లాస్ అన్ని CSS అటీబ్యూట్స్ పాటిస్తుంది. వాటికి పాటు, వాటికి స్వంత రంగులు కూడా నిర్వహిస్తాయి:

@extend సింగిల్ బుటన్ బేసిక్ క్లాస్ అన్ని CSS అటీబ్యూట్స్ పాటిస్తుంది. వాటికి పాటు, వాటికి స్వంత రంగులు కూడా నిర్వహిస్తాయి:

మీరు దాదాపు అదే స్టైల్ కలిగిన ఎల్లా అంశాలు కలిగి ఉన్నా, కానీ కొన్ని చిన్న వివరాలు మాత్రమే వ్యత్యాసం ఉన్నట్లయితే @extend సింగిల్ బుటన్ బేసిక్ క్లాస్ అన్ని CSS అటీబ్యూట్స్ పాటిస్తుంది. వాటికి పాటు, వాటికి స్వంత రంగులు కూడా నిర్వహిస్తాయి:

క్రింది Sass ఎక్సంప్లో బుటన్ బేసిక్ స్టైల్ సృష్టిస్తుంది (ఈ స్టైల్ బహుళ బుటన్లకు వర్తిస్తుంది). కానీ, "Report" బుటన్కు ఒక స్టైల్ సృష్టిస్తాము, "Submit" బుటన్కు ఒక స్టైల్ సృష్టిస్తాము. "Report" మరియు "Submit" బుటన్లు కూడా @extend సింగిల్ బుటన్ బేసిక్ క్లాస్ అన్ని CSS అటీబ్యూట్స్ పాటిస్తుంది. వాటికి పాటు, వాటికి స్వంత రంగులు కూడా నిర్వహిస్తాయి:

SCSS శాస్త్రం:

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.button-report  {
  @extend .button-basic;
  background-color: red;
}
.button-submit  {
  @extend .button-basic;
  background-color: green;
  color: white;
}

కంపైల్ చేసిన తర్వాత, CSS ఈ విధంగా ఉంటుంది:

CSS అవుట్పుట్:

.button-basic, .button-report, .button-submit {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.button-report  {
  background-color: red;
}
.button-submit  {
  background-color: green;
  color: white;
}

ఉపయోగించిన ద్వారా @extend ఆదేశం, మీరు HTML కోడ్లో అంశాలకు పలు క్లాస్లను సూచించకుండా ఉండవచ్చు, ఉదాహరణకు: <button class="button-basic button-report">Report this</button>. మీరు కేవలం .button-report సూచించాలి మరియు రెండు రూపాలు స్టైల్స్ పొందగలరు.

@extend ఆదేశాలు మీ Sass కోడ్ను చాలా స్వచ్ఛంగా ఉంచడానికి సహాయపడతాయి (DRY).