Sass ఉపన్యాసం

మీరు తెలుసుకోవాలి ఉండాల్సినవి

కొనసాగుతున్నాకు ముందు, మీరు ఈ విషయాలను ప్రాథమికంగా తెలుసుకోవాలి:

  • HTML
  • CSS

ఈ విషయాలను మొదటగా నేర్చుకోవాలి అని చూసుకున్నారు అంటే, మా లింకులను మీరు చూడండి: హోమ్ పేజీ ఈ శిక్షణాలను చూడండి.

ఏమి సస్స్ అంటే?

  • Sass అంటే ఏమిటి? Syntactically Awesome Stylesheet (పరిణామకరమైన స్టైల్స్ పేజీ)
  • Sass CSS ఎక్స్టెన్షన్
  • Sass CSS ప్రీ-ప్రాసెసర్
  • Sass అన్ని సంస్కరణలను పూర్తిగా సహాయపడుతుంది
  • Sass CSS యొక్క పునరావృతం తగ్గించి సమయాన్ని పొదుపు చేస్తుంది
  • Sass హామ్ప్టన్ కాట్లిన్ చేత రూపొందించబడింది మరియు 2006లో నటలీ వైజెన్బామ్ చేత అభివృద్ధి చేయబడింది
  • Sass ఉచితంగా డౌన్లోడ్ మరియు ఉపయోగించవచ్చు

ఎందుకు Sass వాడాలి?

స్టైల్స్ పెద్దగా మరియు చాలా క్లిష్టంగా అయ్యాయి, మరియు నిర్వహించడం చాలా కష్టం అయ్యాయి. ఈ సందర్భంలో CSS ప్రీ-ప్రాసెసర్స్ సహాయపడుతుంది.

Sass కులంలో లేని లక్షణాలను ఉపయోగించేందుకు అనుమతిస్తుంది, వాటిలో ఉన్నాయి వ్యాఖ్యలు, నిరాకరణ నియమాలు, mixin, దిగువకి తీసుకునేలా, అనుగతించడం, స్వాభావిక ఫంక్షన్స్ మరియు ఇతర లక్షణాలు.

Sass పై ఒక మంచి ఉదాహరణ

మార్గదర్శక రంగులు కలిగిన వెబ్సైట్ ఒకటి ఉంది అని భావించండి:

#a2b9bc
#b2ad7f
#878f99

ఈ HEX విలువలను మీరు ఎన్నుకొనుటకు ఎంతసార్లు చేయాలి? అనేక సార్లు. అదే రంగు మారితే ఎంతసార్లు చేయాలి?

మీరు Sass వాడిన ఈ కోడ్ని రాయవచ్చు, కాదు పెద్దగా అప్పగించిన విలువలను బహుళంగా రాయడం కాకుండా:

Sass ఇన్స్టాన్స్

/* అసలు రంగుకు వ్యాఖ్యలు నిర్వహించండి */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
/* వేరియబుల్స్ ఉపయోగించండి */
.main-header {
  background-color: $primary_1;
}
.menu-left {
  background-color: $primary_2;
}
.menu-right {
  background-color: $primary_3;
}

కాబట్టి, Sass వాడటంలో, అసలు రంగు మారితే, మీరు ఒక స్థానంలో మాత్రమే మార్పు చేయాలి.

Sass 是如何工作的？

浏览器不理解 Sass 代码。因此，您需要一个 Sass 预处理器来将 Sass 代码转换为标准 CSS。

这个过程称为转译（transpiling）。所以，您需要为转译器（某种程序）提供 Sass 代码，然后取回 CSS 代码。

సలహా:ట్రాన్స్పిలింగ్ అనేది ఒక పదం, ఇది ఒక భాషలో రాసిన సోర్స్ కోడ్ను మరొక భాషలో మార్చుకుంటుంది/అనువాదం చేస్తుంది。

Sass ఫైల్ రకం

Sass ఫైల్స్ ఫైల్ ఎక్స్టెన్షన్ అయిన ".scss" ఉంటాయి。

Sass వ్యాఖ్యలు

Sass ప్రామాణిక CSS వ్యాఖ్యలను మద్దతు ఇస్తుంది /* comment */పదార్థంగా, అంతర్గత వ్యాఖ్యలను కూడా మద్దతు ఇస్తుంది // comment:

Sass ఇన్స్టాన్స్

/* ప్రధాన రంగులను నిర్వచించండి */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/* వేరియబుల్స్ ఉపయోగించండి */
.main-header {
  background-color: $primary_1; // ఇక్కడ అంతర్గత వ్యాఖ్యలను జోడించవచ్చు
}