Sass @import మరియు Partials

Sass 可保持 CSS 代码干燥（DRY，Don't Repeat Yourself，不要重复自己）。

编写 DRY 代码的一种方法是将相关代码保存在单独的文件中。

您可使用 CSS 片段创建小文件，并包含在其他 Sass 文件中。例如这类文件可以是：重置文件、变量、颜色、字体等。

Sass 文件导入

就像 CSS 一样，Sass 也支持 @import 指令。

@import 指令允许您将一个文件的内容包含在另一个文件中。

由于性能问题，CSS @import 指令有一个主要的缺点；每次调用它时都会创建一个额外的 HTTP 请求。但是，Sass @import ఆదేశాలు ఫైల్స్ ను CSS లో చేర్చడానికి ఉపయోగిస్తాయి; కాబట్టి, నడిచినప్పుడు అదనపు HTTP కాల కాల్స్ అవసరం లేదు!

Sass ప్రవేశపెట్టడానికి సంకేతాలు:

@import filename;

సలహా:మీరు ఫైల్ పొడిగించకుండా ఉండాలి, Sass మీరు ఇంకా సిఎస్ఎస్ ఫైల్స్ ను ప్రవేశపెట్టవచ్చు. మీరు ఇంకా CSS ఫైల్స్ ను ప్రవేశపెట్టవచ్చు.@import ఆదేశాలు ఫైల్స్ ప్రవేశపెట్టిన తర్వాత, మీరు ప్రవేశపెట్టిన ఫైల్స్ లో నిర్వచించబడిన ఏమైనా వేరియబుల్స్ లేదా mixin లను ప్రధాన ఫైల్లో ఉపయోగించవచ్చు.

మీరు ప్రధాన ఫైల్లో ఏమైనా ఫైల్స్ ప్రవేశపెట్టవచ్చు:

ఉదాహరణ

@import "variables";
@import "colors";
@import "reset";

మానికి ఒక ఉదాహరణ చూద్దాం: ఇది "reset.scss" పునరుద్ధరణ ఫైల్ ఉంటుంది, ఇది ఈ విధంగా ఉంటుంది:

SCSS సంకేతాలు (reset.scss):

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

ఇప్పుడు మేము "reset.scss" ఫైల్ను మరొక ఫైల్ "standard.scss" లోకి ప్రవేశపెట్టడానికి ప్రయత్నిస్తున్నాము.

మేము ఇలా చేస్తాము: సాధారణంగా ఫైల్ పైభాగంలో జోడించబడిన ఉంటుంది: @import ఆదేశాలు; అలాగే, దాని విషయం సర్వస్వామిక పరిధిలో ఉంటుంది:

SCSS సంకేతాలు (standard.scss):

@import "reset";
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

కాబట్టి, "standard.css" ఫైల్ మార్పిడి చేయబడినప్పుడు, CSS ఈ విధంగా ఉంటుంది:

CSS అవుట్పుట్:

html, body, ul, ol {
  margin: 0;
  padding: 0;
}
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

Sass Partials (సబ్ ఫైల్స్)

అప్రమేయంగా, Sass అన్ని .scss ఫైల్స్ ను నేరుగా మార్పిడి చేస్తుంది. కానీ, ఫైల్స్ ప్రవేశపెట్టడానికి, మీరు ఫైల్స్ నేరుగా మార్పిడి చేయకుండా ఉండాలి.

Sass కింద ఒక వ్యవస్థం ఉంది: మీరు ఫైల్ పేరును ముందుకు గల నిష్క్రియ సంకేతంతో ప్రారంభించినట్లయితే, Sass దానిని పరివర్తించదు. ఈ విధంగా పేరు పెట్టబడిన ఫైళ్లను Sass లో partials అంటారు.

అందువల్ల, partial Sass ఫైల్స్ ముందుకు గల నిష్క్రియ సంకేతాలతో పేరు పెట్టబడతాయి:

Sass Partial సింథెక్సిస్:

_filename;

ఈ ఉదాహరణలో, పేరు "_colors.scss" గల partial Sass ఫైల్ ప్రదర్శించబడింది. (ఈ ఫైలు ప్రత్యక్షంగా "colors.css" ని మార్పడించదు):

ఉదాహరణ

"_colors.scss":

$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;

ఇప్పుడు మీరు ఈ పార్టియల్ ఫైల్ను ఇమ్పోర్ట్ చేస్తే ఉపలిఖించబడిన క్రియాశీల వినియోగం మినహా లేదు. Sass యొక్క అర్థం ఫైల్ "_colors.scss" ను ఇమ్పోర్ట్ చేయాలని అనుకుంటుంది:

ఉదాహరణ

@import "colors";
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: $myBlue;
}