ನಮಸ್ಕಾರ ಸ್ನೇಹಿತರೇ!

ಈ ವಿವರವಾದ ಮಾರ್ಗದರ್ಶಿಪ್ರಿಪ್ರೊಸೆಸರ್ ಮೂಲಕ ಸಾಸ್ಆರಂಭಿಕರಿಗಾಗಿ. ಇಲ್ಲಿ ನಾವು ಸಾಸ್ ಪ್ರಿಪ್ರೊಸೆಸರ್, ಅದರ ಅನುಕೂಲಗಳು, ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ಪರಿಚಯಿಸುತ್ತೇವೆ ಮತ್ತು ಉದಾಹರಣೆಗಳೊಂದಿಗೆ ಅದರ ಬಳಕೆಯನ್ನು ಪರಿಗಣಿಸುತ್ತೇವೆ.

ಕೂಲ್

ಜೊತೆಗೆ

ತೊದಲುವಿಕೆ

ಸಂಚಿಕೆ ಪ್ರಾಯೋಜಕರು - ಹೋಸ್ಟಿಂಗ್ ಪಾಲುದಾರ: partnerwp.ru

ನೀವು GitHub ನಿಂದ ಈ ಟ್ಯುಟೋರಿಯಲ್‌ಗಾಗಿ ಎಲ್ಲಾ Sass/CSS ಉದಾಹರಣೆಗಳು ಮತ್ತು ಕಸ್ಟಮೈಸ್ ಮಾಡಿದ Gulp ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಬಹುದು.

ಸಾಸ್ಅತ್ಯಂತ ಅಭಿವೃದ್ಧಿ ಹೊಂದಿದ ಮತ್ತು ಸ್ಥಿರವಾದ CSS ಪ್ರಿಪ್ರೊಸೆಸರ್‌ಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ, ಜೊತೆಗೆ ವೃತ್ತಿಪರರಲ್ಲಿ ಅತ್ಯಂತ ಜನಪ್ರಿಯ ಪ್ರಿಪ್ರೊಸೆಸರ್‌ಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ.

ಸಾಸ್ನ ಪ್ರಯೋಜನಗಳು

• ಹೊಂದಬಲ್ಲ ವಿವಿಧ ಆವೃತ್ತಿಗಳುಸಿಎಸ್ಎಸ್, ನಿಮ್ಮ ಯೋಜನೆಯಲ್ಲಿ ನೀವು ಯಾವುದೇ ಸಿಎಸ್ಎಸ್ ಲೈಬ್ರರಿಗಳನ್ನು ಬಳಸಬಹುದಾದ ಧನ್ಯವಾದಗಳು;
• ಯಾವುದೇ ಸಂದರ್ಭಕ್ಕೂ ಹೆಚ್ಚಿನ ಸಂಖ್ಯೆಯ ವಿವಿಧ ಕಾರ್ಯಗಳು. ಕೆಲವು CSS ಪ್ರಿಪ್ರೊಸೆಸರ್‌ಗಳು ಅಂತಹ ಶ್ರೀಮಂತ ಕಾರ್ಯವನ್ನು ಹೆಮ್ಮೆಪಡಬಹುದು;
• ಸಾಸ್ ಅತ್ಯಂತ ಹಳೆಯ CSS ಪ್ರಿಪ್ರೊಸೆಸರ್‌ಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ, ಅದರ ಅಸ್ತಿತ್ವದ ಹಲವು ವರ್ಷಗಳಲ್ಲಿ ಸಾಕಷ್ಟು ಅನುಭವವನ್ನು ಹೀರಿಕೊಳ್ಳುತ್ತದೆ;
• ಡೆವಲಪರ್‌ಗೆ ಜೀವನವನ್ನು ಸುಲಭಗೊಳಿಸುವ ಸಾಸ್ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳನ್ನು ಬಳಸಲು ಉತ್ತಮ ಅವಕಾಶ. ಅಂತಹ ಒಂದು ಚೌಕಟ್ಟು ಬೌರ್ಬನ್ ಆಗಿದೆ, ಇದನ್ನು ನಾವು ಜೇಡಿಯ ಕೆಲವು ಆವೃತ್ತಿಗಳಲ್ಲಿ ಸಾಸ್ ಬರೆಯುವಾಗ ಬಳಸುತ್ತೇವೆ;
• ಸಿಂಟ್ಯಾಕ್ಸ್. ನಿಮಗೆ ಹತ್ತಿರವಿರುವ ಎರಡು ಸಿಂಟ್ಯಾಕ್ಸ್‌ಗಳಲ್ಲಿ ಒಂದನ್ನು ನೀವು ಆಯ್ಕೆ ಮಾಡಬಹುದು - ಸರಳೀಕೃತ (SASS) ಮತ್ತು ವಿಸ್ತರಿತ CSS ತರಹದ (SCSS).

ನಾನು ಮೊದಲು CSS ಪ್ರಿಪ್ರೊಸೆಸರ್‌ಗಳೊಂದಿಗೆ ಪರಿಚಯವಾದಾಗ, ಇತರ ಅನನುಭವಿ ವೆಬ್ ಡೆವಲಪರ್‌ಗಳಂತೆ ನಾನು CSS ಪ್ರಿಪ್ರೊಸೆಸರ್‌ಗಳನ್ನು ಬಳಸುವ ಕಲ್ಪನೆಯನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲಿಲ್ಲ. ಹೆಚ್ಚುವರಿ ಪದರವನ್ನು ಏಕೆ ಮಾಡಿ, ಕೆಲವು ಸಾಧನಗಳನ್ನು ಬಳಸಿ, CSS ಅನ್ನು ಸಂಕೀರ್ಣಗೊಳಿಸಿ, ನಾನು ಯೋಚಿಸಿದೆ. ಆದರೆ ಕಾಲಾನಂತರದಲ್ಲಿ, ಸಿಎಸ್ಎಸ್ ಬರೆಯುವುದು ಚಿತ್ರಹಿಂಸೆಯಾಯಿತು, ಅನೇಕ ಕ್ರಿಯೆಗಳನ್ನು ಪುನರಾವರ್ತಿಸಬೇಕು, ಆಯ್ಕೆದಾರರು, ಗುಣಲಕ್ಷಣಗಳು ಮತ್ತು ಅಪೇಕ್ಷಿತ ಫಲಿತಾಂಶವನ್ನು ಸಾಧಿಸಲು ಸಿಎಸ್ಎಸ್ ಕೋಡ್ನ ಸಂಪೂರ್ಣ ಬ್ಲಾಕ್ಗಳನ್ನು ಸಹ ನಕಲಿಸಬೇಕು ಎಂದು ನಾನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಪ್ರಾರಂಭಿಸಿದೆ. ಇಂದು, ಉದಾಹರಣೆಗಳನ್ನು ಬಳಸಿಕೊಂಡು, ಸಾಸ್ ಪ್ರಿಪ್ರೊಸೆಸರ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ನಿಮ್ಮ ಕೆಲಸವನ್ನು ನೀವು ಹೇಗೆ ಸರಳಗೊಳಿಸಬಹುದು, ನಿಮ್ಮ ಅಭಿವೃದ್ಧಿಯನ್ನು ವೈವಿಧ್ಯಗೊಳಿಸಬಹುದು ಮತ್ತು ಕೆಲವು ಹೆಚ್ಚು ಅಥವಾ ಕಡಿಮೆ ಸಂಕೀರ್ಣ ಕಾರ್ಯಗಳನ್ನು ಬರೆಯಲು ಸ್ವಲ್ಪ ಮೋಜು ಮಾಡಬಹುದು ಎಂಬುದನ್ನು ನಾನು ನಿಮಗೆ ತೋರಿಸುತ್ತೇನೆ.

ಪರಿಸರವನ್ನು ಹೊಂದಿಸುವುದು

ಈ ಪಾಠದಲ್ಲಿ ಸಾಸ್‌ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಲು ಪರಿಸರವಾಗಿ, ನಮ್ಮ ಇತರ ಪಾಠಗಳಲ್ಲಿರುವಂತೆ, ನಾವು ಗಲ್ಪ್ ಕಾರ್ಯ ನಿರ್ವಾಹಕಕ್ಕಾಗಿ ಸಾಸ್ ಆವೃತ್ತಿಯನ್ನು ಬಳಸುತ್ತೇವೆ ( ಗಲ್ಪ್-ಸಾಸ್) ಮೂಲ ರೂಬಿ ಆವೃತ್ತಿಯನ್ನು ಬಳಸಲು ಅಥವಾ ವಿಶೇಷ ಸಾಫ್ಟ್‌ವೇರ್ ಬಳಸಿ ಸಾಸ್ ಅನ್ನು ಕಂಪೈಲ್ ಮಾಡಲು, ನೀವು ಕಛೇರಿಯಲ್ಲಿ ಸೂಚನೆಗಳನ್ನು ಓದಬಹುದು. ವೆಬ್‌ಸೈಟ್. ಈ ಪಾಠಪ್ರಾಥಮಿಕವಾಗಿ ಪ್ರಾಯೋಗಿಕ ಸ್ವಭಾವವನ್ನು ಹೊಂದಿದೆ, ಆದ್ದರಿಂದ ನಾವು ಪ್ರಾಜೆಕ್ಟ್‌ಗೆ ಸಂಪರ್ಕಿಸಲು ಸಾಧ್ಯವಿರುವ ಆಯ್ಕೆಗಳ ಮೇಲೆ ವಾಸಿಸುವುದಿಲ್ಲ, ಗಲ್ಪ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ನಾವು ಸಾಸ್ ಅನ್ನು ಅತ್ಯಂತ ಜನಪ್ರಿಯ ರೀತಿಯಲ್ಲಿ ಸಂಪರ್ಕಿಸುತ್ತೇವೆ.

ನೀವು ಸ್ಥಾಪಿಸಿದ್ದೀರಿ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ ಇತ್ತೀಚಿನ ಆವೃತ್ತಿ Node.js ಮತ್ತು ಗಲ್ಪ್. Node.js ಅನ್ನು ಸ್ಥಾಪಿಸದಿದ್ದರೆ, ಅದನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ ಮತ್ತು ಅದನ್ನು ಸ್ಥಾಪಿಸಿ. Node.js ಅನ್ನು ಸ್ಥಾಪಿಸಿದ ನಂತರ, ಆಜ್ಞೆಯೊಂದಿಗೆ ಗಲ್ಪ್ ಅನ್ನು ಸ್ಥಾಪಿಸಿ "npm i-g ಗಲ್ಪ್"(ವಿಂಡೋಸ್) ಅಥವಾ "sudo npm i-g gulp"(ಲಿನಕ್ಸ್, OS X). ಓದಿ: .

Npm i --ಸೇವ್-ದೇವ್ ಗಲ್ಪ್ ಗಲ್ಪ್-ಸಾಸ್

ವರ್ ಗಲ್ಪ್ = ಅವಶ್ಯಕತೆ ("ಗಲ್ಪ್"), // ಕನೆಕ್ಟ್ ಗಲ್ಪ್ ಸಾಸ್ = ಅವಶ್ಯಕತೆ ("ಗಲ್ಪ್-ಸಾಸ್"); // Sass ಪ್ಯಾಕೇಜ್ ಅನ್ನು ಸಂಪರ್ಕಿಸಿ gulp.task("sass", function() ( // "sass" ರಿಟರ್ನ್ gulp.src (["sass/**/*.sass", "sass/**/* ಕಾರ್ಯವನ್ನು ರಚಿಸಿ .scss "]) // ಮೂಲವನ್ನು ತೆಗೆದುಕೊಳ್ಳಿ dest("css")) // ಫಲಿತಾಂಶವನ್ನು css ಫೋಲ್ಡರ್‌ಗೆ ಅಪ್‌ಲೋಡ್ ಮಾಡಿ)); gulp.task("ವಾಚ್", ಫಂಕ್ಷನ್() ( gulp.watch(["sass/**/*.sass", "sass/**/*.scss"], ["sass"]); // ವೀಕ್ಷಿಸಿ ಸಾಸ್ ಫೋಲ್ಡರ್ನಲ್ಲಿ ಸಾಸ್ ಫೈಲ್ಗಳ ಹಿಂದೆ)); gulp.task("ಡೀಫಾಲ್ಟ್", ["ವಾಚ್"]);

6 ನೇ ಸಾಲಿಗೆ ಗಮನ ಕೊಡಿ - ಇಲ್ಲಿ ನಾವು ಫಲಿತಾಂಶದ ಫೈಲ್‌ಗೆ ಔಟ್‌ಪುಟ್ ಶೈಲಿಗಳಲ್ಲಿ ಒಂದನ್ನು ಬಳಸುತ್ತೇವೆ: ಗೂಡುಕಟ್ಟಿದೆ- ನೆಸ್ಟೆಡ್, ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ; ವಿಸ್ತರಿಸಿದೆ- ವಿಸ್ತರಿಸಿದ; ಕಾಂಪ್ಯಾಕ್ಟ್- ಕಾಂಪ್ಯಾಕ್ಟ್, ಸೆಲೆಕ್ಟರ್ ಮತ್ತು ಅದರ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಸುರುಳಿಯಾಕಾರದ ಕಟ್ಟುಪಟ್ಟಿಗಳಲ್ಲಿ ಒಂದು ಸಾಲಿನಲ್ಲಿ ಪ್ರದರ್ಶಿಸಿದಾಗ; ಸಂಕುಚಿತಗೊಳಿಸಲಾಗಿದೆ- ಸಂಕುಚಿತ. ಜೊತೆಗೆ, ಪ್ರಕ್ರಿಯೆಗೆ ಧನ್ಯವಾದಗಳು .on("ದೋಷ", sass.logError)ದೋಷ ಸಂಭವಿಸಿದಲ್ಲಿ, ನಾವು Gulpfile ಎಕ್ಸಿಕ್ಯೂಶನ್ ಆಜ್ಞೆಯನ್ನು ಮರುಲೋಡ್ ಮಾಡಬೇಕಾಗಿಲ್ಲ ಮತ್ತು ನಾವು Sass ಫೈಲ್‌ನ ಯಾವ ಸಾಲಿನಲ್ಲಿ ದೋಷವನ್ನು ಹೊಂದಿದ್ದೇವೆ ಎಂಬುದನ್ನು ನಾವು ನೋಡುತ್ತೇವೆ. ಉದಾಹರಣೆಗಳಲ್ಲಿ ನಾನು ಔಟ್ಪುಟ್ ಶೈಲಿಯನ್ನು ಬಳಸುತ್ತೇನೆ ವಿಸ್ತರಿಸಿದೆಸ್ಪಷ್ಟತೆಗಾಗಿ.

ನೀವು ಹೊಂದಿರಬೇಕು ಕೆಳಗಿನ ರಚನೆನಿಮ್ಮಲ್ಲಿ ಯೋಜನೆ ಕಡತ ವ್ಯವಸ್ಥೆ:

• ನನ್ನ ಯೋಜನೆ/
  • css/
    • common.css
  • ಸಾಸ್/
    • ಸಾಮಾನ್ಯ.ಸಾಸ್
  • ನೋಡ್_ಮಾಡ್ಯೂಲ್‌ಗಳು/
  • gulpfile.js
  • pack.json

ನಾವು ಆಜ್ಞೆಯೊಂದಿಗೆ ಗಲ್ಪ್‌ಫೈಲ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಪ್ರಾರಂಭಿಸುತ್ತೇವೆ ಗುಟುಕುಯೋಜನೆಯ ಫೋಲ್ಡರ್ ಟರ್ಮಿನಲ್ನಲ್ಲಿ.

ಇಲ್ಲಿ ನಾವು ಡೈರೆಕ್ಟರಿಯಿಂದ ಎಲ್ಲಾ ಸಾಸ್ ಫೈಲ್ಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತೇವೆ ಸಾಸ್/ನಿಮ್ಮ ಯೋಜನೆ ಮತ್ತು ಸಿದ್ಧಪಡಿಸಿದ CSS ಫಲಿತಾಂಶವನ್ನು ಫೋಲ್ಡರ್‌ಗೆ ಅಪ್‌ಲೋಡ್ ಮಾಡಿ css/. ಹೆಚ್ಚುವರಿಯಾಗಿ, ಇಲ್ಲಿ ನಾವು ಒಂದು ವೀಕ್ಷಣೆಯನ್ನು ಸ್ಥಾಪಿಸುತ್ತೇವೆ ವೀಕ್ಷಿಸಲುಸಾಸ್ ಫೈಲ್‌ಗಳಲ್ಲಿನ ಬದಲಾವಣೆಗಳಿಗೆ ಮತ್ತು CSS ಗೆ ಸ್ವಯಂಚಾಲಿತ ಸಂಕಲನ, ಅಂತಹ ಬದಲಾವಣೆಗಳು ಸಂಭವಿಸಿದಲ್ಲಿ. ಪರಿಣಾಮವಾಗಿ css ಫೈಲ್ ಅನ್ನು ಲೇಔಟ್‌ನಲ್ಲಿ ಸೇರಿಸಲಾಗಿದೆ.

ಗಲ್ಪ್ ಪ್ಯಾಕೇಜ್‌ಗಳನ್ನು ಹೊಂದಿಸುವುದರ ಕುರಿತು ನಿಮಗೆ ಏನಾದರೂ ಅರ್ಥವಾಗದಿದ್ದರೆ ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಗಲ್ಪ್ ಕೈಪಿಡಿಯನ್ನು ಓದಿ.

ನಮ್ಮ ಪರಿಸರವನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಿದ ನಂತರ ಮತ್ತು ಡೈರೆಕ್ಟರಿಯಲ್ಲಿ *.sass ಫೈಲ್‌ಗಳನ್ನು ಉಳಿಸುವಾಗ ಸಾಸ್ ಅನ್ನು ಯಶಸ್ವಿಯಾಗಿ CSS ಗೆ ಪರಿವರ್ತಿಸಲಾಗುತ್ತದೆ ಸಾಸ್/, ನೀವು ಸುರಕ್ಷಿತವಾಗಿ ಕಲಿಕೆಯನ್ನು ಮುಂದುವರಿಸಬಹುದು ಮತ್ತು ಆಚರಣೆಯಲ್ಲಿ ನಾವು ಇಂದು ವಿಶ್ಲೇಷಿಸುವ ಉದಾಹರಣೆಗಳನ್ನು ಕೈಗೊಳ್ಳಬಹುದು.

ಸಾಸ್ ಸಿಂಟ್ಯಾಕ್ಸ್

ಸಾಸ್ ಬರೆಯಲು 2 ರೂಪಾಂತರಗಳಿವೆ, 2 ಸಿಂಟ್ಯಾಕ್ಸ್: SASS ಮತ್ತು SCSS. ಹೆಚ್ಚಿನವು ಹಳೆಯ ಆವೃತ್ತಿಸಾಸ್ ಬರವಣಿಗೆ ಆಗಿದೆ ಇಂಡೆಂಟೇಶನ್ ಸಿಂಟ್ಯಾಕ್ಸ್. ಇದು ನಮ್ಮ ಪಾಠದಲ್ಲಿ ನಾವು ಬಳಸುವ ಕಾಗುಣಿತವಾಗಿದೆ. ಈ ಸಿಂಟ್ಯಾಕ್ಸ್‌ಗಾಗಿ ಫೈಲ್ ವಿಸ್ತರಣೆಯಾಗಿದೆ *.ಸಾಸ್. ಎರಡನೆಯ ಆಯ್ಕೆ ಸಿಂಟ್ಯಾಕ್ಸ್, ವಿಸ್ತರಿಸುತ್ತಿದೆ CSS ಸಿಂಟ್ಯಾಕ್ಸ್ , ಸ್ಯಾಸಿ ಸಿಎಸ್ಎಸ್. SCSS ಅನ್ನು ಸಾಮಾನ್ಯ CSS ನಂತೆ ಬರೆಯಲಾಗಿದೆ, ಆದರೆ Sass ನ ಹೆಚ್ಚುವರಿ ವೈಶಿಷ್ಟ್ಯಗಳೊಂದಿಗೆ ವರ್ಧಿಸಲಾಗಿದೆ. SCSS ಸಿಂಟ್ಯಾಕ್ಸ್‌ನೊಂದಿಗೆ ಫೈಲ್ ವಿಸ್ತರಣೆ - *.scss.

ಬಹಳ ಮುಖ್ಯ! ಇಂಡೆಂಟೇಶನ್ ಸಿಂಟ್ಯಾಕ್ಸ್‌ಗೆ ನೆಸ್ಟೆಡ್ ಗುಣಲಕ್ಷಣಗಳ ಇಂಡೆಂಟೇಶನ್‌ಗೆ ಕಟ್ಟುನಿಟ್ಟಾದ ಅನುಸರಣೆ ಅಗತ್ಯವಿರುತ್ತದೆ ಮತ್ತು ಗಲ್ಪ್ ಅನ್ನು ಚಲಾಯಿಸುವಾಗ ನೀವು ದೋಷಗಳನ್ನು ಅನುಭವಿಸಿದರೆ ಅಥವಾ ಕನ್ಸೋಲ್‌ನಲ್ಲಿ ರೇಖೆಯನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸದೆ ಸೂಚ್ಯ ದೋಷಗಳನ್ನು ಅನುಭವಿಸಿದರೆ, ದೋಷವು ತಪ್ಪಾದ ಇಂಡೆಂಟೇಶನ್‌ಗಳಲ್ಲಿರುತ್ತದೆ. ಮತ್ತೊಂದು ಪ್ರಮುಖ ವಿವರ - ನೀವು ಟ್ಯಾಬ್‌ಗಳನ್ನು ಇಂಡೆಂಟ್‌ಗಳಾಗಿ ಬಳಸಿದರೆ, ನೀವು ಸಾಸ್ ಅನ್ನು ಪರಿವರ್ತಿಸಲು ಪ್ರಯತ್ನಿಸಿದಾಗ ಕಂಪೈಲರ್ ದೋಷವನ್ನು ಎಸೆಯುತ್ತದೆ, ಇದು ಟ್ಯಾಬ್‌ಗಳ ಜೊತೆಗೆ, ಜಾಗಗಳನ್ನು ಇಂಡೆಂಟ್‌ಗಳಾಗಿ ಬಳಸುತ್ತದೆ. ಒಂದೋ ನೀವು ಟ್ಯಾಬ್‌ಗಳನ್ನು ಮಾತ್ರ ಬಳಸುತ್ತೀರಿ ಅಥವಾ ಸ್ಪೇಸ್‌ಗಳನ್ನು ಮಾತ್ರ ಬಳಸುತ್ತೀರಿ.

SASS ಮತ್ತು SCSS ಸಿಂಟ್ಯಾಕ್ಸ್:

SASS - ಇಂಡೆಂಟೇಶನ್ ಸಿಂಟ್ಯಾಕ್ಸ್	SCSS - ವಿಸ್ತರಣೆ ಸಿಂಟ್ಯಾಕ್ಸ್
$font-stack: Helvetica, sans-serif $primary-color: #333 ದೇಹದ ಫಾಂಟ್: 100% $font-stack ಬಣ್ಣ: $primary-color	$ಫಾಂಟ್-ಸ್ಟಾಕ್: ಹೆಲ್ವೆಟಿಕಾ, ಸಾನ್ಸ್-ಸೆರಿಫ್; $ಪ್ರಾಥಮಿಕ-ಬಣ್ಣ: #333; ದೇಹ (ಫಾಂಟ್: 100% $ಫಾಂಟ್-ಸ್ಟಾಕ್; ಬಣ್ಣ: $ಪ್ರೈಮರಿ-ಬಣ್ಣ; )

ಮೂಲ ಬರವಣಿಗೆಯ ನಿಯಮಗಳ ಜೊತೆಗೆ (ಕರ್ಲಿ ಬ್ರೇಸ್‌ಗಳು, ಸಾಲುಗಳ ಕೊನೆಯಲ್ಲಿ ಅರ್ಧವಿರಾಮ ಚಿಹ್ನೆಗಳು), SASS ಮತ್ತು SCSS ಸಹ ಕೆಲವು ಕಾರ್ಯಗಳ ಬರವಣಿಗೆಯಲ್ಲಿ ಭಿನ್ನವಾಗಿರುತ್ತವೆ. ಆದ್ದರಿಂದ ಇಂಟರ್ನೆಟ್‌ನಿಂದ ಯಾವುದೇ ಉದಾಹರಣೆಗಳನ್ನು ಬಳಸುವಾಗ ಜಾಗರೂಕರಾಗಿರಿ, ಯಾವ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ಬಳಸಲಾಗಿದೆ ಎಂಬುದನ್ನು ನಿಖರವಾಗಿ ಪರಿಶೀಲಿಸಿ. ಇಂಟರ್ನೆಟ್‌ನಿಂದ ಸಾಕಷ್ಟು ದೊಡ್ಡ ಉದಾಹರಣೆಯನ್ನು SCSS ಶೈಲಿಯಲ್ಲಿ ಮಾಡಿದ್ದರೆ ಮತ್ತು ನಿಮ್ಮ ಯೋಜನೆಯನ್ನು SASS ನಲ್ಲಿ ಬರೆಯಲಾಗಿದ್ದರೆ, ನಿರ್ದೇಶನವನ್ನು ಬಳಸಿಕೊಂಡು ಸಿಂಟ್ಯಾಕ್ಸ್ ಮತ್ತು ಫೈಲ್ ವಿಸ್ತರಣೆಯನ್ನು ಬದಲಾಯಿಸದೆಯೇ ನೀವು ಅದನ್ನು ನಿಮ್ಮ ಮುಖ್ಯ ಫೈಲ್‌ಗೆ ಆಮದು ಮಾಡಿಕೊಳ್ಳಬಹುದು. @ಆಮದು, ಉದಾಹರಣೆಗೆ, ನೀವು ಫೈಲ್ ಅನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಿದರೆ carousel.scss, ನಂತರ ನೀವು ಅದನ್ನು ನಿಮ್ಮೊಂದಿಗೆ ಸಂಪರ್ಕಿಸಬಹುದು ಮುಖ್ಯ.ಸಾಸ್ಸಾಲು @ಆಮದು "ಏರಿಳಿಕೆ". * ಗಿಥಬ್‌ನಿಂದ ನಮ್ಮ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು ಎಲ್ಲವನ್ನೂ ಆಮದು ಮಾಡಿಕೊಳ್ಳುತ್ತೇವೆ _x.x.sassಫೈಲ್‌ಗಳು ಒಂದಾಗಿ ಸಾಮಾನ್ಯ.ಸಾಸ್, x.x ಎಂಬುದು ಈ ಲೇಖನದ ಉದಾಹರಣೆಯ ಶೀರ್ಷಿಕೆ ಸಂಖ್ಯೆ.

ನಾವು ಇಂಡೆಂಟೇಶನ್ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ಬಳಸುತ್ತೇವೆ.

1. ಸಾಸ್‌ನೊಂದಿಗೆ CSS ಅನ್ನು ವಿಸ್ತರಿಸುವುದು

1.1 ಹೂಡಿಕೆ ನಿಯಮಗಳು

ಸಾಸ್ ಡೆವಲಪರ್‌ಗಳಿಗೆ CSS ನಿಯಮಗಳನ್ನು ಇತರರೊಳಗೆ ಗೂಡುಕಟ್ಟಲು ಉತ್ತಮ ಅವಕಾಶವನ್ನು ನೀಡುತ್ತದೆ, ಇದರಿಂದಾಗಿ ದೀರ್ಘ ಆಯ್ಕೆಗಳನ್ನು ಬರೆಯುವ/ನಕಲು ಮಾಡುವ ಸಮಯವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ ಮತ್ತು ಸ್ಪಷ್ಟ ಶ್ರೇಣಿಯೊಂದಿಗೆ ಕೋಡ್ ಅನ್ನು ಹೆಚ್ಚು ರಚನಾತ್ಮಕವಾಗಿ ಮಾಡುತ್ತದೆ.

1.2 ಪೋಷಕ ಆಯ್ಕೆಗಾರನಿಗೆ ಬಂಧಿಸುವುದು

ಹೊಸ ನಿಯಮವನ್ನು ರಚಿಸದೆಯೇ ನೀವು ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ವಿಸ್ತರಿಸಲು ಬಯಸಿದರೆ, ನೀವು ಚಿಹ್ನೆಯನ್ನು ಬಳಸಿಕೊಂಡು ಪೂರ್ಣಗೊಳಿಸಿದ ಸೆಲೆಕ್ಟರ್‌ಗೆ ಹೆಚ್ಚುವರಿ ಆಯ್ಕೆಗಳನ್ನು ಬಂಧಿಸಬಹುದು & . ಹೊರನೋಟಕ್ಕೆ ಅದು ಜೀವಿಯಂತೆ ಕಾಣುತ್ತದೆ ಮಕ್ಕಳ ಆಯ್ಕೆಗಾರಕ್ರಮಾನುಗತದಲ್ಲಿ, ಆದರೆ ಬಳಸುವುದು & , ನಾವು ಮಗುವನ್ನು ರಚಿಸುವ ಬದಲು ಪೋಷಕ ಆಯ್ಕೆಯನ್ನು ವಿಸ್ತರಿಸುತ್ತಿದ್ದೇವೆ.

ನಿಯಮಕ್ಕೆ ಗಮನ ಕೊಡಿ body.firefox &, ಇದು ಕೊನೆಯಲ್ಲಿ ಹೊಂದಿಸಿದರೆ ಪ್ರಸ್ತುತ ಒಂದಕ್ಕಿಂತ ಮೊದಲು ಯಾವುದೇ ಅಂಶದಿಂದ ಹೊಸ ಸರಪಳಿಯನ್ನು ಪಡೆಯಲು ನಮಗೆ ಅನುಮತಿಸುತ್ತದೆ & .

ಹೆಚ್ಚುವರಿಯಾಗಿ, ಸಂಯುಕ್ತ ಆಯ್ಕೆಗಳನ್ನು ರಚಿಸಲು ಪೋಷಕ ಬೈಂಡಿಂಗ್ ಅನ್ನು ಬಳಸಬಹುದು:

1.3 ನೆಸ್ಟೆಡ್ ಗುಣಲಕ್ಷಣಗಳು

ಅನುಕೂಲಕ್ಕಾಗಿ, ನೀವು ಆಸ್ತಿ ನೇಮ್‌ಸ್ಪೇಸ್ ಪ್ರತ್ಯಯವನ್ನು ಲಗತ್ತುಗಳಾಗಿ ಮುರಿಯಬಹುದು. ಉದಾಹರಣೆಗೆ, ಅಂಚು- ಮೇಲ್ಭಾಗ, ಅಂಚು- ಕೆಳಗೆ ಅಂಚು-ಎಡ, ಅಂಚು- ಹಕ್ಕಿದೆ ಸಾಮಾನ್ಯ ನೆಲ ಅಂಚುಮತ್ತು ಕೆಳಗಿನಂತೆ ಲಗತ್ತುಗಳಾಗಿ ವಿಭಜಿಸಬಹುದು:

1.4 ವೈಲ್ಡ್‌ಕಾರ್ಡ್ ಸೆಲೆಕ್ಟರ್‌ಗಳು

ಪುಟದಲ್ಲಿನ ಹಲವಾರು ಅಂಶಗಳು ಒಂದೇ CSS ಬೇಸ್, ಒಂದೇ ರೀತಿಯ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಿದಾಗ ಕೆಲವೊಮ್ಮೆ ಪರಿಸ್ಥಿತಿ ಉದ್ಭವಿಸುತ್ತದೆ, ಅವುಗಳಿಗೆ ಮಾತ್ರ ನಿರ್ದಿಷ್ಟವಾಗಿರುತ್ತದೆ. ಈ ಮೂಲಭೂತ CSS ನಿಯಮಗಳನ್ನು ಸಾಸ್‌ನಲ್ಲಿ ಅನೇಕ ಸ್ಥಳಗಳಲ್ಲಿ ಬಳಸಲು ವೈಲ್ಡ್‌ಕಾರ್ಡ್ ಸೆಲೆಕ್ಟರ್‌ನಂತೆ ಪ್ಯಾಕ್ ಮಾಡಬಹುದು. ವೈಲ್ಡ್‌ಕಾರ್ಡ್ ಸೆಲೆಕ್ಟರ್‌ಗಳನ್ನು ಡೈರೆಕ್ಟಿವ್ ಬಳಸಿ ಊಹಿಸಲಾಗಿದೆ @ವಿಸ್ತರಿಸು.

2. ಸಾಸ್‌ಸ್ಕ್ರಿಪ್ಟ್

ಕಸ್ಟಮ್ ವೇರಿಯಬಲ್‌ಗಳು, ಅಂಕಗಣಿತ ಮತ್ತು ಇತರ ಕಾರ್ಯಗಳ ಬಳಕೆಯ ಮೂಲಕ ಸಾಸ್‌ನ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಗಮನಾರ್ಹವಾಗಿ ವಿಸ್ತರಿಸಲು SassScript ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಸಾಸ್‌ಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬಳಸಬಹುದು ಸ್ವಯಂಚಾಲಿತ ಉತ್ಪಾದನೆಹೊಸ ಆಯ್ಕೆದಾರರು ಮತ್ತು ಗುಣಲಕ್ಷಣಗಳು.

2.1 ಸಾಸ್‌ನಲ್ಲಿನ ಅಸ್ಥಿರ

ನಿಮ್ಮ ಸಾಸ್ ಫೈಲ್‌ನಲ್ಲಿ ಎಲ್ಲಿಯಾದರೂ ಬಳಸಬಹುದಾದ ಅಸ್ಥಿರಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಇದು ನಿಜವಾಗಿಯೂ ತಂಪಾದ ವೈಶಿಷ್ಟ್ಯವಾಗಿದೆ. ಬಣ್ಣಗಳು, ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯಗಳು, ಘಟಕಗಳು, ಇವೆಲ್ಲವನ್ನೂ ವೇರಿಯಬಲ್ ಆಗಿ ತೆಗೆದುಕೊಳ್ಳಬಹುದು ಮತ್ತು ಭವಿಷ್ಯದಲ್ಲಿ ಬಳಸಬಹುದು. ವೇರಿಯಬಲ್ ಅನ್ನು ಈ ರೀತಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆ: $ಹೆಸರು: ಮೌಲ್ಯ.

2.2 ಸಂಖ್ಯೆಗಳು ಮತ್ತು ತಂತಿಗಳೊಂದಿಗೆ ಕಾರ್ಯಾಚರಣೆಗಳು + ಇಂಟರ್ಪೋಲೇಷನ್

ಸಂಕಲನ (+), ವ್ಯವಕಲನ (-), ವಿಭಾಗ (/), ಮತ್ತು ಮಾಡ್ಯೂಲೋ (%) ನಂತಹ ಸಂಖ್ಯೆಗಳ ಮೇಲೆ ಪ್ರಮಾಣಿತ ಅಂಕಗಣಿತದ ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು ಬಳಸುವ ಸಾಮರ್ಥ್ಯವನ್ನು ಸಾಸ್ ನಿಮಗೆ ನೀಡುತ್ತದೆ. ಹೋಲಿಕೆ ನಿರ್ವಾಹಕರು (<, >, <=, >=, ==, !=) ಸಹ ಸಂಖ್ಯೆಗಳಿಗೆ ಬೆಂಬಲಿತವಾಗಿದೆ.

ಜೊತೆಗೆ, ಸಾಸ್ ತಂತಿಗಳನ್ನು ಜೋಡಿಸುವ (ಸಂಪರ್ಕ) ಸಾಮರ್ಥ್ಯವನ್ನು ಹೊಂದಿದೆ.

ನಾವು ಉದಾಹರಣೆಯಿಂದ ನೋಡಬಹುದು $ಒಟ್ಟು: 10 + 20/2, ಅಂಕಗಣಿತದ ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು ನಿರ್ವಹಿಸುವಲ್ಲಿ ಆದ್ಯತೆಯನ್ನು ಗಮನಿಸಲಾಗಿದೆ - ಮೊದಲ ವಿಭಾಗ, ನಂತರ ಸೇರ್ಪಡೆ. ಕಾರ್ಯಾಚರಣೆಗಳ ಕ್ರಮವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು, ನೀವು ಗಣಿತಶಾಸ್ತ್ರದಲ್ಲಿರುವಂತೆ ಆವರಣಗಳನ್ನು ಬಳಸಬಹುದು. ಸೇರಿಸುವಾಗ ದಯವಿಟ್ಟು ಗಮನಿಸಿ 12px + 8px, ನಾವು ಪಡೆಯುತ್ತೇವೆ 20px.

2 ಮತ್ತು 9 ಸಾಲುಗಳಿಗೆ ಸಹ ಗಮನ ಕೊಡಿ, ಇಲ್ಲಿ ನಾವು ಆಸ್ತಿಯ ಹೆಸರು, ಸೆಲೆಕ್ಟರ್ ಹೆಸರು ಅಥವಾ ಯಾವುದೇ ಸಾಲಿನಲ್ಲಿರುವ ಸ್ಥಳವನ್ನು ಒಳಗೊಂಡಂತೆ ಸಾಸ್ ಫೈಲ್‌ನಲ್ಲಿ ಎಲ್ಲಿಯಾದರೂ ಡೈನಾಮಿಕ್ ಮೌಲ್ಯಗಳನ್ನು ಇರಿಸಲು ಇಂಟರ್ಪೋಲೇಶನ್ ಅನ್ನು ಬಳಸುತ್ತೇವೆ.

ಇಂಟರ್ಪೋಲೇಷನ್- ಇದು ಇತರರನ್ನು ಬಳಸಿಕೊಂಡು ಹೊಸ ಮೌಲ್ಯವನ್ನು ಪಡೆಯುತ್ತಿದೆ.

ಸಾಸ್‌ನಲ್ಲಿನ ಇಂಟರ್‌ಪೋಲೇಶನ್‌ನ ಅತ್ಯಂತ ಸಾಮಾನ್ಯವಾದ ಬಳಕೆಯು ವೇರಿಯೇಬಲ್‌ಗೆ ಹೊಸ ಮೌಲ್ಯವನ್ನು ಪಡೆಯುವುದು, ಅದನ್ನು ಮತ್ತೊಂದು ವೇರಿಯಬಲ್‌ನ ಮೌಲ್ಯಕ್ಕೆ "ಸಂಯೋಜಿಸುವ" ಮೂಲಕ, ನಿರ್ಮಾಣದ ಮೂಲಕ #{} , ಉದಾಹರಣೆಗೆ:

ನೀವು PHP ಯಲ್ಲಿ ಮಾಡಬಹುದಾದಂತೆ, ಇಂಟರ್ಪೋಲೇಶನ್ ಅನ್ನು ಬಳಸದೆಯೇ ನೀವು ಸ್ಟ್ರಿಂಗ್ನಲ್ಲಿ ವೇರಿಯೇಬಲ್ ಅನ್ನು ಸೇರಿಸಲು ಸಾಧ್ಯವಿಲ್ಲ, ಉದಾಹರಣೆಗೆ, ಇನ್ ಎರಡು ಉಲ್ಲೇಖಗಳು. ಇಂಟರ್ಪೋಲೇಶನ್ ಅನ್ನು ಅಸ್ಥಿರಗಳಾಗಿ ಬಳಸಲು ಮರೆಯದಿರಿ.

2.3 ಹೂವುಗಳೊಂದಿಗೆ ಕಾರ್ಯಾಚರಣೆಗಳು

ಸಾಸ್‌ನಲ್ಲಿನ ಬಣ್ಣಗಳನ್ನು ಸೇರಿಸಬಹುದು, ಕಳೆಯಬಹುದು, ಭಾಗಿಸಬಹುದು ಮತ್ತು ಗುಣಿಸಬಹುದು. ಎಲ್ಲಾ ಅಂಕಗಣಿತದ ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು ಪ್ರತಿ ಬಣ್ಣಕ್ಕೆ ಪ್ರತ್ಯೇಕವಾಗಿ ನಡೆಸಲಾಗುತ್ತದೆ: ಕೆಂಪು, ಹಸಿರು ಮತ್ತು ನೀಲಿ.

rgba ಬಣ್ಣಗಳನ್ನು ಸೇರಿಸುವಾಗ, ಕೊನೆಯ 0.75 ಅಪಾರದರ್ಶಕತೆ ಪ್ಯಾರಾಮೀಟರ್ ಅಭಿವ್ಯಕ್ತಿಯಲ್ಲಿ ಇತರರಿಂದ ಭಿನ್ನವಾಗಿರಬಾರದು ಎಂಬುದನ್ನು ದಯವಿಟ್ಟು ಗಮನಿಸಿ, ಇಲ್ಲದಿದ್ದರೆ ಸೇರ್ಪಡೆ ವಿಫಲಗೊಳ್ಳುತ್ತದೆ. ಬದಲಿಗೆ, ನೀವು ಬಳಸಿಕೊಂಡು rgba ಆಲ್ಫಾ ಚಾನಲ್ ಅನ್ನು ಸರಿಹೊಂದಿಸಬಹುದು ಅಪಾರದರ್ಶಕಗೊಳಿಸುಮತ್ತು ಪಾರದರ್ಶಕಗೊಳಿಸುಅಥವಾ rgba ಕಾರ್ಯವನ್ನು ಬಳಸಿಕೊಂಡು HEX ಬಣ್ಣದ ಅಪಾರದರ್ಶಕತೆಯನ್ನು ನಿಯಂತ್ರಿಸಿ.

3. ನಿರ್ದೇಶನಗಳು ಮತ್ತು ನಿಯಮಗಳು

3.1 @ಆಮದು

ನಿಮ್ಮ ಸಾಸ್ ಫೈಲ್‌ಗೆ ನೀವು ಆಮದು ಮಾಡಿಕೊಳ್ಳಬಹುದು ಸಾಸ್, scssಮತ್ತು cssನಿರ್ದೇಶನವನ್ನು ಬಳಸಿಕೊಂಡು ಫೈಲ್‌ಗಳು @ಆಮದು, ಎಲ್ಲಾ ಮಿಕ್ಸಿನ್‌ಗಳು ಮತ್ತು ವೇರಿಯೇಬಲ್‌ಗಳು ಆಮದು ಸಂಭವಿಸುವ ಮುಖ್ಯ ಫೈಲ್‌ನಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ.

@import ಸಾಮಾನ್ಯ CSS ನಂತೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ @import ವೇಳೆ:

• ಫೈಲ್‌ನ ಹಾದಿಯಲ್ಲಿದೆ http://;
• ಫೈಲ್ ಅನ್ನು ಮೂಲಕ ಕರೆಯಲಾಗುತ್ತದೆ url();
• ಅಥವಾ ಆಮದು ಮಾಧ್ಯಮ ನಿಯತಾಂಕಗಳನ್ನು ಒಳಗೊಂಡಿದೆ.

ಮತ್ತೊಂದು ಫೈಲ್ ಅನ್ನು ಮುಖ್ಯ ಸಾಸ್ ಫೈಲ್‌ಗೆ ಸಂಪೂರ್ಣವಾಗಿ ಆಮದು ಮಾಡಿಕೊಳ್ಳಲು, ಫೈಲ್ ವಿಸ್ತರಣೆಯು ಇರಬೇಕು *.ಸಾಸ್, *.scssಅಥವಾ *.css.

ಕೆಲವು ಉದಾಹರಣೆಗಳನ್ನು ನೋಡೋಣ.

ಕೆಳಗಿನ ಫೈಲ್‌ಗಳನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳಲಾಗಿದೆ ಅವರು ಆಗುವುದಿಲ್ಲ:

ಕೆಳಗಿನ ಫೈಲ್‌ಗಳು ತಿನ್ನುವೆಆಮದು:

ಗಮನ! ಹೊಸ ಆವೃತ್ತಿಗಳಲ್ಲಿ ಗಲ್ಪ್-ಸಾಸ್ಸಾಸ್‌ಗೆ CSS ಫೈಲ್‌ಗಳನ್ನು ಆಮದು ಮಾಡಲು ನೀವು .css ವಿಸ್ತರಣೆಯನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಬೇಕಾಗುತ್ತದೆ

ಅಲ್ಪವಿರಾಮದಿಂದ ಪ್ರತ್ಯೇಕಿಸಲಾದ ಬಹು ಫೈಲ್‌ಗಳನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳಲು ಸಾಧ್ಯವಿದೆ: @ಆಮದು "ಹೆಡರ್", "ಮಾಧ್ಯಮ".

ಅಂಡರ್ಸ್ಕೋರ್ನೊಂದಿಗೆ ಪ್ರಾರಂಭವಾಗುವ ಫೈಲ್ಗಳನ್ನು ಕರೆಯಲಾಗುತ್ತದೆ ತುಣುಕುಗಳುಮತ್ತು ಆಮದು ಮಾಡುವಾಗ ಅಂಡರ್‌ಸ್ಕೋರ್‌ಗಳು ಅಥವಾ ವಿಸ್ತರಣೆಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುವ ಅಗತ್ಯವಿಲ್ಲ. ಉದಾಹರಣೆಗೆ, ಫೈಲ್ _ಹೆಡರ್.ಸಾಸ್ಈ ರೀತಿ ಆಮದು ಮಾಡಿಕೊಳ್ಳಬಹುದು: @ಆಮದು "ಹೆಡರ್".

ನೀವು ನಿರ್ದೇಶನವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುವ ಸ್ಥಳದಲ್ಲಿ ಆಮದು ಸಂಭವಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ @ಆಮದು. ಅಂತೆಯೇ, ಅಗತ್ಯವಿರುವ ಸ್ಥಳದಲ್ಲಿ ನೆಸ್ಟೆಡ್ ಆಮದುಗಳನ್ನು ಮಾಡಲು ಸಾಧ್ಯವಿದೆ:

#ಮುಖ್ಯ @ಆಮದು "ಉದಾಹರಣೆ"

3.2 @ಅಟ್-ರೂಟ್

ನಿರ್ದೇಶನ @ಅಟ್-ರೂಟ್ಅದರಲ್ಲಿರುವ ನಿಯಮಗಳನ್ನು ಮೂಲಕ್ಕೆ ಎತ್ತುತ್ತದೆ, ಪೋಷಕರಿಂದ ಸರಪಳಿಯನ್ನು ರದ್ದುಗೊಳಿಸುತ್ತದೆ. ಇಲ್ಲಿ ಎಲ್ಲವೂ ಸರಳವಾಗಿದೆ:

ನಾವು ಸಾಸ್‌ನಲ್ಲಿರುವ ಎಲ್ಲಾ ನಿರ್ದೇಶನಗಳನ್ನು ನೋಡಲಿಲ್ಲ, ಆದರೆ ಆಚರಣೆಯಲ್ಲಿ ಹೆಚ್ಚು ಬಳಸಲಾಗಿದೆ. ಸಾಸ್ ನಿರ್ದೇಶನಗಳಲ್ಲಿ ಆಳವಾಗಿ ಮುಳುಗಲು ನೀವು ಆಸಕ್ತಿ ಹೊಂದಿದ್ದರೆ, ದಸ್ತಾವೇಜನ್ನು ಪರಿಶೀಲಿಸಿ.

4. ಅಭಿವ್ಯಕ್ತಿಗಳು

ಸಾಸ್ ಅಭಿವ್ಯಕ್ತಿಗಳು ಮತ್ತು ಕಾರ್ಯಗಳನ್ನು ಬಳಸುವುದನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ ವಿವಿಧ ಪರಿಸ್ಥಿತಿಗಳು, ಲೂಪ್ ಅನುಷ್ಠಾನಗಳು, ಇತ್ಯಾದಿ.

4.1 @if() ನಿರ್ದೇಶನ

ನಿರ್ದೇಶನ @if()ಕೆಲವು ಷರತ್ತುಗಳ ಅಡಿಯಲ್ಲಿ SassScript ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ ಮತ್ತು ಕೆಳಗಿನ ಸಿಂಟ್ಯಾಕ್ಸ್ ಹೊಂದಿದೆ:

4.2 @ ನಿರ್ದೇಶನಕ್ಕಾಗಿ

@ ಫಾರ್ನಿರ್ದಿಷ್ಟ ಸಂಖ್ಯೆಯ ಬಾರಿ ಶೈಲಿಗಳೊಂದಿಗೆ ಬ್ಲಾಕ್ ಅನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ. ರನ್ಟೈಮ್ನಲ್ಲಿ ನೀವು ಕೌಂಟರ್ ವೇರಿಯೇಬಲ್ ಅನ್ನು ಹೊಂದಿಸಬಹುದು.

ನೀವು ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು ಮೂಲಕಗೆ ಬದಲಾಗಿ, ನೀವು 1 ರಿಂದ 11 ರವರೆಗೆ ಹೋಗಬೇಕಾದರೆ, ಮತ್ತು ಉದಾಹರಣೆಯಲ್ಲಿರುವಂತೆ ಕೇವಲ 10 ರವರೆಗೆ ಅಲ್ಲ.

4.3 @ಪ್ರತಿ ನಿರ್ದೇಶನ

ನೀವು ಕೇವಲ ಸಂಖ್ಯೆಗಳ ಬದಲಿಗೆ ಮೌಲ್ಯಗಳ ಪಟ್ಟಿಯ ಮೂಲಕ ಪುನರಾವರ್ತಿಸಲು ಬಯಸಿದರೆ, ನೀವು ನಿರ್ದೇಶನವನ್ನು ಬಳಸಬಹುದು @ಪ್ರತಿ:

4.4 @while ಡೈರೆಕ್ಟಿವ್

@ ಅದೇ ಸಮಯದಲ್ಲಿಅಭಿವ್ಯಕ್ತಿ ಇರುವಾಗ ಸ್ಟೈಲ್ ಬ್ಲಾಕ್‌ಗಳ ಮೂಲಕ ಲೂಪ್ ಮಾಡುತ್ತದೆ ನಿಜ.

5. ಮಿಕ್ಸಿನ್ಸ್

ಹ್ಯಾಗ್ಫಿಶ್- ಸಾಸ್ ಕೋಡ್ ಬ್ಲಾಕ್‌ಗಳು (ಅಥವಾ ಟೆಂಪ್ಲೇಟ್ ಮಿಕ್ಸಿನ್ಸ್), ಇದು ಆರ್ಗ್ಯುಮೆಂಟ್‌ಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳಬಹುದು (ಐಚ್ಛಿಕ) ಮತ್ತು ಬರವಣಿಗೆಯ ಶೈಲಿಗಳ ಸಾಧ್ಯತೆಗಳನ್ನು ಗಮನಾರ್ಹವಾಗಿ ವಿಸ್ತರಿಸಬಹುದು ಮತ್ತು ಒಂದೇ ರೀತಿಯ ನಿಯಮಗಳನ್ನು ಮತ್ತು ಸಂಪೂರ್ಣ CSS ಬ್ಲಾಕ್‌ಗಳನ್ನು ಅನ್ವಯಿಸಲು ಖರ್ಚು ಮಾಡುವ ಸಮಯವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ. ಇದು ವಾದವನ್ನು ತೆಗೆದುಕೊಳ್ಳಬಹುದು, ದೊಡ್ಡ ಪ್ರಮಾಣದ ಕೆಲಸವನ್ನು ಮಾಡಬಹುದು ಮತ್ತು ಇನ್‌ಪುಟ್ ಪ್ಯಾರಾಮೀಟರ್ ಅನ್ನು ಅವಲಂಬಿಸಿ ಫಲಿತಾಂಶವನ್ನು ಉಂಟುಮಾಡುವ ಕಾರ್ಯದಂತಿದೆ.

ಮಿಕ್ಸಿನ್ ಅನ್ನು ನಿರ್ದೇಶನದ ಮೂಲಕ ಘೋಷಿಸಲಾಗುತ್ತದೆ @ಮಿಕ್ಸಿನ್, ಪ್ರಕಟಣೆಯ ನಂತರ ಅದನ್ನು ಸೂಚಿಸಬೇಕು ಹೆಸರುಹ್ಯಾಗ್ಫಿಶ್. ಮಿಕ್ಸಿನ್ ನಿರ್ದೇಶನದಿಂದ ಕರೆಯಲಾಗಿದೆ @ಸೇರಿಸು, ಇದು ಮಿಕ್ಸಿನ್ ಮತ್ತು ಪಾಸ್ ಮಾಡಿದ ಆರ್ಗ್ಯುಮೆಂಟ್‌ಗಳ ಹೆಸರನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ, ಯಾವುದಾದರೂ ಇದ್ದರೆ.

ಸ್ನೇಹಿತರೇ, ನಾವು ಸಾಸ್‌ನ ಮುಖ್ಯ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ನೋಡಿದ್ದೇವೆ, ಇದು ಸಿಎಸ್‌ಎಸ್ ವೆಬ್‌ಸೈಟ್ ಶೈಲಿಗಳೊಂದಿಗೆ ಫಲಪ್ರದ ಕೆಲಸಕ್ಕಾಗಿ ಸಾಕಾಗುತ್ತದೆ. ಕೆಲವು ನಿರ್ದೇಶನಗಳು ಮತ್ತು ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಸೇರಿಸಲಾಗಿಲ್ಲ ಈ ಕೈಪಿಡಿ, ಆದರೆ ನೀವು ಸಾಸ್‌ನ ಎಲ್ಲಾ ವೈಶಿಷ್ಟ್ಯಗಳ ಬಗ್ಗೆ ಕಲಿಯಲು ಆಸಕ್ತಿ ಹೊಂದಿದ್ದರೆ, ಅದು ಉಪಯುಕ್ತವಾಗಿರುತ್ತದೆ.

ನಾನು ಈಗಿನಿಂದಲೇ ಪ್ರಶ್ನೆಗೆ ಉತ್ತರಿಸುತ್ತೇನೆ - ಸಿದ್ಧಪಡಿಸಿದ ವೆಬ್‌ಸೈಟ್‌ನಲ್ಲಿ ಸಾಸ್ ಶೈಲಿಗಳೊಂದಿಗೆ ಹೇಗೆ ಕೆಲಸ ಮಾಡುವುದು, ಸಿದ್ಧಪಡಿಸಿದ CSS ಅನ್ನು ಸಂಪಾದಿಸಲು ಮತ್ತು ಅದನ್ನು FTP ಮೂಲಕ ಅಪ್‌ಲೋಡ್ ಮಾಡಲು ನಿಜವಾಗಿಯೂ ಅಗತ್ಯವಿದೆಯೇ? ಇಲ್ಲ, ನೀವು ಅದನ್ನು ಮಾಡಲು ಸಾಧ್ಯವಿಲ್ಲ. ನಿಮ್ಮ ಸಾಸ್ ಶೈಲಿಗಳು ಅಥವಾ ಸಂಪೂರ್ಣ ಸೈಟ್‌ನ ಸ್ಥಳೀಯ ನಕಲನ್ನು ನೀವು ಹೊಂದಿರಬೇಕು ಮತ್ತು ಕೆಲಸವನ್ನು ಮುಗಿಸಿದ ನಂತರ, FTP ಮೂಲಕ ನಿಯೋಜಿಸಿ (ಅಪ್‌ಲೋಡ್ ಮಾಡಿ) ಸಿದ್ಧ ಶೈಲಿಗಳು. ಇದಕ್ಕಾಗಿ, ನೀವು ಗಲ್ಪ್ ಪ್ಯಾಕೇಜ್ ಅನ್ನು ಬಳಸಬಹುದು ವಿನೈಲ್-ftp. ಅಥವಾ FTP/sFTP ಮೂಲಕ ಅಪ್‌ಲೋಡ್ ಮಾಡಿದ ಫೈಲ್‌ಗಳನ್ನು ಕಂಪೈಲ್ ಮಾಡಲು ನಿಮ್ಮ ಸರ್ವರ್‌ನಲ್ಲಿ ಸಾಸ್ ಪರಿಸರವನ್ನು ಹೊಂದಿಸಿ.

ಇವತ್ತಿಗೂ ಅಷ್ಟೆ. ನಿಮ್ಮ ಗಮನಕ್ಕೆ ಧನ್ಯವಾದಗಳು!

ಸಾಸ್ ಎಂದರೇನು, ಅದು ಏಕೆ ಬೇಕು, ಅದರ ಸಾಮರ್ಥ್ಯಗಳು, ಸ್ಥಾಪನೆ ಮತ್ತು ನಿಮ್ಮ ಯೋಜನೆಗಳಲ್ಲಿ ಅದನ್ನು ಹೇಗೆ ಬಳಸುವುದು

ಸಾಸ್ ಎಂದರೇನು

ಸಾಸ್(ಸಿಂಟ್ಯಾಕ್ಟಿಕಲಿ ಅದ್ಭುತ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳು) ಅತ್ಯಾಧುನಿಕ, ಸ್ಥಿರ ಮತ್ತು ವೈಶಿಷ್ಟ್ಯ-ಸಮೃದ್ಧ ಪ್ರಿಪ್ರೊಸೆಸರ್‌ಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ. ಇದು ಅಭಿವರ್ಧಕರಲ್ಲಿ ಬಹಳ ಜನಪ್ರಿಯವಾಗಿದೆ. ಸಾಸ್ ಹೆಚ್ಚು ಮುಂದುವರಿದಹೊಂದಿರುವ CSS ನ ಆವೃತ್ತಿ ಹೆಚ್ಚುಹೆಚ್ಚಿನ ವೈಶಿಷ್ಟ್ಯಗಳು, ಮತ್ತು ಸಾಸ್ ಅನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ ಸರಳೀಕರಣಕ್ಯಾಸ್ಕೇಡಿಂಗ್ ಶೈಲಿಯ ಹಾಳೆಗಳು.

ಸಾಸ್ ಸಿಂಟ್ಯಾಕ್ಸ್ 2 ಪ್ರಕಾರಗಳನ್ನು ಹೊಂದಿದೆ: ಸಾಸ್ಮತ್ತು SCSS. SCSS CSS ಗೆ ಹೆಚ್ಚು ಹೋಲುತ್ತದೆ, ಆದರೆ SASS ಅನುಪಸ್ಥಿತಿಯಲ್ಲಿ ವಿಭಿನ್ನವಾಗಿರುತ್ತದೆ ಸುರುಳಿಯಾಕಾರದ ಕಟ್ಟುಪಟ್ಟಿಗಳು. ನೆಸ್ಟೆಡ್ ಅಂಶಗಳನ್ನು ಇಂಡೆಂಟೇಶನ್ ಬಳಸಿ ಅಳವಡಿಸಲಾಗಿದೆ. ಇದು ನಾವು ಇಲ್ಲಿ ಬಳಸುವ ಸಿಂಟ್ಯಾಕ್ಸ್ ಆಗಿದೆ.

ನಿಮಗೆ ಸಾಸ್ ಏಕೆ ಬೇಕು?

ಸಾಸ್ ಏಕೆ ಬೇಕು ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು, ಅದರಲ್ಲಿ ಕೆಲವನ್ನು ಪಟ್ಟಿ ಮಾಡೋಣ: ಸಾಧ್ಯತೆಗಳು:

1. ಸಾಸ್ ಗೂಡುಕಟ್ಟಲು ಅನುಮತಿಸುತ್ತದೆ ಸಿಎಸ್ಎಸ್ ನಿಯಮಗಳುಪರಸ್ಪರ ಒಳಗೆ
2. ಆಸ್ತಿ ಗೂಡುಕಟ್ಟುವ
3. ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಬಳಸುವುದು
4. ಅಂಕಗಣಿತದ ಬೆಂಬಲ
5. ಹೂವುಗಳೊಂದಿಗೆ ಕಾರ್ಯಾಚರಣೆಗಳು
6. ಸಾಸ್ ಫೈಲ್ ಅನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳುವ ಸಾಮರ್ಥ್ಯ ಸಾಸ್, scssಮತ್ತು cssಕಡತಗಳು
7. ಮಿಕ್ಸಿನ್ಸ್ ಬಳಸುವುದು
8. ಮತ್ತು ಹೆಚ್ಚು

ಸಂಕ್ಷಿಪ್ತವಾಗಿ, ನಿಮಗೆ ಸಾಸ್ ಏಕೆ ಬೇಕು: ಅದು ವೇಗವನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆಮತ್ತು ಸರಳಗೊಳಿಸುತ್ತದೆಅಭಿವೃದ್ಧಿ ಪ್ರಕ್ರಿಯೆ.

ಸಾಸ್ ಅನ್ನು ಹೇಗೆ ಬಳಸುವುದು

ಇವೆ ವಿವಿಧ ರೀತಿಯಲ್ಲಿಸಾಸ್ ಅನ್ನು ಬಳಸಲು ಪ್ರಾರಂಭಿಸಿ:

1. ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಬಳಸುವುದು (ಕೋಲಾ, ಕೋಡ್‌ಕಿಟ್, ಕಂಪಾಸ್ ಮತ್ತು ಇತರರು)
2. ಕಮಾಂಡ್ ಲೈನ್ ಅನ್ನು ಬಳಸುವುದು
3. ಕಾರ್ಯ ನಿರ್ವಾಹಕರನ್ನು ಬಳಸುವುದು
4. ಆನ್‌ಲೈನ್ ಸೇವೆಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಸಾಸ್ ಅನ್ನು ಸಿಎಸ್‌ಎಸ್‌ಗೆ ಸುಲಭವಾಗಿ ಪರಿವರ್ತಿಸಿ

ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ ಸಾಸ್ಕಾರ್ಯ ನಿರ್ವಾಹಕರಿಗೆ ಗುಟುಕು. ನೀವು ಅನುಸ್ಥಾಪನೆಯನ್ನು ಪ್ರಾರಂಭಿಸುವ ಮೊದಲು, ಗಲ್ಪ್ನ ಮೂಲಭೂತ ಅಂಶಗಳೊಂದಿಗೆ ನೀವೇ ಪರಿಚಿತರಾಗಿರುವುದು ಸೂಕ್ತವಾಗಿದೆ.

ಗಲ್ಪ್-ಸಾಸ್ ಅನ್ನು ಸ್ಥಾಪಿಸುವುದು ಮತ್ತು ಸಂಪರ್ಕಿಸುವುದು

ಪ್ಲಗಿನ್ ಅನ್ನು ಸ್ಥಾಪಿಸಲು ಗಲ್ಪ್-ಸಾಸ್ನಮ್ಮ ಯೋಜನೆಗೆ, ಪ್ರಾಜೆಕ್ಟ್ ಫೋಲ್ಡರ್‌ನಲ್ಲಿ ಆಜ್ಞಾ ಸಾಲಿನ ತೆರೆಯಿರಿ. ಕೆಳಗಿನ ಆಜ್ಞೆಯನ್ನು ನಮೂದಿಸೋಣ:

npm i gulp - sass -- save - dev

ಪ್ಲಗಿನ್ ಅನ್ನು node_modules ಫೋಲ್ಡರ್‌ನಲ್ಲಿ ಸ್ಥಾಪಿಸಲಾಗುವುದು ಮತ್ತು ಪ್ಯಾಕೇಜ್.json ಫೈಲ್‌ಗೆ ಅನುಗುಣವಾದ ನಮೂದನ್ನು ಸೇರಿಸಲಾಗುತ್ತದೆ. ಯಶಸ್ವಿ ಅನುಸ್ಥಾಪನೆಯ ನಂತರ ನಮಗೆ ಅಗತ್ಯವಿದೆ ಸಂಪರ್ಕಫೈಲ್‌ನಲ್ಲಿ ನಮ್ಮ ಪ್ಯಾಕೇಜ್ gulpfile.js.

var gulp = ಅಗತ್ಯವಿದೆ ("ಗಲ್ಪ್");

ಸಾಸ್ = ಅಗತ್ಯವಿದೆ ("ಗಲ್ಪ್-ಸಾಸ್"); ಸಾಸ್.

ಈಗ ಕಾರ್ಯವನ್ನು ರಚಿಸೋಣ

ಗುಟುಕು. ಕಾರ್ಯ ("ಸಾಸ್" , ಫಂಕ್ಷನ್ ()( ರಿಟರ್ನ್ ಗಲ್ಪ್ . ಎಸ್‌ಆರ್‌ಸಿ ("ಅಪ್ಲಿಕೇಶನ್/ಸಾಸ್/ಮುಖ್ಯ.ಸಾಸ್") . ಪೈಪ್ (ಸಾಸ್ () ಆನ್ ( "ದೋಷ" , ಸಾಸ್ . ಲಾಗ್ ಎರರ್ "ಅಪ್ಲಿಕೇಶನ್/ಸಿಎಸ್ಎಸ್")); gulp.src

- ಪ್ರಕ್ರಿಯೆಗೆ ನಾವು ಏನು ತೆಗೆದುಕೊಳ್ಳುತ್ತೇವೆ?.ಪೈಪ್(ಸಾಸ್())

- ಸಾಸ್ ಅನ್ನು CSS ಗೆ ಪರಿವರ್ತಿಸಿಸಾಸ್() - ಬ್ರಾಕೆಟ್ಗಳಲ್ಲಿ ನೀವು ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು ಹೆಚ್ಚುವರಿ ಸೆಟ್ಟಿಂಗ್‌ಗಳು CSS ಅನ್ನು ಪ್ರದರ್ಶಿಸಿ
ಹೊರ ಹೋಗುವ ದಾರಿಯಲ್ಲಿ. ವಿಸ್ತರಿಸಿದೆಉದಾಹರಣೆಗೆ, ಸಾಸ್((ಔಟ್‌ಪುಟ್‌ಸ್ಟೈಲ್:"
")) - ಸಂಪೂರ್ಣವಾಗಿ ವಿಸ್ತರಿಸಿದ CSS. ಗೂಡುಕಟ್ಟಿದೆಇತರ ಅರ್ಥಗಳು: ಕಾಂಪ್ಯಾಕ್ಟ್(ಡೀಫಾಲ್ಟ್) - ಪ್ರತಿ ಸೆಲೆಕ್ಟರ್ ಆನ್, ಸಂಕುಚಿತಗೊಳಿಸಲಾಗಿದೆವಿಭಿನ್ನ ಸಾಲು

- ಎಲ್ಲಾ ಒಂದೇ ಸಾಲಿನಲ್ಲಿ. .on("ದೋಷ", sass.logError).

ನಾವು ಇದ್ದಕ್ಕಿದ್ದಂತೆ ತಪ್ಪು ಮಾಡಿದರೆ, ಅದು ಇರುವ ಪರದೆಯ ಮೇಲೆ ನಾವು ಸಂದೇಶವನ್ನು ಪ್ರದರ್ಶಿಸಬಹುದು. ಇದನ್ನು ಮಾಡಲು, ಸೇರಿಸೋಣ ಗಲ್ಪ್-ಸಾಸ್ನಾವು ರಚಿಸಿದ ಕಾರ್ಯವನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸೋಣ . ಆಜ್ಞಾ ಸಾಲಿನಲ್ಲಿ ನಾವು ನಮೂದಿಸುತ್ತೇವೆ.

ಗಲ್ಪ್ ಸಾಸ್ ಗಲ್ಪ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ SASS ಅನ್ನು CSS ಗೆ ಪರಿವರ್ತಿಸಿತು ಮತ್ತು ಫೈಲ್ ಅನ್ನು ರಚಿಸಿತು.

ನೀವು ಒಂದು ಫೈಲ್ ಅಲ್ಲ, ಆದರೆ ಹಲವಾರು ಆಯ್ಕೆ ಮಾಡಬೇಕಾದರೆ, ನೀವು ಎಲ್ಲಾ ಫೈಲ್ಗಳನ್ನು ಏಕಕಾಲದಲ್ಲಿ ಆಯ್ಕೆ ಮಾಡಬಹುದು. ಇದನ್ನು ಮಾಡಲು, ನಾವು ಪರಿವರ್ತನೆಗಾಗಿ ಸಾಸ್ ಫೈಲ್‌ಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡುವ ಸಾಲನ್ನು ಸ್ವಲ್ಪ ಬದಲಾಯಿಸೋಣ:

ಗುಟುಕು. src("app/sass/**/*.sass")

ಸಾಸ್/**/*.ಸಾಸ್- ಅಂದರೆ ಎಲ್ಲಾ ಫೈಲ್‌ಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡುವುದು (ವಿಸ್ತರಣೆಯೊಂದಿಗೆ .ಸಾಸ್) ಸಾಸ್ ಫೋಲ್ಡರ್‌ನ ಎಲ್ಲಾ ಫೋಲ್ಡರ್‌ಗಳಲ್ಲಿ.

ಸಂಕ್ಷೇಪಿಸಲು:ಪ್ಲಗಿನ್ ಅನ್ನು ಸಂಪರ್ಕಿಸಲಾಗಿದೆ ಗಲ್ಪ್-ಸಾಸ್, ಕಾರ್ಯವನ್ನು ರಚಿಸಲಾಗಿದೆ ಸಾಸ್ಮತ್ತು ದೋಷ ಔಟ್‌ಪುಟ್ ಅನ್ನು ಸೇರಿಸಲಾಗಿದೆ (ಒಂದು ವೇಳೆ). ಈಗ ನೀವು ಡೀಫಾಲ್ಟ್ ಕೆಲಸವನ್ನು ಮಾಡಬಹುದು. ಆ. ನಮ್ಮ ತೆರಿಗೆ ಗಲ್ಪ್-ಸಾಸ್ ಅನ್ನು ಆಜ್ಞೆಯೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಲಾಗುವುದು ಗುಟುಕು.

ಗುಟುಕು. ಕಾರ್ಯ("ಡೀಫಾಲ್ಟ್" , ["ಸಾಸ್" ]);

ನಾವು ಈ ಕೆಳಗಿನ gulpfile.js ಅನ್ನು ಪಡೆಯುತ್ತೇವೆ

var gulp = ಅಗತ್ಯವಿದೆ ("ಗಲ್ಪ್");

ವರ್ ಸಾಸ್ = ಅಗತ್ಯ ("ಗಲ್ಪ್-ಸಾಸ್");

ಗುಟುಕು. ಕಾರ್ಯ ("ಸಾಸ್" , ಫಂಕ್ಷನ್ ()( ರಿಟರ್ನ್ ಗಲ್ಪ್ . ಎಸ್‌ಆರ್‌ಸಿ ("ಅಪ್ಲಿಕೇಶನ್/ಸಾಸ್/**/*.ಸಾಸ್") . ಪೈಪ್ (ಸಾಸ್ () ಆನ್ ("ದೋಷ" , ಸಾಸ್ .dest("app/css")))); ಗುಟುಕು. ಕಾರ್ಯ("ಡೀಫಾಲ್ಟ್" , ["ಸಾಸ್" ]);ಉದಾಹರಣೆಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಸಾಸ್‌ನ ಕೆಲವು ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ನೋಡೋಣ.

ಅವುಗಳಲ್ಲಿ ಒಂದು ದೊಡ್ಡ ಸಂಖ್ಯೆಯಿದೆ, ಹೆಚ್ಚು ಜನಪ್ರಿಯವಾದವುಗಳನ್ನು ಮಾತ್ರ ಪರಿಗಣಿಸೋಣ. ಜೊತೆಗೆ

ಆಸ್ತಿ ಗೂಡುಕಟ್ಟುವ

ಪೂರ್ಣ ಪಟ್ಟಿ

ಅಧಿಕೃತ ವೆಬ್‌ಸೈಟ್‌ನಲ್ಲಿ ಕಾಣಬಹುದು.

ನಿಯಮಗಳ ಗೂಡುಕಟ್ಟುವ

$ ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಬಳಸುವುದು ಸಂಖ್ಯೆಗಳೊಂದಿಗೆ ಅಂಕಗಣಿತದ ಕಾರ್ಯಾಚರಣೆಗಳುಬಣ್ಣಗಳೊಂದಿಗೆ ಅಂಕಗಣಿತದ ಕಾರ್ಯಾಚರಣೆಗಳು

ಸಾಸ್ ಅನುಮತಿಸುತ್ತದೆ

css ನಿಯಮಗಳು

, ಪರಸ್ಪರರೊಳಗೆ ಗೂಡುಕಟ್ಟುತ್ತವೆ. ಒಳಗಿನ ನಿಯಮವು ಬಾಹ್ಯ ನಿಯಮ ಆಯ್ಕೆಯೊಳಗೆ ಮಾತ್ರ ಅನ್ವಯಿಸುತ್ತದೆ. ಇದನ್ನು ಭಾಷಾಂತರಿಸಲು ಬೇರೆ ಮಾರ್ಗವಿಲ್ಲ, ನುಡಿಗಟ್ಟು ಬುದ್ಧಿವಂತವಾಗಿದೆ, ಆದರೆ ವಾಸ್ತವದಲ್ಲಿ ಎಲ್ಲವೂ ಸರಳವಾಗಿದೆ, ಉದಾಹರಣೆಯನ್ನು ನೋಡಿ:

Scss ಫೈಲ್

#ಮುಖ್ಯ ಪಿ (

ಬಣ್ಣ: #00ff00;

ಅಗಲ: 97%;

ರೆಡ್ಬಾಕ್ಸ್ (

1 2 3 4 5 6 7 8

css ನಿಯಮಗಳು

, ಪರಸ್ಪರರೊಳಗೆ ಗೂಡುಕಟ್ಟುತ್ತವೆ. ಒಳಗಿನ ನಿಯಮವು ಬಾಹ್ಯ ನಿಯಮ ಆಯ್ಕೆಯೊಳಗೆ ಮಾತ್ರ ಅನ್ವಯಿಸುತ್ತದೆ. ಇದನ್ನು ಭಾಷಾಂತರಿಸಲು ಬೇರೆ ಮಾರ್ಗವಿಲ್ಲ, ನುಡಿಗಟ್ಟು ಬುದ್ಧಿವಂತವಾಗಿದೆ, ಆದರೆ ವಾಸ್ತವದಲ್ಲಿ ಎಲ್ಲವೂ ಸರಳವಾಗಿದೆ, ಉದಾಹರಣೆಯನ್ನು ನೋಡಿ:

Scss ಫೈಲ್

ಹಿನ್ನೆಲೆ ಬಣ್ಣ: #ff0000;

ಬಣ್ಣ: #00ff00;

ಅಗಲ: 97%;

ಬಣ್ಣ: #000; ಸಂಕಲನ ಸಿಎಸ್ಎಸ್#ಮುಖ್ಯ p .redbox (

ಸಾಸ್ ಅನುಮತಿಸುತ್ತದೆ

10 11 12

ಇದು ಪೋಷಕ ಆಯ್ಕೆಯನ್ನು ಪುನರಾವರ್ತಿಸುವುದನ್ನು ತಪ್ಪಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ ಮತ್ತು ಗುಂಪನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಹೆಚ್ಚು ಸುಲಭವಾಗುತ್ತದೆ

Scss ಫೈಲ್

css ಪದರಗಳು

ಹೆಚ್ಚಿನ ಸಂಖ್ಯೆಯ ನೆಸ್ಟೆಡ್ ಸೆಲೆಕ್ಟರ್‌ಗಳೊಂದಿಗೆ. ಉದಾಹರಣೆಗೆ:

#ಮುಖ್ಯ (

p , div (

ಫಾಂಟ್ ಗಾತ್ರ: 2ಎಮ್;

ರೆಡ್ಬಾಕ್ಸ್ (

11 12 13 14

ಇದು ಪೋಷಕ ಆಯ್ಕೆಯನ್ನು ಪುನರಾವರ್ತಿಸುವುದನ್ನು ತಪ್ಪಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ ಮತ್ತು ಗುಂಪನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಹೆಚ್ಚು ಸುಲಭವಾಗುತ್ತದೆ

Scss ಫೈಲ್

ಫಾಂಟ್-ತೂಕ: ದಪ್ಪ;

ಪೂರ್ವ(

ಹೆಚ್ಚಿನ ಸಂಖ್ಯೆಯ ನೆಸ್ಟೆಡ್ ಸೆಲೆಕ್ಟರ್‌ಗಳೊಂದಿಗೆ. ಉದಾಹರಣೆಗೆ:

ಫಾಂಟ್ ಗಾತ್ರ: 3em;

#ಮುಖ್ಯ ಪಿ,

#ಮುಖ್ಯ (

#ಮುಖ್ಯ ವಿಭಾಗ (

ಫಾಂಟ್ ಗಾತ್ರ: 2ಎಮ್;

#ಮುಖ್ಯ ಪಿ ಎ,

#ಮುಖ್ಯ ವಿಭಾಗ ಎ ( #ಮುಖ್ಯ ಪೂರ್ವ ( ಆಯ್ಕೆದಾರರ ಪೋಷಕರ ಉಲ್ಲೇಖ (&)ಸಾಸ್ ಡೆವಲಪರ್‌ಗಳು ಅದನ್ನು ಏಕೆ ಕರೆದರು ಎಂಬುದು ಸ್ಪಷ್ಟವಾಗಿಲ್ಲ. ಸಾಮಾನ್ಯವಾಗಿ, ಸರಳವಾಗಿ ಹೇಳುವುದಾದರೆ, ಇದನ್ನು ಸ್ವತಃ ಒಂದು ಉಲ್ಲೇಖ ಎಂದು ಕರೆಯಬಹುದು. ನಾನು ತಪ್ಪಾಗಿ ಭಾವಿಸದಿದ್ದಲ್ಲಿ, ಕಡಿಮೆಯ ದಾಖಲೆಯು ಅದನ್ನು ಕರೆಯುತ್ತದೆ (ಸಾಸ್‌ನಿಂದ ಕಡಿಮೆ ವಿಷಯಗಳನ್ನು ತೆಗೆದುಕೊಂಡಿದೆ ಮತ್ತು ಅದು ಈ ವಿನ್ಯಾಸವನ್ನು ಎರವಲು ಪಡೆದಿದೆ ಎಂದು ನಾನು ನಿಮಗೆ ನೆನಪಿಸುತ್ತೇನೆ). ಅನೇಕರು ಬಹುಶಃ ಪ್ರಶ್ನೆಯನ್ನು ಕೇಳುತ್ತಾರೆ, ಇದು ಯಾವುದಕ್ಕಾಗಿ? ಈ ನಿರ್ಮಾಣವಿಲ್ಲದೆ ಒಂದೇ ಹುಸಿ-ವರ್ಗವನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಅಸಾಧ್ಯವಾಗಿದೆ ಎಂಬ ಅಂಶದಿಂದ ಪ್ರಾರಂಭಿಸೋಣ. ಅಥವಾ ಇನ್ನೊಂದು ಉದಾಹರಣೆ, ಯಾವ ವರ್ಗವನ್ನು ಹೊಂದಿದೆ ಎಂಬುದರ ಆಧಾರದ ಮೇಲೆ ನಾವು ಇತರ ಅಂಶ ಶೈಲಿಗಳನ್ನು ಒದಗಿಸಬೇಕಾಗಿದೆ

ಸಾಸ್ ಅನುಮತಿಸುತ್ತದೆ

1 2 3 4 5 6 7 8 9 10

#ಮುಖ್ಯ (

ದೇಹ

html ಡಾಕ್ಯುಮೆಂಟ್

ಪಠ್ಯ-ಅಲಂಕಾರ: ಅಂಡರ್ಲೈನ್;

ದೇಹ .ಫೈರ್ಫಾಕ್ಸ್ & (

ಫಾಂಟ್-ತೂಕ: ಸಾಮಾನ್ಯ;

ರೆಡ್ಬಾಕ್ಸ್ (

1 2 3 4 5 6 7 8 9 10

ಫಾಂಟ್-ತೂಕ: ದಪ್ಪ;

ದೇಹ

a: ಹೂವರ್ (

ಪಠ್ಯ-ಅಲಂಕಾರ: ಅಂಡರ್ಲೈನ್;

ದೇಹ .ಫೈರ್‌ಫಾಕ್ಸ್ ಎ (

ಫಾಂಟ್-ತೂಕ: ಸಾಮಾನ್ಯ;

ಹುಸಿ-ವರ್ಗಗಳೊಂದಿಗೆ ಎಲ್ಲವೂ ಸ್ಪಷ್ಟವಾಗಿದೆ ಎಂದು ನಾನು ಭಾವಿಸುತ್ತೇನೆ. ರೇಖೆಯನ್ನು ಹತ್ತಿರದಿಂದ ನೋಡೋಣ body.firefox &. ಇಲ್ಲಿ ಏನು ನಡೆಯುತ್ತಿದೆ? ಕೆಲವು ಅಂಶಗಳ ಹಿಂದೆ ನಿಮಗೇ ಲಿಂಕ್ ಕಾಣಿಸಿಕೊಂಡರೆ (ಇಲ್ಲಿ ಅದು ಸಿಂಗಲ್ ಆಗಿರಬಹುದು html ಅಂಶ, ಮತ್ತು ವರ್ಗ, ಐಡಿ, ಸಂಪೂರ್ಣವಾಗಿ ಮುಖ್ಯವಲ್ಲ), ನಂತರ ಇದು ಕಂಪೈಲರ್‌ಗೆ ಈ ವ್ಯವಸ್ಥೆಯು ಅಂಶಗಳ ಪ್ರಮಾಣಿತ ಗೂಡುಕಟ್ಟುವಿಕೆಯನ್ನು ರದ್ದುಗೊಳಿಸುತ್ತದೆ ಎಂದು ಹೇಳುತ್ತದೆ. ಕಂಪೈಲರ್ ಅಂತಹ ಅಂಶವನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆಪ್ರಮಾಣಿತ ಸ್ಟ್ರೀಮ್ . ಮೇಲಿನ ಉದಾಹರಣೆಯನ್ನು ನೀವು ನೋಡಿದರೆ, css ಅನ್ನು ಸಂಕಲಿಸಲಾಗುತ್ತದೆ ಎಂಬ ಭಾವನೆಯನ್ನು ನೀವು ಪಡೆಯಬಹುದು.ಒಂದು ದೇಹ.ಫೈರ್‌ಫಾಕ್ಸ್ ಎ , ಆದರೆ ಇಲ್ಲ. ಸ್ವತಃ ಒಂದು ಉಲ್ಲೇಖವು ವರ್ಗದೊಂದಿಗೆ ಅಂಶವನ್ನು ಅನುಸರಿಸುತ್ತದೆ, ಆದ್ದರಿಂದ ಕಂಪೈಲರ್ ಉತ್ಪಾದಿಸುತ್ತದೆದೇಹ.ಫೈರ್‌ಫಾಕ್ಸ್ ಎ

ಸಾಸ್ ಅನುಮತಿಸುತ್ತದೆ

1 2 3 4 5 6 7 8 9

ಇದು ಪೋಷಕ ಆಯ್ಕೆಯನ್ನು ಪುನರಾವರ್ತಿಸುವುದನ್ನು ತಪ್ಪಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ ಮತ್ತು ಗುಂಪನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಹೆಚ್ಚು ಸುಲಭವಾಗುತ್ತದೆ

(ಅಂಶಗಳ ಪ್ರಮಾಣಿತ ಗೂಡುಕಟ್ಟುವಿಕೆಯನ್ನು ರದ್ದುಗೊಳಿಸಲಾಗಿದೆ). ಇದು ಸಾಕಷ್ಟು ಮೂಲಭೂತ ವಿಷಯವಾಗಿದೆ ಮತ್ತು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಬೇಕಾಗಿದೆ. ಕೆಲವು ಪ್ರಿಪ್ರೊಸೆಸರ್‌ಗೆ ಬದಲಾಯಿಸಿದ ಆರಂಭಿಕರು ಸ್ವಯಂ-ಉಲ್ಲೇಖವು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದಿಲ್ಲ ಮತ್ತು ಆಗಾಗ್ಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸದ ಕೋಡ್ ಅನ್ನು ಬರೆಯುತ್ತಾರೆ. ನೀವು ಇದನ್ನು ನೆನಪಿನಲ್ಲಿಟ್ಟುಕೊಳ್ಳಬೇಕು.

#ಮುಖ್ಯ (

html ಡಾಕ್ಯುಮೆಂಟ್

ಬಣ್ಣ: ಕಪ್ಪು;

ರೆಡ್ಬಾಕ್ಸ್ (

1 2 3 4 5 6 7 8 9

ಇದು ಪೋಷಕ ಆಯ್ಕೆಯನ್ನು ಪುನರಾವರ್ತಿಸುವುದನ್ನು ತಪ್ಪಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ ಮತ್ತು ಗುಂಪನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಹೆಚ್ಚು ಸುಲಭವಾಗುತ್ತದೆ

ಬಣ್ಣ:ಕೆಂಪು;

ಬಣ್ಣ: ಕಪ್ಪು

#ಮುಖ್ಯ (

#ಮುಖ್ಯ ಎ (

ಬಣ್ಣ: ಕಪ್ಪು;

#ಮುಖ್ಯ ಎ:ಹೂವರ್ ( ಮೇಲಿನ ಉದಾಹರಣೆಯಲ್ಲಿ ನೀವು ಸ್ವತಃ ಉಲ್ಲೇಖವನ್ನು ನೋಡಬಹುದು&: ಸುಳಿದಾಡಿ ಹೂಡಿಕೆ ಮಾಡಿದೆ#ಮುಖ್ಯ ಮತ್ತು ಹೂಡಿಕೆ ಮಾಡಿದೆಎ , ಅದು ಏಕಾಂಗಿಯಾಗಿ ನಿಂತಿದೆ, ಅದರ ಮುಂದೆ ಯಾವುದೇ ಅಂಶಗಳಿಲ್ಲ, ಆದ್ದರಿಂದ ಪ್ರಮಾಣಿತ ಗೂಡುಕಟ್ಟುವ ಕೆಲಸ ಮಾಡುತ್ತದೆ ಮತ್ತು ಕಂಪೈಲರ್ ಉತ್ಪಾದಿಸುತ್ತದೆ.

#ಮುಖ್ಯ ಎ:ಮೇಲ್ದಾಳಿ ವಿಭಿನ್ನ ಸಮಯಗಳಲ್ಲಿ ಜಗತ್ತು ವಾಸಿಸುತ್ತಿತ್ತುತಾಂತ್ರಿಕ ಕ್ರಾಂತಿಗಳು . ಇದು ಸ್ಪೂರ್ತಿಯಲ್ಲಿ ಸಂಭವಿಸಿತು. ಸ್ಥೂಲವಾಗಿ ಹೇಳುವುದಾದರೆ, ಕಂಚು ಮತ್ತು ಬಾಮ್, ಕಬ್ಬಿಣದ ಯುಗವು ಬಂದಿತು. ಚಕ್ರ ಅಥವಾ ನೇಗಿಲನ್ನು ಯಾರು ಕಂಡುಹಿಡಿದರು ಎಂಬುದು ಈಗ ನಮಗೆ ತಿಳಿದಿಲ್ಲ, ಆದರೆ ಆ ಸಮಯದಲ್ಲಿ ಈ ಆವಿಷ್ಕಾರಗಳು ಪ್ರಕೃತಿಯಲ್ಲಿ ಕ್ರಾಂತಿಕಾರಿ ಮತ್ತು ವ್ಯಕ್ತಿಗಳು ಮತ್ತು ಎಲ್ಲಾ ಮಾನವೀಯತೆಯ ಜೀವನವನ್ನು ಬದಲಾಯಿಸಿದವು. ವೆಬ್‌ನ ಜೀವನದಲ್ಲಿ, ಅಥವಾ ಹೆಚ್ಚು ನಿರ್ದಿಷ್ಟವಾಗಿ, ಲೇಔಟ್ ವಿನ್ಯಾಸಕರ ಜೀವನದಲ್ಲಿ, ಮೂರು ನಾವೀನ್ಯತೆಗಳು ತಮ್ಮ ಜೀವನವನ್ನು ಬದಲಾಯಿಸಿದವು ಮತ್ತು ಅದನ್ನು ಆಮೂಲಾಗ್ರವಾಗಿ ಬದಲಾಯಿಸಿದವು. ಮೊದಲನೆಯದು, ಸಹಜವಾಗಿ, ಕ್ಯಾಸ್ಕೇಡಿಂಗ್ ಸ್ಟೈಲ್ ಶೀಟ್‌ಗಳು, ಆದರೆ ಅದು ವೆಬ್‌ನ ಆರಂಭಿಕ ದಿನಗಳಲ್ಲಿತ್ತು. ಎರಡನೆಯದು jquery, ಈಗ DOM ಮಾದರಿಯ ಮೂಲಕ ಪ್ರಯಾಣಿಸುವುದು ಸರಳ ಮತ್ತು ಅನುಕೂಲಕರವಾಗಿದೆ, ಜೊತೆಗೆವಿವಿಧ ಪರಿಣಾಮಗಳು . ಮತ್ತು ಮೂರನೆಯದಾಗಿ, ಇದು ಈಗಾಗಲೇ ಹೆಚ್ಚುಆಧುನಿಕ ಕಾಲದಲ್ಲಿ

ಸಾಸ್ ಅನುಮತಿಸುತ್ತದೆ

1 2 3 4 5 6

ಇದು ಪೋಷಕ ಆಯ್ಕೆಯನ್ನು ಪುನರಾವರ್ತಿಸುವುದನ್ನು ತಪ್ಪಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ ಮತ್ತು ಗುಂಪನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಹೆಚ್ಚು ಸುಲಭವಾಗುತ್ತದೆ

(ಅಂಶಗಳ ಪ್ರಮಾಣಿತ ಗೂಡುಕಟ್ಟುವಿಕೆಯನ್ನು ರದ್ದುಗೊಳಿಸಲಾಗಿದೆ). ಇದು ಸಾಕಷ್ಟು ಮೂಲಭೂತ ವಿಷಯವಾಗಿದೆ ಮತ್ತು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಬೇಕಾಗಿದೆ. ಕೆಲವು ಪ್ರಿಪ್ರೊಸೆಸರ್‌ಗೆ ಬದಲಾಯಿಸಿದ ಆರಂಭಿಕರು ಸ್ವಯಂ-ಉಲ್ಲೇಖವು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದಿಲ್ಲ ಮತ್ತು ಆಗಾಗ್ಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸದ ಕೋಡ್ ಅನ್ನು ಬರೆಯುತ್ತಾರೆ. ನೀವು ಇದನ್ನು ನೆನಪಿನಲ್ಲಿಟ್ಟುಕೊಳ್ಳಬೇಕು.

, ಇದು BEM ಆಗಿದೆ. ಒಮ್ಮೆ ತಂಪಾದ ಏನನ್ನಾದರೂ ಬರೆಯಲು ಒಪ್ಪಿಕೊಳ್ಳಿ, ತದನಂತರ ಯಾವುದೇ ಸಮಸ್ಯೆಗಳಿಲ್ಲದೆ ವಿವಿಧ ಯೋಜನೆಗಳಲ್ಲಿ ಅದನ್ನು ಬಳಸಿ. ಕೆಳಗಿನ ಸಾಸ್ ಭಾಷಾ ರಚನೆಯು ಇದಕ್ಕೆ ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ.

&-ಸೈಡ್‌ಬಾರ್ (

ರೆಡ್ಬಾಕ್ಸ್ (

1 2 3 4 5 6

ಇದು ಪೋಷಕ ಆಯ್ಕೆಯನ್ನು ಪುನರಾವರ್ತಿಸುವುದನ್ನು ತಪ್ಪಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ ಮತ್ತು ಗುಂಪನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಹೆಚ್ಚು ಸುಲಭವಾಗುತ್ತದೆ

(ಅಂಶಗಳ ಪ್ರಮಾಣಿತ ಗೂಡುಕಟ್ಟುವಿಕೆಯನ್ನು ರದ್ದುಗೊಳಿಸಲಾಗಿದೆ). ಇದು ಸಾಕಷ್ಟು ಮೂಲಭೂತ ವಿಷಯವಾಗಿದೆ ಮತ್ತು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಬೇಕಾಗಿದೆ. ಕೆಲವು ಪ್ರಿಪ್ರೊಸೆಸರ್‌ಗೆ ಬದಲಾಯಿಸಿದ ಆರಂಭಿಕರು ಸ್ವಯಂ-ಉಲ್ಲೇಖವು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದಿಲ್ಲ ಮತ್ತು ಆಗಾಗ್ಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸದ ಕೋಡ್ ಅನ್ನು ಬರೆಯುತ್ತಾರೆ. ನೀವು ಇದನ್ನು ನೆನಪಿನಲ್ಲಿಟ್ಟುಕೊಳ್ಳಬೇಕು.

ಗಡಿ: 1px ಘನ ಕೆಂಪು;

&-ಸೈಡ್‌ಬಾರ್ (

#ಮುಖ್ಯ ಅಡ್ಡಪಟ್ಟಿ ( ಹೂಡಿಕೆ ಮಾಡಿದೆನಾನು ದಸ್ತಾವೇಜನ್ನು ಒಂದು ಉದಾಹರಣೆ ತೆಗೆದುಕೊಂಡಿತು. ನಿಜ ಜೀವನದಲ್ಲಿ, BEM ಪ್ರಕಾರ, ಇದು id-ik ಆಗಿರುವುದಿಲ್ಲ ಎ.ಮುಖ್ಯ

27.07.2017

ಈ SASS ಟ್ಯುಟೋರಿಯಲ್‌ಗಳ ಸರಣಿಯು ಆರಂಭಿಕರಿಗಾಗಿ ಮತ್ತು ಅನುಭವಿ ಡೆವಲಪರ್‌ಗಳಿಗಾಗಿ ಉದ್ದೇಶಿಸಲಾಗಿದೆ. ಇದು ನಾಲ್ಕು ಭಾಗಗಳ ಟ್ಯುಟೋರಿಯಲ್‌ನಲ್ಲಿ ಮೊದಲನೆಯದು ಅದು ನಿಮ್ಮನ್ನು ಪ್ರಿಪ್ರೊಸೆಸರ್ ಮೂಲಕ ನಡೆಸುತ್ತದೆ, ಅದನ್ನು ಸ್ಥಾಪಿಸುತ್ತದೆ ಮತ್ತು ಅದರ ಕೆಲವು ವೈಶಿಷ್ಟ್ಯಗಳ ಬಗ್ಗೆ ಕಲಿಯುತ್ತದೆ.

SASS ಎಂದರೇನು?

SASS (ವಾಕ್ಯಾತ್ಮಕವಾಗಿ ಅದ್ಭುತ ಶೈಲಿಯ ಹಾಳೆಗಳು)- ಅತ್ಯಂತ ಜನಪ್ರಿಯವಾದದ್ದು. ಇದು CSS ಕಾರ್ಯಗಳ ಒಂದು ಸೆಟ್ ಆಗಿದ್ದು ಅದು ನಿಮಗೆ ವೇಗವಾಗಿ ಮತ್ತು ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಕೋಡ್ ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ. SASS ಫೈರ್‌ಫಾಕ್ಸ್ ಫೈರ್‌ಬಗ್‌ನೊಂದಿಗೆ ಏಕೀಕರಣವನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ. ವೇರಿಯಬಲ್‌ಗಳು, ನೆಸ್ಟೆಡ್ ಸ್ಟೈಲ್‌ಗಳು ಮತ್ತು ಆನುವಂಶಿಕ ಆಯ್ಕೆಗಳನ್ನು ರಚಿಸಲು SassScript ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

SASS ಕಡಿಮೆ (ಕೆಲವೊಮ್ಮೆ ಗಮನಾರ್ಹವಾಗಿ ಕಡಿಮೆ) CSS ಕೋಡ್ ಬರೆಯಲು ತ್ವರಿತವಾಗಿ ಮತ್ತು ಸುಲಭಗೊಳಿಸುತ್ತದೆ ಮತ್ತು ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಭಾಷೆಯಂತೆ ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ನಿರ್ವಹಿಸುತ್ತದೆ (ಇದು ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಭಾಷೆಯಲ್ಲ, ರೀತಿಯಲ್ಲಿ). ಈ ಉತ್ತಮ ಸಾಧನಯಾವುದೇ ಡಿಸೈನರ್ ಮತ್ತು ಡೆವಲಪರ್‌ಗಳ ವರ್ಕ್‌ಫ್ಲೋ ಅನ್ನು ವೇಗಗೊಳಿಸುವಂತಹ ಹೆಚ್ಚು ಕ್ರಿಯಾತ್ಮಕ ಮತ್ತು ಕ್ಲೀನರ್ CSS ಅನ್ನು ಬರೆಯಲು.

ನಿಮಗೆ ಸಾಸ್ ಏಕೆ ಬೇಕು?

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್, ಮೆಟೀರಿಯಲೈಸ್ ಮತ್ತು ಫೌಂಡೇಶನ್ ಸೇರಿದಂತೆ ಹೆಚ್ಚಿನ ಮುಂಭಾಗದ ಚೌಕಟ್ಟುಗಳನ್ನು ಈ ಅತ್ಯುತ್ತಮ ಪ್ರಿಪ್ರೊಸೆಸರ್‌ನೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾಗಿದೆ. SASS ಅನ್ನು ತಿಳಿದುಕೊಳ್ಳುವುದು ಈ ಚೌಕಟ್ಟುಗಳ ಹೆಚ್ಚಿನ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಬಳಸಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ.

SASS ಅನ್ನು ಹೇಗೆ ಬಳಸುವುದು?

SASS ಅನ್ನು ಬಳಸಲು ಪ್ರಾರಂಭಿಸಲು ಸುಲಭ ಮತ್ತು ತ್ವರಿತಗೊಳಿಸುವ ಹಲವು ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿವೆ: ಕೋಡ್‌ಕಿಟ್, ಕಂಪಾಸ್, ಕೋಲಾ, ಇತ್ಯಾದಿ. ಟ್ಯುಟೋರಿಯಲ್‌ನ ಇತರ ಭಾಗಗಳಲ್ಲಿ ನೀವು ಅವರ ಬಗ್ಗೆ ಕಲಿಯುವಿರಿ. ಈ ಅಧ್ಯಾಯದಲ್ಲಿ, ನಾವು ಕಂಪ್ಯೂಟರ್‌ನಲ್ಲಿ SASS ಅನ್ನು ಚಲಾಯಿಸಲು ಅಗತ್ಯವಿರುವ ಯಾವುದೇ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಅಥವಾ ಸಾಧನಗಳನ್ನು ಬಳಸುವುದಿಲ್ಲ. ಆಪರೇಟಿಂಗ್ ಸಿಸ್ಟಮ್ ಬಗ್ಗೆ ನೀವು ಚಿಂತಿಸಬೇಕಾಗಿಲ್ಲ ಏಕೆಂದರೆ ಎಲ್ಲಾ ಬಳಕೆದಾರರಿಗೆ ಎಲ್ಲವೂ ಸ್ಪಷ್ಟವಾಗಿರುತ್ತದೆ.

SASS ಅನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ ಮತ್ತು ಸ್ಥಾಪಿಸಿ

ಈಗಾಗಲೇ ರೂಬಿ ಸ್ಥಾಪಿಸಿರುವ ಗಣಕದಲ್ಲಿ ಮಾತ್ರ ನೀವು SASS ಅನ್ನು ಸ್ಥಾಪಿಸಬಹುದು:

• ರೂಬಿ ಮ್ಯಾಕ್‌ನಲ್ಲಿ ಪೂರ್ವ-ಸ್ಥಾಪಿತವಾಗಿದೆ, ಆದ್ದರಿಂದ ನೀವು ಈಗಿನಿಂದಲೇ ಸಾಸ್ ಮ್ಯಾಕಿಂತೋಷ್ ಅನ್ನು ಸ್ಥಾಪಿಸಬಹುದು;
• ನೀವು ವಿಂಡೋಸ್‌ನಲ್ಲಿದ್ದರೆ, ನೀವು ಮೊದಲು ರೂಬಿಯನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಬೇಕಾಗುತ್ತದೆ;
• Linux ನಲ್ಲಿ ರೂಬಿ ಅನ್ನು ಆಪ್ಟ್ ಪ್ಯಾಕೇಜ್ ಮ್ಯಾನೇಜರ್, rbenv ಅಥವಾ rvm ಮೂಲಕ ಡೌನ್‌ಲೋಡ್ ಮಾಡಬಹುದು.

ರೂಬಿ ಅನ್ನು ಒಮ್ಮೆ ಸ್ಥಾಪಿಸಿದ ನಂತರ, ನೀವು ನಿಮ್ಮ ಗಣಕದಲ್ಲಿ SASS ಅನ್ನು ಸ್ಥಾಪಿಸಬಹುದು. ರೂಬಿ ಕಮಾಂಡ್ ಲೈನ್ ಅನ್ನು ತೆರೆಯೋಣ ಮತ್ತು ನಿಮ್ಮ ಸಿಸ್ಟಂನಲ್ಲಿ SASS ಅನ್ನು ಸ್ಥಾಪಿಸೋಣ:

ಜೆಮ್ ಇನ್ಸ್ಟಾಲ್ ಸಾಸ್

ಮೇಲಿನ ಆಜ್ಞೆಯು ಕಾರ್ಯನಿರ್ವಹಿಸದಿದ್ದರೆ, ನೀವು sudo ಆಜ್ಞೆಯನ್ನು ಬಳಸಬೇಕಾಗಬಹುದು:

ಸುಡೋ ಜೆಮ್ ಇನ್ಸ್ಟಾಲ್ ಸಾಸ್

ನೀವು SASS ಆವೃತ್ತಿಯನ್ನು ಪರಿಶೀಲಿಸಲು ಬಯಸಿದರೆ ಈ ಕೆಳಗಿನ ಆಜ್ಞೆಯನ್ನು ಬಳಸಿ:

SASS ಅನ್ನು ಸ್ಥಾಪಿಸಲಾಗಿದೆ. ಪ್ರಾಜೆಕ್ಟ್ ಫೋಲ್ಡರ್ ಅನ್ನು ರಚಿಸೋಣ ಮತ್ತು ಅದನ್ನು ಸಾಸ್-ಬೇಸಿಕ್ ಎಂದು ಕರೆಯೋಣ. ರಚಿಸಿ ಮೂಲ htmlಕೆಳಗಿನ ಕೋಡ್‌ನೊಂದಿಗೆ ಫೈಲ್:

ನನ್ನ ಮೊದಲ SASS ಯೋಜನೆ

ಹಲೋ ಸ್ನೇಹಿತ ನಾನು SASS ಅನ್ನು ಕಲಿಯುತ್ತಿದ್ದೇನೆ ಮತ್ತು ಇದು ನಿಜವಾಗಿಯೂ ಅದ್ಭುತವಾಗಿದೆ.

ದೇಹ(ಪಠ್ಯ-ಜೋಡಣೆ: ಕೇಂದ್ರ; ) h1(ಬಣ್ಣ: #333; ) p(ಬಣ್ಣ: #666; )

ಈಗ ನೀವು ಆಜ್ಞಾ ಸಾಲಿನ / ಟರ್ಮಿನಲ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ಈ ಫೈಲ್ ಅನ್ನು ಕಂಪೈಲ್ ಮಾಡಬೇಕಾಗುತ್ತದೆ. ಅದೇ ಡೈರೆಕ್ಟರಿಯಲ್ಲಿ ಕಮಾಂಡ್ ಪ್ರಾಂಪ್ಟ್ ಅನ್ನು ತೆರೆಯೋಣ (ಸಾಮಾನ್ಯ ಕಮಾಂಡ್ ಪ್ರಾಂಪ್ಟ್ ಕಾರ್ಯನಿರ್ವಹಿಸದಿದ್ದರೆ ನೀವು ರೂಬಿ ಕಮಾಂಡ್ ಪ್ರಾಂಪ್ಟ್ ಅನ್ನು ಬಳಸಬೇಕಾಗಬಹುದು). ಕೆಳಗಿನವುಗಳನ್ನು ಟೈಪ್ ಮಾಡಿ ಮತ್ತು ಎಂಟರ್ ಒತ್ತಿರಿ:

Sass --watch style.scss:style.css

ಹೊಸ ಫೈಲ್‌ಗಳನ್ನು ರಚಿಸಲಾಗಿದೆ ಎಂದು ನೀವು ಗಮನಿಸಬಹುದು: style.css ಮತ್ತು style.css.map. .css ಫೈಲ್‌ನಂತೆ ನೀವು ಮ್ಯಾಪ್ ಫೈಲ್ ಅನ್ನು ಸ್ಪರ್ಶಿಸುವ ಅಗತ್ಯವಿಲ್ಲ ಎಂದು ಗಮನಿಸಬೇಕಾದ ಅಂಶವಾಗಿದೆ. ನೀವು ಯಾವುದೇ ಬದಲಾವಣೆಗಳನ್ನು ಮಾಡಲು ಬಯಸಿದರೆ, ನೀವು ಇದನ್ನು style.scss ಮೂಲಕ ಮಾಡಬಹುದು. ನೀವು ಪ್ರತಿ ಬಾರಿ ಶೈಲಿಗಳನ್ನು ಬದಲಾಯಿಸಿದಾಗ ಈ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಪುನರಾವರ್ತಿಸುವ ಅಗತ್ಯವಿಲ್ಲ. ನೀವು .scss ಫೈಲ್‌ಗೆ ಬದಲಾವಣೆಗಳನ್ನು ಮಾಡಿದಾಗ SASS ಸಂಕಲನವು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.

ಮುಂದಿನ ಅಧ್ಯಾಯದಲ್ಲಿ, ನಾವು SASS ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ನೋಡುತ್ತೇವೆ ಮತ್ತು ಅವು SASS ನಲ್ಲಿ ಏಕೆ ಹೆಚ್ಚು ಉಪಯುಕ್ತ ವೈಶಿಷ್ಟ್ಯವಾಗಿದೆ (ಮತ್ತು ಯಾವುದೇ ಇತರ CSS ಪ್ರಿಪ್ರೊಸೆಸರ್).

ಲೇಖನದ ಅನುವಾದ: ಸಾಸ್‌ಗೆ ಸಂಪೂರ್ಣ ಬಿಗಿನರ್ಸ್ ಗೈಡ್.
ಆಂಡ್ರ್ಯೂ ಚಾಕ್ಲಿ.

SASS ಎಂದರೇನು?

ಸಾಸ್ಎಂಬುದಕ್ಕೆ ಸಂಕ್ಷೇಪಣವಾಗಿದೆ ವಾಕ್ಯರಚನೆಯ ಅದ್ಭುತ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳು- ಲೋಹಭಾಷೆಯಲ್ಲಿ CSS ಆಧಾರಿತ, ಅವರ ಹೆಸರನ್ನು ಹೀಗೆ ಅನುವಾದಿಸಬಹುದು "ಅತ್ಯುತ್ತಮ ಸಿಂಟ್ಯಾಕ್ಸ್ನೊಂದಿಗೆ CSS", ಹ್ಯಾಂಪ್ಟನ್ ಕ್ಯಾಟ್ಲಿನ್ ವಿನ್ಯಾಸಗೊಳಿಸಿದ್ದಾರೆ.

ಇದು ರಚನೆಯ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಸರಳಗೊಳಿಸುವ ಸಾಧನವಾಗಿದೆ ಸಿಎಸ್ಎಸ್ ಶೈಲಿಗಳು, ಇದು ಕೋಡ್ ಅನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸುವ ಮತ್ತು ತರುವಾಯ ನಿರ್ವಹಿಸುವ ಕಾರ್ಯವನ್ನು ಹೆಚ್ಚು ಸರಳಗೊಳಿಸುತ್ತದೆ.

ಉದಾಹರಣೆಗೆ, ನೀವು ಎಂದಾದರೂ, ನಿರ್ದಿಷ್ಟ ನಿರ್ದಾಕ್ಷಿಣ್ಯ ಕ್ಲೈಂಟ್‌ಗೆ ಸೇವೆ ಸಲ್ಲಿಸುತ್ತಿರುವಾಗ, ಅದನ್ನು ಇನ್ನೊಂದಕ್ಕೆ ಬದಲಾಯಿಸಲು ನಿರ್ದಿಷ್ಟ HEX ಬಣ್ಣದ ಮೌಲ್ಯವನ್ನು ಕಂಡುಹಿಡಿಯಲು ಶೈಲಿಯ ಫೈಲ್‌ನ ಸಂಪೂರ್ಣ ವಿಷಯಗಳ ಮೂಲಕ ಹೋಗಬೇಕೇ? ಅಥವಾ ಬಹು-ಕಾಲಮ್ ಟೆಂಪ್ಲೇಟ್‌ಗಾಗಿ ಕಾಲಮ್ ಅಗಲವನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡಲು ಯಾವಾಗಲೂ ಕೈಯಲ್ಲಿಲ್ಲದ ಕ್ಯಾಲ್ಕುಲೇಟರ್ ಅಪ್ಲಿಕೇಶನ್‌ಗೆ ತಿರುಗುವುದೇ?

ಈ ದಿನಚರಿಯಿಂದ ನಿಮ್ಮನ್ನು ನಿವಾರಿಸಲು SASS ತನ್ನ ವಿಲೇವಾರಿಯಲ್ಲಿ ಉಪಕರಣಗಳನ್ನು ಹೊಂದಿದೆ. ಇವು ಸೇರಿವೆ ಅಸ್ಥಿರ, ಹ್ಯಾಗ್ಫಿಶ್, ಗೂಡುಕಟ್ಟುವಮತ್ತು ಸೆಲೆಕ್ಟರ್ ಆನುವಂಶಿಕತೆ.

ಮೂಲಭೂತವಾಗಿ, SASS ಕೋಡ್ CSS ಗೆ ಹೋಲುತ್ತದೆ, ಆದರೆ ಮೂಲಭೂತವಾಗಿದೆ ವಿಶಿಷ್ಟ ಲಕ್ಷಣಪ್ರತಿ ಆಸ್ತಿ-ಮೌಲ್ಯದ ಜೋಡಿಯ ನಂತರ ಅರ್ಧವಿರಾಮ ಚಿಹ್ನೆಯ ಅನುಪಸ್ಥಿತಿ ಮತ್ತು ಸುರುಳಿಯಾಕಾರದ ಕಟ್ಟುಪಟ್ಟಿಗಳ ಅನುಪಸ್ಥಿತಿಯು ತಕ್ಷಣವೇ ಗಮನಿಸಬಹುದಾಗಿದೆ.

ಕೆಳಗಿನ CSS ಕೋಡ್ ಅನ್ನು ಉದಾಹರಣೆಯಾಗಿ ತೆಗೆದುಕೊಳ್ಳೋಣ:

#ಗಗನಚುಂಬಿ_ಜಾಹೀರಾತು
{
ಪ್ರದರ್ಶನ: ಬ್ಲಾಕ್;
ಅಗಲ: 120px;
ಎತ್ತರ: 600px;
}

#ಲೀಡರ್‌ಬೋರ್ಡ್_ಜಾಹೀರಾತು
{
ಪ್ರದರ್ಶನ: ಬ್ಲಾಕ್;
ಅಗಲ: 728px;
ಎತ್ತರ: 90px;
}

ಇದು ಈ SASS ಗೆ ಸಮನಾಗಿರುತ್ತದೆ:

#ಗಗನಚುಂಬಿ_ಜಾಹೀರಾತು
ಪ್ರದರ್ಶನ: ಬ್ಲಾಕ್
ಅಗಲ: 120px
ಎತ್ತರ: 600px

#ಲೀಡರ್‌ಬೋರ್ಡ್_ಜಾಹೀರಾತು
ಪ್ರದರ್ಶನ: ಬ್ಲಾಕ್
ಅಗಲ: 728px
ಎತ್ತರ: 90px

ಕೋಡ್ ತುಣುಕುಗಳ ಗೂಡುಕಟ್ಟುವಿಕೆಯನ್ನು ಸೂಚಿಸಲು SASS ಎರಡು ಸ್ಥಳಗಳ ಅಂತರವನ್ನು (ಮುಂದಿನ ಸಾಲಿನ ಆರಂಭದಲ್ಲಿ ಇಂಡೆಂಟೇಶನ್) ಬಳಸುತ್ತದೆ. ( *ಕೊನೆಯ ತುಣುಕಿನಲ್ಲಿ, ಸ್ಪಷ್ಟತೆಗಾಗಿ, ನಾನು ಈ ಸ್ಥಳಗಳನ್ನು ಕೆಂಪು ಹಿನ್ನೆಲೆಯೊಂದಿಗೆ ಹೈಲೈಟ್ ಮಾಡಿದ್ದೇನೆ.)

ಈಗ ನಾವು SASS ಕೋಡ್ ಅನ್ನು ಹೇಗೆ ರಚಿಸಲಾಗಿದೆ ಎಂಬ ಕಲ್ಪನೆಯನ್ನು ಹೊಂದಿದ್ದೇವೆ, ಅದನ್ನು ಮಾಡುವ ಸಮಸ್ಯೆಗಳನ್ನು ನೋಡೋಣ ಅತ್ಯುತ್ತಮ.

ಅಸ್ಥಿರ.

SASS ನಲ್ಲಿ, ವೇರಿಯೇಬಲ್ ಅನ್ನು ಘೋಷಿಸಲು ನೀವು $ ಚಿಹ್ನೆಯೊಂದಿಗೆ ಅದರ ಹೆಸರನ್ನು ಮೊದಲು ಮಾಡಬೇಕು. ಮತ್ತು ನಿಮ್ಮ ವೇರಿಯೇಬಲ್‌ನ ಹೆಸರು, ಹೇಳುವುದಾದರೆ, ಕೆಂಪು , ನಂತರ ಕೊಲೊನ್ ನಂತರ ನಾವು ಅದಕ್ಕೆ ಅನುಗುಣವಾದ ಕೆಳಗಿನ ಮೌಲ್ಯವನ್ನು ಸೂಚಿಸಬಹುದು:

SASS ಈ ರೀತಿಯ ವೇರಿಯಬಲ್‌ಗಳ ಮೌಲ್ಯಗಳನ್ನು ಮಾರ್ಪಡಿಸಲು ಬಳಸಬಹುದಾದ ಗಾಢಗೊಳಿಸುವಿಕೆ ಮತ್ತು ಹಗುರಗೊಳಿಸುವಿಕೆಯಂತಹ ಅಂತರ್ನಿರ್ಮಿತ ಕಾರ್ಯಗಳನ್ನು ಹೊಂದಿದೆ.

ಆದ್ದರಿಂದ, ಕೆಳಗಿನ ಉದಾಹರಣೆಯಲ್ಲಿ, ಪ್ಯಾರಾಗ್ರಾಫ್‌ಗಳಲ್ಲಿನ ಫಾಂಟ್ ಬಣ್ಣವು ಕೆಂಪು ಬಣ್ಣದ್ದಾಗಿರುತ್ತದೆ, ಆದರೆ h1 ಶೀರ್ಷಿಕೆಗಳಲ್ಲಿ ಬಳಸುವುದಕ್ಕಿಂತ ಗಾಢವಾಗಿರುತ್ತದೆ:

$ಕೆಂಪು: #FF4848
$fontsize: 12px
h1
ಬಣ್ಣ: $ಕೆಂಪು

ಪು
ಬಣ್ಣ: ಗಾಢಗೊಳಿಸಿ ($ಕೆಂಪು, 10%)

ವೇರಿಯೇಬಲ್‌ಗಳೊಂದಿಗೆ, ಬಳಸಿದ ಮೌಲ್ಯಗಳು ಒಂದೇ ರೀತಿಯ ಡೇಟಾ ಪ್ರಕಾರದವರೆಗೆ ನೀವು ಸಂಕಲನ ಮತ್ತು ವ್ಯವಕಲನದಂತಹ ಅಂಕಗಣಿತದ ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು ಮಾಡಬಹುದು. ಉದಾಹರಣೆಗೆ, ನಾವು ಗಾಢವಾದ ಛಾಯೆಯನ್ನು ಅನ್ವಯಿಸಲು ಬಯಸಿದರೆ, ಆಗ ನಾವು ಮಾಡಬೇಕಾಗಿರುವುದು ಕೋಡ್‌ನಲ್ಲಿ ಈಗಾಗಲೇ ಬಳಸಿದ ಬಣ್ಣ ಮೌಲ್ಯದಿಂದ ಕಳೆಯುವುದು, ವೇರಿಯೇಬಲ್‌ನಲ್ಲಿ ಸಂಗ್ರಹಿಸಲಾಗಿದೆ, #101 ಗೆ ಸಮಾನವಾದ ಸಣ್ಣ ಹೆಕ್ಸಾಡೆಸಿಮಲ್ HEX ಮೌಲ್ಯ. ಫಾಂಟ್ ಗಾತ್ರದ ಮೌಲ್ಯವನ್ನು ಬದಲಾಯಿಸಲು ಅಗತ್ಯವಾದಾಗ ಇದು ಅನ್ವಯಿಸುತ್ತದೆ, ಇದನ್ನು 10 ಪಿಕ್ಸೆಲ್‌ಗಳಿಂದ ಹೆಚ್ಚಿಸಿ, ಇದಕ್ಕಾಗಿ ನಾವು ಕಾಣೆಯಾದ ಪಿಕ್ಸೆಲ್‌ಗಳನ್ನು ಸೇರಿಸುತ್ತೇವೆ:

p.ಸಂಕಲನ_ಮತ್ತು_ವ್ಯವಕಲನ
ಬಣ್ಣ: $ಕೆಂಪು - #101
ಫಾಂಟ್ ಗಾತ್ರ: $fontsize + 10px

ಗೂಡುಕಟ್ಟುವ.

SASS ನಲ್ಲಿ ಎರಡು ರೀತಿಯ ಗೂಡುಕಟ್ಟುವಿಕೆಗಳಿವೆ.

ಆಯ್ಕೆದಾರರ ಗೂಡುಕಟ್ಟುವ.

ಇದು ಮೊದಲ ಗೂಡುಕಟ್ಟುವ ವಿಧವಾಗಿದೆ, ಇದು ಬಳಸಿದಂತೆಯೇ ಇರುತ್ತದೆ HTML ರಚನೆಕೋಡ್:

$fontsize: 12px

ಸ್ಪೀಕರ್
.ಹೆಸರು
ಫಾಂಟ್:
ತೂಕ: ದಪ್ಪ
ಗಾತ್ರ: $fontsize + 10px
.ಸ್ಥಾನ
ಫಾಂಟ್:
ಗಾತ್ರ: $fontsize

ನೀವು ಪರಿಣಾಮವಾಗಿ CSS ಕೋಡ್ ಅನ್ನು ನೋಡಿದರೆ, ಯಾವುದೇ ಕಾಮೆಂಟ್ಗಳು ಅನಗತ್ಯವಾಗಿರುತ್ತವೆ. .ಸ್ಪೀಕರ್ ವರ್ಗದೊಳಗೆ .ಹೆಸರು ವರ್ಗವನ್ನು ಗೂಡುಕಟ್ಟುವ ಮೂಲಕ ( * ಅದೇ ರೀತಿಯಲ್ಲಿ - ಮುಂದಿನ ಸಾಲಿನ ಆರಂಭದಲ್ಲಿ ಎರಡು ಸ್ಥಳಗಳನ್ನು ಬಳಸಿ) CSS ಸೆಲೆಕ್ಟರ್ .speaker.name ಅನ್ನು ರಚಿಸಲಾಗಿದೆ. ಇದು ಈ ಕೆಳಗಿನ ವರ್ಗದ ಹೆಸರು .ಸ್ಥಾನಕ್ಕೆ ಅನ್ವಯಿಸುತ್ತದೆ, ಮೊದಲ ಸೆಲೆಕ್ಟರ್‌ಗೆ ಗುಣಲಕ್ಷಣಗಳ ಘೋಷಣೆಯ ನಂತರ ಇದೆ, ಇದು ಎರಡನೇ ಸೆಲೆಕ್ಟರ್ .speaker.position ನ ಗೂಡುಕಟ್ಟುವಿಕೆಗೆ ಕಾರಣವಾಗುತ್ತದೆ:

ಸ್ಪೀಕರ್.ಹೆಸರು(
ಫಾಂಟ್-ತೂಕ: ದಪ್ಪ;
ಫಾಂಟ್ ಗಾತ್ರ: 22px; )
.speaker.position (
ಫಾಂಟ್ ಗಾತ್ರ: 12px; )

ಗುಣಲಕ್ಷಣಗಳ ಗೂಡುಕಟ್ಟುವ.

ಎರಡನೆಯ ವಿಧದ ಗೂಡುಕಟ್ಟುವು ಒಂದು ಪೂರ್ವಪ್ರತ್ಯಯದೊಂದಿಗೆ ಗುಣಲಕ್ಷಣಗಳನ್ನು ರಚಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ (* ಫಾಂಟ್-ಕುಟುಂಬ, ಫಾಂಟ್-ಗಾತ್ರ, ಫಾಂಟ್-ತೂಕ ಅಥವಾ ಗಡಿ-ಶೈಲಿ, ಗಡಿ-ಬಣ್ಣ, ಗಡಿ-ತ್ರಿಜ್ಯ ಇತ್ಯಾದಿ.):

$fontsize: 12px

ಸ್ಪೀಕರ್
.ಹೆಸರು
ಫಾಂಟ್:
ತೂಕ: ದಪ್ಪ
ಗಾತ್ರ: $fontsize + 10px
.ಸ್ಥಾನ
ಫಾಂಟ್:
ಗಾತ್ರ: $fontsize

ಮೇಲಿನ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು ಪೋಷಕ, ಸಾರ್ವತ್ರಿಕ ಆಸ್ತಿ ಫಾಂಟ್‌ನ ಘೋಷಣೆಯನ್ನು ಬಳಸುತ್ತೇವೆ: ಮತ್ತು ಎರಡು-ಸ್ಪೇಸ್ ಇಂಡೆಂಟೇಶನ್ ನಂತರ ಹೊಸ ಸಾಲಿನಲ್ಲಿ ನಾವು ಆಸ್ತಿಯ ಎರಡನೇ ಭಾಗವನ್ನು ಸೂಚಿಸುತ್ತೇವೆ, ಇದು ಸಾಮಾನ್ಯವಾಗಿ ಹೈಫನ್ ನಂತರ ಕಂಡುಬರುತ್ತದೆ.

ಅಂದರೆ, ನಾವು ಫಾಂಟ್ ಅನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಿದರೆ: ಆಸ್ತಿ, ಆನ್ ಮುಂದಿನ ಸಾಲುಎರಡು ಅಂತರಗಳ ನಂತರ ತೂಕ: ಆಸ್ತಿ, ನಂತರ ಫಲಿತಾಂಶವು ಪರಿಚಿತ ಫಾಂಟ್-ತೂಕದ ಆಸ್ತಿಗೆ ಸಮನಾಗಿರುತ್ತದೆ.

ಸ್ಪೀಕರ್.ಹೆಸರು(
ಫಾಂಟ್-ತೂಕ: ದಪ್ಪ;
ಫಾಂಟ್ ಗಾತ್ರ: 22px; )
.speaker.position (
ಫಾಂಟ್ ಗಾತ್ರ: 12px; )

ಮಾಡ್ಯೂಲ್ ಎಲ್ಲಾ ಹೈಫನ್-ಒಳಗೊಂಡಿರುವ ಗುಣಲಕ್ಷಣಗಳಿಗೆ ಬೆಂಬಲವನ್ನು ಒದಗಿಸುತ್ತದೆ.

ನಿಮ್ಮ CSS ಕೋಡ್ ಅನ್ನು ಸಂಘಟಿಸಲು ಮತ್ತು ರಚನೆ ಮಾಡಲು ಮತ್ತು ಅನಗತ್ಯ ಪುನರಾವರ್ತನೆಯನ್ನು ತಪ್ಪಿಸಲು ಈ ರೀತಿಯ ಗೂಡುಕಟ್ಟುವಿಕೆ ಉತ್ತಮ ಮಾರ್ಗವಾಗಿದೆ. ( *ಶುಷ್ಕ- "ನಿಮ್ಮನ್ನು ಪುನರಾವರ್ತಿಸಬೇಡಿ" - "ನಿಮ್ಮನ್ನು ಪುನರಾವರ್ತಿಸಬೇಡಿ." ಯಾವಾಗ ಸಂದರ್ಭಗಳು CSS ಫಾರ್ಮ್ಯಾಟಿಂಗ್ಕೆಲವು ಅಂಶಗಳು, ಅವುಗಳ ಶೈಲಿಗಳನ್ನು ಪುನರಾವರ್ತಿಸಲಾಗುತ್ತದೆ ಮತ್ತು/ಅಥವಾ ಬೇರೆಡೆ ಮರುವ್ಯಾಖ್ಯಾನಿಸಲಾಗುತ್ತದೆ, ಕೋಡ್ ಅನ್ನು ಓದಲು ಮತ್ತು ನಿರ್ವಹಿಸಲು ಕಷ್ಟವಾಗುತ್ತದೆ).

ಹ್ಯಾಗ್ಫಿಶ್.

SASS ನ ಮತ್ತೊಂದು ಉತ್ತಮ ವೈಶಿಷ್ಟ್ಯವೆಂದರೆ ಹ್ಯಾಗ್ಫಿಶ್.

ಮಿಕ್ಸಿನ್‌ಗಳು SASS ಕೋಡ್‌ನ ಸಂಪೂರ್ಣ ತುಣುಕುಗಳನ್ನು ಮರುಬಳಕೆ ಮಾಡಲು ಮತ್ತು ಅಗತ್ಯವಿದ್ದರೆ ಅವರಿಗೆ ವಾದಗಳನ್ನು ರವಾನಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಮತ್ತು ಮುಖ್ಯವಾಗಿ, ನೀವು ಅವರ ಮೂಲ ಮೌಲ್ಯಗಳನ್ನು ಸಹ ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು.

ಮಿಕ್ಸಿನ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು, SASS ನಲ್ಲಿ ವಿಶೇಷವಾಗಿ ಕಾಯ್ದಿರಿಸಿದ ಯಾವುದನ್ನಾದರೂ ಬಳಸಿ ಕೀವರ್ಡ್@mixin , ನೀವು ಆಯ್ಕೆ ಮಾಡಿದ ಮಿಕ್ಸಿನ್ ಹೆಸರಿನ ನಂತರ. ವಾದಗಳ ಅಗತ್ಯವಿದ್ದರೆ, ಅವುಗಳನ್ನು ಆವರಣಗಳಲ್ಲಿ ಪಟ್ಟಿ ಮಾಡಿ. ಮಿಕ್ಸಿನ್ ಅನ್ನು ಕೊಲೊನ್‌ನಿಂದ ಬೇರ್ಪಡಿಸಿದಾಗ ವಾದದ ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಲಾಗುತ್ತದೆ. ( *ಬೇರೆ ರೀತಿಯಲ್ಲಿ ಹೇಳುವುದಾದರೆ, ಮಿಕ್ಸಿನ್‌ಗಳು CSS ಕಾರ್ಯಗಳಾಗಿವೆ.)

ಮಿಕ್ಸಿನ್‌ಗಳನ್ನು ಬಳಸುವ ವಿಧಾನವು ತುಂಬಾ ಸರಳವಾಗಿದೆ - @include ಕೀವರ್ಡ್ ನಂತರ, ಬಯಸಿದ ಮಿಕ್ಸಿನ್‌ನ ಹೆಸರನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಿ ಮತ್ತು ಅಗತ್ಯ ನಿಯತಾಂಕಗಳನ್ನು ಯಾವುದಾದರೂ ಇದ್ದರೆ, ಆವರಣಗಳಲ್ಲಿ ಪಟ್ಟಿ ಮಾಡಿ.

ಕೆಳಗಿನ ಉದಾಹರಣೆಯನ್ನು ನೋಡೋಣ:

@mixin ಗಡಿ-ತ್ರಿಜ್ಯ ($ ಮೊತ್ತ: 5px) /* ಮಿಕ್ಸಿನ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ */
-moz-ಬಾರ್ಡರ್-ತ್ರಿಜ್ಯ: $ ಮೊತ್ತ
-ವೆಬ್ಕಿಟ್-ಬಾರ್ಡರ್-ತ್ರಿಜ್ಯ: $ ಮೊತ್ತ
ಗಡಿ ತ್ರಿಜ್ಯ: $ ಮೊತ್ತ

h1 /* ಮಿಕ್ಸಿನ್ ಬಳಸಿ */
@include ಗಡಿ-ತ್ರಿಜ್ಯ(2px)

ಸ್ಪೀಕರ್
@ಅಡಿಗೆ-ತ್ರಿಜ್ಯವನ್ನು ಸೇರಿಸಿ

ಈ SASS, ಸಂಕಲನದ ನಂತರ, ಕೆಳಗಿನ CSS ಕೋಡ್‌ಗೆ ಪರಿವರ್ತಿಸಲಾಗುತ್ತದೆ:

h1 (
-moz-ಬಾರ್ಡರ್-ತ್ರಿಜ್ಯ: 2px;
-ವೆಬ್ಕಿಟ್-ಬಾರ್ಡರ್-ತ್ರಿಜ್ಯ: 2px;
ಗಡಿ ತ್ರಿಜ್ಯ: 2x; )

ಸ್ಪೀಕರ್ (
-moz-ಗಡಿ-ತ್ರಿಜ್ಯ: 5px;
-ವೆಬ್ಕಿಟ್-ಬಾರ್ಡರ್-ತ್ರಿಜ್ಯ: 5px;
ಗಡಿ ತ್ರಿಜ್ಯ: 5px; )

h1 ಹೆಡರ್‌ಗಾಗಿ ನಾವು ಗಡಿ ಮೂಲೆಯ ತ್ರಿಜ್ಯದ ಮೌಲ್ಯವನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ್ದೇವೆ, ಆದರೆ ವರ್ಗದ ಹೆಸರಿನ ಅಂಶಕ್ಕಾಗಿ .ಸ್ಪೀಕರ್ ನಾವು ಇದನ್ನು ಮಾಡಿಲ್ಲ, ಆದ್ದರಿಂದ 5px ನ ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವನ್ನು ತೆಗೆದುಕೊಳ್ಳಲಾಗಿದೆ.

ಸೆಲೆಕ್ಟರ್ ಆನುವಂಶಿಕತೆ.

ಇನ್ನೊಂದು ಅತ್ಯುತ್ತಮ SASS ಸಿಂಟ್ಯಾಕ್ಸ್‌ನ ವೈಶಿಷ್ಟ್ಯವೆಂದರೆ ಇತರ ಆಯ್ಕೆಗಾರರಿಗೆ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಎಲ್ಲಾ ಶೈಲಿಗಳನ್ನು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯುವ ಆಯ್ಕೆದಾರರ ಸಾಮರ್ಥ್ಯ. ಈ ವೈಶಿಷ್ಟ್ಯದ ಪ್ರಯೋಜನವನ್ನು ಪಡೆಯಲು, ನೀವು @extend ಕೀವರ್ಡ್ ಅನ್ನು ಬಳಸಬೇಕು, ಅದರ ನಂತರ ನೀವು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯಲು ಬಯಸುವ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಆಯ್ಕೆಮಾಡಬೇಕು:

h1
ಗಡಿ: 4px ಘನ #ff9aa9

ಸ್ಪೀಕರ್
@ವಿಸ್ತರಣೆ h1
ಗಡಿ ಅಗಲ: 2px

ಯಾವುದಕ್ಕೆ ಕಂಪೈಲ್ ಮಾಡಲಾಗುತ್ತದೆ:

h1,.ಸ್ಪೀಕರ್ (
ಗಡಿ: 4px ಘನ #ff9aa9; )

ಸ್ಪೀಕರ್ (
ಗಡಿ ಅಗಲ: 2px; )

(ಗಡಿ ಘೋಷಣೆಯನ್ನು ಗಮನಿಸಿ: 4px ಘನ #ff9aa9;)

.ಸ್ಪೀಕರ್ ಸೆಲೆಕ್ಟರ್‌ನೊಂದಿಗೆ ನಿಯಮದೊಳಗೆ ಪುನರಾವರ್ತನೆಯಾಗುವುದಿಲ್ಲ, ಬದಲಿಗೆ ಎರಡನೇ ಆಯ್ಕೆಯನ್ನು ಮೊದಲ ನಿಯಮಕ್ಕೆ ಸೇರಿಸಲಾಗುತ್ತದೆ. ಬೇರೆ ರೀತಿಯಲ್ಲಿ ಹೇಳುವುದಾದರೆ, ಯಾವುದೇ ಕೋಡ್ ನಕಲು ಇಲ್ಲ.

ಕ್ರಿಯೆಯಲ್ಲಿ SASS ಅನ್ನು ಪ್ರಯತ್ನಿಸಿ.

ಆನ್ಲೈನ್.

ನಿಮ್ಮ ಸ್ಥಳೀಯ ಕಂಪ್ಯೂಟರ್‌ನಲ್ಲಿ ಮಾಡ್ಯೂಲ್ ಅನ್ನು ಸ್ಥಾಪಿಸದೆಯೇ ನೀವು ಆನ್‌ಲೈನ್‌ನಲ್ಲಿ SASS ಅನ್ನು ಅನುಭವಿಸಬಹುದು. ಆದರೆ ನೀವು ಪ್ರಯೋಗವನ್ನು ಪ್ರಾರಂಭಿಸುವ ಮೊದಲು, ಪುಟದ ಕೆಳಭಾಗದಲ್ಲಿ, ಆಯ್ಕೆಯನ್ನು ಆರಿಸಿ.

"ಇಂಡೆಂಟೆಡ್ ಸಿಂಟ್ಯಾಕ್ಸ್"

PC ಯಲ್ಲಿ ಸ್ಥಾಪಿಸಲಾಗಿದೆ.

SASS ಸ್ವತಃ ರೂಬಿ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ನ ಅಪ್ಲಿಕೇಶನ್ (ರತ್ನ) ಆಗಿದೆ. ಆದ್ದರಿಂದ, ಅದನ್ನು ಸ್ಥಾಪಿಸಲು, ನೀವು ಮೊದಲು ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ಅನ್ನು ಸ್ಥಾಪಿಸದೆ ಮತ್ತು ಈ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಭಾಷೆ ರೂಬಿಜೆಮ್ಸ್‌ನ ಪ್ಯಾಕೇಜ್ ಮ್ಯಾನೇಜರ್ ಅನ್ನು ಸ್ಥಾಪಿಸದೆ ಮಾಡಲು ಸಾಧ್ಯವಿಲ್ಲ. ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ಮತ್ತು ಮ್ಯಾನೇಜರ್ ಅನ್ನು ಯಶಸ್ವಿಯಾಗಿ ಸ್ಥಾಪಿಸಿದ ನಂತರ, ಕನ್ಸೋಲ್‌ನಲ್ಲಿ ಈ ಕೆಳಗಿನ ಆಜ್ಞೆಯನ್ನು ಚಲಾಯಿಸಿ:

ಜೆಮ್ ಇನ್ಸ್ಟಾಲ್ ಸಾಸ್

ಕಮಾಂಡ್ ಲೈನ್ ಮೋಡ್‌ನಲ್ಲಿ ನಿಮ್ಮ SASS ಫೈಲ್‌ಗಳನ್ನು CSS ಫಾರ್ಮ್ಯಾಟ್ ಫೈಲ್‌ಗಳಾಗಿ ಪರಿವರ್ತಿಸಲು SASS ಮಾಡ್ಯೂಲ್ ಅನ್ನು ಸಾಧನವಾಗಿ ಬಳಸಬಹುದು.

ಇದನ್ನು ಮಾಡಬಹುದು, ಉದಾಹರಣೆಗೆ, ಈ ಕೆಳಗಿನ ಆಜ್ಞೆಯನ್ನು ನಮೂದಿಸುವ ಮೂಲಕ:

sass --watch sass_folder:stylesheets_folder

ಅಲ್ಲಿ sass_folder ಎಂಬುದು SASS ಫೈಲ್‌ಗಳನ್ನು ಹೊಂದಿರುವ ಫೋಲ್ಡರ್‌ಗೆ ಮಾರ್ಗವಾಗಿದೆ (ಅಂದರೆ, .sass ವಿಸ್ತರಣೆಯೊಂದಿಗೆ), ಮತ್ತು ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳು_ಫೋಲ್ಡರ್ ಎಂಬುದು ಫೋಲ್ಡರ್‌ಗೆ ಮಾರ್ಗವಾಗಿದೆ, ಇದರಲ್ಲಿ ಸಂಕಲನದ ನಂತರ ಪರಿಣಾಮವಾಗಿ CSS ಫೈಲ್‌ಗಳನ್ನು ಉಳಿಸಲಾಗುತ್ತದೆ. --watch ಆಜ್ಞೆಯು ಮಾಡ್ಯೂಲ್‌ಗೆ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಫೋಲ್ಡರ್‌ನಲ್ಲಿ ಯಾವುದೇ ಬದಲಾವಣೆಗಳನ್ನು ವೀಕ್ಷಿಸಲು ಹೇಳುತ್ತದೆ ಮತ್ತು ಯಾವುದಾದರೂ ಇದ್ದರೆ, ಅವುಗಳನ್ನು ಉಳಿಸಿದ ನಂತರ, ಮೂಲ .sass ಫೈಲ್‌ಗಳನ್ನು ಸಮಾನವಾದ .css ಫೈಲ್‌ಗಳಾಗಿ ಪರಿವರ್ತಿಸುತ್ತದೆ.

CSS ನಿಂದ SASS ಗೆ ಹಿಮ್ಮುಖ ಪರಿವರ್ತನೆ.

"ಸಾಸ್-ಕನ್ವರ್ಟ್" ಉಪಯುಕ್ತತೆಯನ್ನು ಬಳಸಿಕೊಂಡು ನಿಮ್ಮ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಯೋಜನೆಗಳಲ್ಲಿ ಬಳಸಿದ ಶೈಲಿಗಳನ್ನು ಈ ಸ್ವರೂಪಕ್ಕೆ ಪರಿವರ್ತಿಸುವ ಮೂಲಕ ನೀವು SASS ಅನ್ನು ಬಳಸಲು ಪ್ರಾರಂಭಿಸಬಹುದು. ಇದನ್ನು ಮಾಡಲು, ಆಜ್ಞಾ ಸಾಲಿನಲ್ಲಿ, ಅದರ ವಿಷಯಗಳನ್ನು ಪರಿವರ್ತಿಸಬೇಕಾದ ಫೋಲ್ಡರ್‌ಗೆ ಮಾರ್ಗವನ್ನು ನಮೂದಿಸಿ ( *ಅಂದರೆ, ಅವು ಇರುವ ಅಪೇಕ್ಷಿತ ಡೈರೆಕ್ಟರಿಗೆ ಹೋಗಿ ಮೂಲ ಕಡತಗಳು

) ನಂತರ ಮೇಲೆ ತಿಳಿಸಲಾದ ಉಪಯುಕ್ತತೆಯನ್ನು ರನ್ ಮಾಡಿ ಮತ್ತು ಕೆಳಗಿನ ನಿಯತಾಂಕಗಳೊಂದಿಗೆ ಅದನ್ನು ಒದಗಿಸಿ:

ಅಲ್ಲಿ -R ಫ್ಲ್ಯಾಗ್ ಕಾರ್ಯಾಚರಣೆಯನ್ನು ನಿರ್ವಹಿಸಲು ಪುನರಾವರ್ತಿತ ಮಾರ್ಗವನ್ನು ಸೂಚಿಸುತ್ತದೆ. ಮತ್ತು ಅದರ ನಂತರ ಮುಂದಿನ ಹಂತ. ಪರಿಣಾಮವಾಗಿ .sass ಫೈಲ್‌ಗಳನ್ನು ಪ್ರಸ್ತುತ ಡೈರೆಕ್ಟರಿಯಲ್ಲಿ ಉಳಿಸಲಾಗುತ್ತದೆ ಎಂದರ್ಥ. ()