ఈ గైడ్ వేగవంతమైన Node.js SASS/SCSS ప్రాజెక్ట్‌ను సెటప్ చేయడానికి పూర్తి విధానాన్ని వివరిస్తుంది.
ఫాస్ట్ Node.js Sass/SCSS ప్రాజెక్ట్‌ను ఎలా సెటప్ చేయాలి?
ఎంచుకున్న మూలకంపై స్టైలింగ్ చేయడానికి SASS స్వచ్ఛమైన CSS లక్షణాలను ఉపయోగిస్తుంది. ఇది గణితం మరియు వేరియబుల్ ఫీచర్‌లను చేర్చడం ద్వారా అసలు CSSని శక్తివంతం చేస్తుంది. ఇది సోపానక్రమంలో DOMపై స్టైలింగ్‌ని వర్తింపజేస్తుంది. Node.jsతో SASSని సమగ్రపరచడం ద్వారా, డెవలపర్ ప్రాజెక్ట్‌ను మరింత ఆకర్షణీయంగా మరియు పిక్సెల్-పర్ఫెక్ట్‌గా చేయడానికి చాలా సులభంగా స్టైల్ చేయవచ్చు.
SASS/SCSSతో పాటు Node.js ప్రాజెక్ట్‌ను సెటప్ చేయడానికి క్రింది దశలను అనుసరించండి.
దశ 1: 'SASS'ని ఇన్‌స్టాల్ చేస్తోంది
మొదట, ఇన్‌స్టాల్ చేయండి' సాస్ నోడ్ ప్యాకేజీ మేనేజర్‌ని ఉపయోగించి Node.js ప్రాజెక్ట్‌లో ప్రపంచవ్యాప్తంగా ' npm ”ఈ ఆదేశం ద్వారా:
npm ఇన్‌స్టాల్ -g సాస్
అవుట్పుట్ చూపిస్తుంది ' సాస్ ” ప్యాకేజీ ఇన్‌స్టాల్ చేయబడింది:
దశ 2: డైరెక్టరీలను తయారు చేయడం
తరువాత, కింది “mkdir” ఆదేశాన్ని ఉపయోగించి CSS మరియు SCSS ఫైల్‌ల కోసం ప్రత్యేక డైరెక్టరీలను సృష్టించండి:
mkdir cssFiles
mkdir scssFiles
పైన పేర్కొన్న వాటిని చూడవచ్చు ' mkdir 'ఆదేశం' సృష్టించింది css ఫైల్స్ 'మరియు' scss ఫైల్స్ 'డైరెక్టరీలు:
దశ 3: SASS మాడ్యూల్‌ను లింక్ చేయండి
ఇప్పుడు, 'ని ఉపయోగించండి సాస్ 'మాడ్యూల్' యొక్క నివాస ఫైళ్ళలో ఏవైనా మార్పుల కోసం చూడడానికి scss ఫైల్స్ ” డైరెక్టరీ. సవరణ విషయంలో, ఇది లింక్ చేయబడిన “ లోపల CSS ఫైల్‌లను స్వయంచాలకంగా సృష్టిస్తుంది css ఫైల్స్ ” డైరెక్టరీ మరియు అదే scss డేటాను CSS ఫైల్‌లో చొప్పించండి.
చూడటం మరియు లింక్ చేయడం కోసం అమలు చేయవలసిన ఆదేశం ' సాస్ 'మాడ్యూల్ క్రింది విధంగా ఉంది:
సాస్ --చూడండి scss ఫైల్స్ : css ఫైల్స్ఇప్పుడు, saas scssFiles డైరెక్టరీలో అన్ని రకాల సవరణల కోసం చూస్తోంది.
గమనిక: విజువల్ స్టూడియో కోడ్ వంటి టూల్స్ టెర్మినల్స్‌లో ఇది పని చేయదు కాబట్టి పై కమాండ్ సిస్టమ్ కమాండ్ ప్రాంప్ట్‌లో అమలు చేయబడాలి.
దశ 4: SCSS మరియు సంబంధిత CSS ఫైల్‌ల సృష్టి
ఈ దశలో, '' అనే ఖాళీ ఫైల్ scssStyle 'తో' scss 'పొడిగింపు' లోపల సృష్టించబడుతుంది scss ఫైల్స్ ”డైరెక్టరీ:
ఆ తర్వాత, ' పేరుతో రెండు ఫైళ్లు scssStyle.css 'మరియు' scssStyle.css.map '' ద్వారా స్వయంచాలకంగా సృష్టించబడుతుంది సాస్ 'మాడ్యూల్ లోపల' css ఫైల్స్ ” డైరెక్టరీ, క్రింద చూపిన విధంగా:
దశ 5: కోడ్‌ని చొప్పించడం
చివరగా, ' లోపల కొన్ని SCSS కోడ్‌ని నమోదు చేయండి scssStyle.scss ' క్రింద చూపిన విధంగా:
ఇప్పుడు, CSS ఫార్మాట్‌లోని అదే కోడ్ స్వయంచాలకంగా “” లోపల చొప్పించబడుతుంది. scssStyle.css ” ఫైల్:
gif సహాయంతో 4 మరియు 5 దశలను దృశ్యమానంగా వివరిస్తాము:
ఈ గైడ్ Node.js SASS\SCSS ప్రాజెక్ట్‌ని సృష్టించే దశలను వివరించింది.
ముగింపు
వేగవంతమైన Node.js SASS/SCSS ప్రాజెక్ట్‌ను సెటప్ చేయడానికి, ముందుగా మాడ్యూల్‌ను ఇన్‌స్టాల్ చేయండి ' సాస్ ” మాడ్యూల్, ఆపై “ కోసం రెండు డైరెక్టరీలను సృష్టించండి SASS\SCSS 'ఫైల్ మరియు మరొకటి' కోసం CSS ' ఫైళ్లు. ఆ తర్వాత, ' సాస్ '' ద్వారా కొత్తగా సృష్టించబడిన డైరెక్టరీలలో ఏదైనా మార్పును చూడటానికి మాడ్యూల్ sass –watch sass:css ” ఆదేశం. ఈ చర్య ఫలితంగా “SASS\SCSS” ఫైల్ మరియు రెండు “CSS” ఫైల్‌లు “CSS” ఫోల్డర్‌లో స్వయంచాలకంగా రూపొందించబడతాయి. వినియోగదారు “SASS\SCSS” ఫైల్‌లను సవరించినట్లయితే, కొత్త మార్పులు స్వయంచాలకంగా CSS ఫైల్‌లలో చొప్పించబడతాయి. ఈ గైడ్ Node.js SASS\SCSS ప్రాజెక్ట్‌ని సెటప్ చేయడానికి పూర్తి విధానాన్ని వివరించింది.