Sass ನಲ್ಲಿ ಸ್ಟೈಲ್ ಇನ್ಹೆರಿಟೆನ್ಸ್ ಅನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳುವುದು: @extend ನಿಯಮದ ಆಳವಾದ ಅಧ್ಯಯನ

ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್ ಜಗತ್ತಿನಲ್ಲಿ, ಸ್ವಚ್ಛ, ದಕ್ಷ ಮತ್ತು ನಿರ್ವಹಿಸಬಲ್ಲ CSS ಬರೆಯುವುದು ವೃತ್ತಿಪರತೆಯ ಸಂಕೇತವಾಗಿದೆ. ಪ್ರಾಜೆಕ್ಟ್‌ಗಳು ಗಾತ್ರ ಮತ್ತು ಸಂಕೀರ್ಣತೆಯಲ್ಲಿ ಬೆಳೆದಂತೆ, ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳು ಪುನರಾವರ್ತಿತ ಕೋಡ್‌ನಿಂದ ತುಂಬಿಹೋಗಬಹುದು, ಇದರಿಂದಾಗಿ ಅವುಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು ಮತ್ತು ಡೀಬಗ್ ಮಾಡುವುದು ಕಷ್ಟಕರವಾಗುತ್ತದೆ. ಇಲ್ಲಿಯೇ DRY (Don't Repeat Yourself - ನಿಮ್ಮನ್ನು ನೀವು ಪುನರಾವರ್ತಿಸಬೇಡಿ) ತತ್ವವು ಕೇವಲ ಉತ್ತಮ ಅಭ್ಯಾಸವಾಗಿರದೆ, ಒಂದು ಅವಶ್ಯಕತೆಯಾಗುತ್ತದೆ. Sass ನಂತಹ CSS ಪ್ರಿಪ್ರೊಸೆಸರ್‌ಗಳು ಈ ತತ್ವವನ್ನು ಜಾರಿಗೊಳಿಸಲು ಶಕ್ತಿಯುತ ಸಾಧನಗಳನ್ನು ನೀಡುತ್ತವೆ, ಮತ್ತು ಅವುಗಳಲ್ಲಿ ಅತ್ಯಂತ ಮಹತ್ವದಾದದ್ದು @extend ನಿಯಮ.

ಪ್ರಮುಖ ಸೂಚನೆ: @extend ನಿರ್ದೇಶನವು Sass/SCSS (Syntactically Awesome Style Sheets) ನ ಒಂದು ವೈಶಿಷ್ಟ್ಯವಾಗಿದೆ, ಇದು ಒಂದು ಜನಪ್ರಿಯ CSS ಪ್ರಿಪ್ರೊಸೆಸರ್ ಆಗಿದೆ. ಇದು ಸಾಮಾನ್ಯ, ನೇಟಿವ್ CSS ನಲ್ಲಿ ಲಭ್ಯವಿಲ್ಲ. ಇದನ್ನು ಬಳಸಲು, ನಿಮ್ಮ ಡೆವಲಪ್‌ಮೆಂಟ್ ವರ್ಕ್‌ಫ್ಲೋನಲ್ಲಿ Sass ಕಂಪೈಲೇಶನ್ ಹಂತ ಇರಬೇಕು.

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

@extend ನಿಯಮ ಎಂದರೇನು? ಒಂದು ಮೂಲಭೂತ ಅವಲೋಕನ

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

ಇದು HTML ಎಲಿಮೆಂಟ್‌ಗೆ ಅನೇಕ ಕ್ಲಾಸ್‌ಗಳನ್ನು ಅನ್ವಯಿಸುವುದಕ್ಕಿಂತ ಭಿನ್ನವಾಗಿದೆ (ಉದಾಹರಣೆಗೆ, <div class="message success">). ಆ ವಿಧಾನವು ಕೆಲಸ ಮಾಡುತ್ತದೆ, ಆದರೆ @extend ಈ ಸಂಬಂಧವನ್ನು ನೇರವಾಗಿ ನಿಮ್ಮ ಸ್ಟೈಲ್‌ಶೀಟ್‌ನೊಳಗೆ ನಿರ್ವಹಿಸುತ್ತದೆ, ಇದು ಸ್ವಚ್ಛವಾದ HTML ರಚನೆ ಮತ್ತು ಹೆಚ್ಚು ಸಂಘಟಿತ CSS ಆರ್ಕಿಟೆಕ್ಚರ್‌ಗೆ ಕಾರಣವಾಗುತ್ತದೆ.

ಮೂಲಭೂತ ಸಿಂಟ್ಯಾಕ್ಸ್ ಮತ್ತು ಬಳಕೆ

ಸಿಂಟ್ಯಾಕ್ಸ್ ಸರಳವಾಗಿದೆ. ಒಂದು ರೂಲ್‌ಸೆಟ್‌ನೊಳಗೆ, ನೀವು @extend ಬಳಸಿ, ನಂತರ ನೀವು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯಲು ಬಯಸುವ ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಬಳಸುತ್ತೀರಿ.

ಒಂದು ಸಾಮಾನ್ಯ UI ಪ್ಯಾಟರ್ನ್ ಅನ್ನು ಪರಿಗಣಿಸೋಣ: ನೋಟಿಫಿಕೇಶನ್ ಸಂದೇಶಗಳು. ನಾವು ಎಲ್ಲಾ ಸಂದೇಶಗಳಿಗೆ ಒಂದು ಮೂಲ ಶೈಲಿಯನ್ನು ಹೊಂದಿರಬಹುದು ಮತ್ತು ನಂತರ ಯಶಸ್ಸು, ದೋಷ, ಮತ್ತು ಎಚ್ಚರಿಕೆ ಸ್ಥಿತಿಗಳಿಗೆ ನಿರ್ದಿಷ್ಟ ವ್ಯತ್ಯಾಸಗಳನ್ನು ಹೊಂದಿರಬಹುದು.

ನಮ್ಮ SCSS ಕೋಡ್:

            .message {
  border: 1px solid #ccc;
  padding: 15px;
  margin-bottom: 20px;
  color: #333;
  font-family: sans-serif;
  border-radius: 4px;
}

.success {
  @extend .message;
  border-color: #28a745; /* Green for success */
  background-color: #d4edda;
}

.error {
  @extend .message;
  border-color: #dc3545; /* Red for error */
  background-color: #f8d7da;
}
            

              
                Copy
              
            
          

Sass ಈ ಕೋಡನ್ನು ಸಾಮಾನ್ಯ CSS ಆಗಿ ಕಂಪೈಲ್ ಮಾಡಿದಾಗ, ಅದು ಕೇವಲ .message ನಿಂದ .success ಮತ್ತು .error ಗೆ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ನಕಲಿಸುವುದಿಲ್ಲ. ಬದಲಾಗಿ, ಅದು ಒಂದು ಚತುರ ಆಪ್ಟಿಮೈಸೇಶನ್ ಮಾಡುತ್ತದೆ: ಅದು ಸೆಲೆಕ್ಟರ್‌ಗಳನ್ನು ಒಟ್ಟಿಗೆ ಗುಂಪು ಮಾಡುತ್ತದೆ.

ಕಂಪೈಲ್ ಮಾಡಿದ CSS ಔಟ್‌ಪುಟ್:

            .message, .success, .error {
  border: 1px solid #ccc;
  padding: 15px;
  margin-bottom: 20px;
  color: #333;
  font-family: sans-serif;
  border-radius: 4px;
}

.success {
  border-color: #28a745;
  background-color: #d4edda;
}

.error {
  border-color: #dc3545;
  background-color: #f8d7da;
}
            

              
                Copy
              
            
          

ಔಟ್‌ಪುಟ್ ಅನ್ನು ಗಮನಿಸಿ. Sass ಒಂದು ಅಲ್ಪವಿರಾಮದಿಂದ ಬೇರ್ಪಡಿಸಿದ ಸೆಲೆಕ್ಟರ್ ಪಟ್ಟಿಯನ್ನು (.message, .success, .error) ರಚಿಸಿದೆ ಮತ್ತು ಮೂಲ ಶೈಲಿಗಳನ್ನು ಅವೆಲ್ಲಕ್ಕೂ ಅನ್ವಯಿಸಿದೆ. ಇದೇ @extend ನ ಮ್ಯಾಜಿಕ್: ಇದು ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ನಕಲು ಮಾಡುವ ಬದಲು ರೂಲ್‌ಸೆಟ್‌ಗಳನ್ನು ಹಂಚಿಕೊಳ್ಳುವ ಮೂಲಕ ನಿಮ್ಮ ಅಂತಿಮ ಸ್ಟೈಲ್‌ಶೀಟ್ ಅನ್ನು DRY ಆಗಿ ಇಡುತ್ತದೆ.

ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಸೆಲೆಕ್ಟರ್‌ಗಳ (%) ಶಕ್ತಿ

ಹಿಂದಿನ ಉದಾಹರಣೆ ಸಂಪೂರ್ಣವಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ, ಆದರೆ ಅದರಲ್ಲಿ ಒಂದು ಸಂಭಾವ್ಯ ಅನಾನುಕೂಲತೆ ಇದೆ. .message ಕ್ಲಾಸ್ ನಮ್ಮ ಅಂತಿಮ CSS ಗೆ ಕಂಪೈಲ್ ಆಗುತ್ತದೆ. ನಾವು ಈ ಮೂಲ ಕ್ಲಾಸ್ ಅನ್ನು ನಮ್ಮ HTML ನಲ್ಲಿ ನೇರವಾಗಿ ಬಳಸಲು ಉದ್ದೇಶಿಸದಿದ್ದರೆ ಏನು? ಇತರ ಕ್ಲಾಸ್‌ಗಳು ವಿಸ್ತರಿಸಲು ಇದು ಕೇವಲ ಒಂದು ಟೆಂಪ್ಲೇಟ್ ಆಗಿ ಅಸ್ತಿತ್ವದಲ್ಲಿದ್ದರೆ ಏನು? ಆ ಸಂದರ್ಭದಲ್ಲಿ, ನಮ್ಮ CSS ನಲ್ಲಿ .message ಇರುವುದು ಅನಗತ್ಯ ಗೊಂದಲ.

ಇಲ್ಲಿಯೇ ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಸೆಲೆಕ್ಟರ್‌ಗಳು ಬರುತ್ತವೆ. ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಸೆಲೆಕ್ಟರ್ ಒಂದು ಕ್ಲಾಸ್‌ನಂತೆ ಕಾಣುತ್ತದೆ ಮತ್ತು ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಆದರೆ ಇದು ಪೂರ್ಣವಿರಾಮದ ಬದಲು ಶೇಕಡಾ ಚಿಹ್ನೆಯಿಂದ (%) ಪ್ರಾರಂಭವಾಗುತ್ತದೆ. ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್‌ನ ಪ್ರಮುಖ ವೈಶಿಷ್ಟ್ಯವೆಂದರೆ ಅದು "ಮೌನ"ವಾಗಿರುತ್ತದೆ—ಅದು ವಿಸ್ತರಿಸಲ್ಪಡದ ಹೊರತು ರೂಲ್‌ಸೆಟ್ ಅನ್ನು CSS ಔಟ್‌ಪುಟ್‌ಗೆ ರೆಂಡರ್ ಮಾಡುವುದನ್ನು ತಡೆಯುತ್ತದೆ.

ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆ: "ಮೌನ" ಬೇಸ್ ಕ್ಲಾಸ್

ನಮ್ಮ ಸಂದೇಶದ ಉದಾಹರಣೆಯನ್ನು ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಬಳಸಿ ಮರುರಚಿಸೋಣ. ಇದನ್ನು @extend ಬಳಸುವ ಅತ್ಯುತ್ತಮ ಅಭ್ಯಾಸವೆಂದು ವ್ಯಾಪಕವಾಗಿ ಪರಿಗಣಿಸಲಾಗಿದೆ.

ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್‌ನೊಂದಿಗೆ ನಮ್ಮ ಮರುರಚಿಸಿದ SCSS:

            %message-base {
  border: 1px solid #ccc;
  padding: 15px;
  margin-bottom: 20px;
  color: #333;
  font-family: sans-serif;
  border-radius: 4px;
}

.success {
  @extend %message-base;
  border-color: #28a745;
  background-color: #d4edda;
}

.error {
  @extend %message-base;
  border-color: #dc3545;
  background-color: #f8d7da;
}

.warning {
  @extend %message-base;
  border-color: #ffc107;
  background-color: #fff3cd;
}
            

              
                Copy
              
            
          

ಈಗ, ಕಂಪೈಲ್ ಮಾಡಿದ CSS ಅನ್ನು ನೋಡೋಣ. ಫಲಿತಾಂಶವು ಹೆಚ್ಚು ಸ್ವಚ್ಛ ಮತ್ತು ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿದೆ.

ಸ್ವಚ್ಛವಾದ ಕಂಪೈಲ್ ಮಾಡಿದ CSS ಔಟ್‌ಪುಟ್:

            .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 15px;
  margin-bottom: 20px;
  color: #333;
  font-family: sans-serif;
  border-radius: 4px;
}

.success {
  border-color: #28a745;
  background-color: #d4edda;
}

.error {
  border-color: #dc3545;
  background-color: #f8d7da;
}

.warning {
  border-color: #ffc107;
  background-color: #fff3cd;
}
            

              
                Copy
              
            
          

ನೀವು ನೋಡುವಂತೆ, %message-base ಸೆಲೆಕ್ಟರ್ ಔಟ್‌ಪುಟ್‌ನಲ್ಲಿ ಎಲ್ಲಿಯೂ ಕಂಡುಬರುವುದಿಲ್ಲ. ಇದು ಒಂದು ಮೌನ, ವಿಸ್ತರಿಸಲು-ಮಾತ್ರವಾದ ಟೆಂಪ್ಲೇಟ್ ಆಗಿ ತನ್ನ ಉದ್ದೇಶವನ್ನು ಪೂರೈಸಿತು, ಇದರ ಪರಿಣಾಮವಾಗಿ ಒಂದು ಹಗುರವಾದ ಮತ್ತು ದಕ್ಷ ಸ್ಟೈಲ್‌ಶೀಟ್ ಲಭಿಸಿತು. ಇದು ಇತರ ಡೆವಲಪರ್‌ಗಳು (ಅಥವಾ ನಿಮ್ಮ ಭವಿಷ್ಯದ ನೀವು) ನೇರ ಅನ್ವಯಕ್ಕಾಗಿ ಉದ್ದೇಶಿಸದ ಬೇಸ್ ಕ್ಲಾಸ್ ಅನ್ನು HTML ನಲ್ಲಿ ಬಳಸುವುದನ್ನು ತಡೆಯುತ್ತದೆ.

@extend vs. @mixin: ಕೆಲಸಕ್ಕೆ ಸರಿಯಾದ ಸಾಧನವನ್ನು ಆರಿಸುವುದು

Sass ಗೆ ಹೊಸಬರಾದ ಡೆವಲಪರ್‌ಗಳಿಗೆ ಅತ್ಯಂತ ಸಾಮಾನ್ಯವಾದ ಗೊಂದಲವೆಂದರೆ, ಯಾವಾಗ @extend ಬಳಸಬೇಕು ಮತ್ತು ಯಾವಾಗ @mixin ಬಳಸಬೇಕು ಎಂಬುದು. ಎರಡೂ ಕೋಡ್ ಮರುಬಳಕೆಗಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ, ಆದರೆ ಅವು ವಿಭಿನ್ನ ಸಮಸ್ಯೆಗಳನ್ನು ಪರಿಹರಿಸುತ್ತವೆ ಮತ್ತು ನಿಮ್ಮ ಕಂಪೈಲ್ ಮಾಡಿದ CSS ಮೇಲೆ ವಿಭಿನ್ನ ಪರಿಣಾಮಗಳನ್ನು ಬೀರುತ್ತವೆ.

@mixin ಯಾವಾಗ ಬಳಸಬೇಕು

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

@mixin ಬಳಸಿ:

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

ಉದಾಹರಣೆ: ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಸೆಂಟರಿಂಗ್‌ಗಾಗಿ ಒಂದು ಮಿಕ್ಸಿನ್

            @mixin flex-center($direction: row) {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: $direction;
}

.card-header {
  @include flex-center;
}

.icon-container {
  @include flex-center(column);
}
            

              
                Copy
              
            
          

ಕಂಪೈಲ್ ಮಾಡಿದ CSS (ಪ್ರಾಪರ್ಟಿ ನಕಲಿನೊಂದಿಗೆ):

            .card-header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
            

              
                Copy
              
            
          

@extend ಯಾವಾಗ ಬಳಸಬೇಕು

@extend, ಸೆಲೆಕ್ಟರ್‌ಗಳ ನಡುವೆ ಸ್ಪಷ್ಟ, ಶಬ್ದಾರ್ಥದ ಸಂಬಂಧವನ್ನು ಸ್ಥಾಪಿಸಲು ಅತ್ಯುತ್ತಮವಾಗಿದೆ. ಒಂದು ಎಲಿಮೆಂಟ್ ಇನ್ನೊಂದರ ಹೆಚ್ಚು ನಿರ್ದಿಷ್ಟ ಆವೃತ್ತಿಯಾದಾಗ ಇದನ್ನು ಬಳಸಬೇಕು.

@extend ಬಳಸಿ:

• ನೀವು "is-a" ಸಂಬಂಧವನ್ನು ವ್ಯಕ್ತಪಡಿಸಲು ಬಯಸಿದಾಗ (ಉದಾ., .button-primary ಎಂಬುದು %button ನ ಒಂದು ಬಗೆಯಾಗಿದೆ).
• ಸೆಲೆಕ್ಟರ್‌ಗಳು ಸಾಮಾನ್ಯವಾದ ಮೂಲಭೂತ ಶೈಲಿಗಳ ಗುಂಪನ್ನು ಹಂಚಿಕೊಂಡಾಗ.
• ನಿಮ್ಮ ಪ್ರಾಥಮಿಕ ಗುರಿ ಸೆಲೆಕ್ಟರ್‌ಗಳನ್ನು ಗುಂಪು ಮಾಡುವ ಮೂಲಕ ನಿಮ್ಮ ಕಂಪೈಲ್ ಮಾಡಿದ CSS ಅನ್ನು DRY ಆಗಿ ಇಡುವುದಾಗಿದ್ದರೆ.
• ನೀವು ಯಾವುದೇ ಆರ್ಗ್ಯುಮೆಂಟ್‌ಗಳನ್ನು ರವಾನಿಸುವ ಅಗತ್ಯವಿಲ್ಲದಿದ್ದಾಗ.

ಒಂದು ಸರಳ ಮಾರ್ಗದರ್ಶಿ

ನಿಮ್ಮನ್ನು ಕೇಳಿಕೊಳ್ಳಿ: "ಈ ಹೊಸ ಶೈಲಿಯು ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಶೈಲಿಯ ನಿರ್ದಿಷ್ಟ ರೂಪಾಂತರವೇ?" ಉತ್ತರ ಹೌದು ಎಂದಾದರೆ, @extend ಸರಿಯಾದ ಆಯ್ಕೆಯಾಗಿರಬಹುದು. ನೀವು ಕೇವಲ ಯುಟಿಲಿಟಿಯಂತಹ ಉಪಯುಕ್ತ ಕೋಡ್ ತುಣುಕನ್ನು ಮರುಬಳಕೆ ಮಾಡುತ್ತಿದ್ದರೆ, @mixin ಬಹುತೇಕ ಯಾವಾಗಲೂ ಉತ್ತಮವಾಗಿರುತ್ತದೆ.

ಮುಂದುವರಿದ @extend ತಂತ್ರಗಳು ಮತ್ತು ಸಂಭಾವ್ಯ ಅಪಾಯಗಳು

@extend ಅತ್ಯಂತ ಶಕ್ತಿಯುತವಾಗಿದ್ದರೂ, ಅದು ಅಪಾಯಗಳಿಂದ ಮುಕ್ತವಾಗಿಲ್ಲ. ಅದನ್ನು ದುರುಪಯೋಗಪಡಿಸಿಕೊಂಡರೆ ಅದು ಉಬ್ಬಿದ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳು, ಅನಿರೀಕ್ಷಿತ ಸ್ಪೆಸಿಫಿಸಿಟಿ ಸಮಸ್ಯೆಗಳು, ಮತ್ತು ಡೀಬಗ್ಗಿಂಗ್ ತಲೆನೋವುಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು. ಇದನ್ನು ವೃತ್ತಿಪರವಾಗಿ ಬಳಸಲು ಈ ಅಪಾಯಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ನಿರ್ಣಾಯಕವಾಗಿದೆ.

"ಸೆಲೆಕ್ಟರ್ ಸ್ಫೋಟ" ಸಮಸ್ಯೆ

ಇದು @extend ನ ಅತ್ಯಂತ ಮಹತ್ವದ ಅಪಾಯ. ನೀವು ಸಂಕೀರ್ಣ, ನೆಸ್ಟೆಡ್ ಸೆಲೆಕ್ಟರ್‌ಗಳಲ್ಲಿ ಬಳಸಲಾದ ಸರಳ ಕ್ಲಾಸ್ ಅನ್ನು ವಿಸ್ತರಿಸಿದಾಗ, Sass ಆ ನೆಸ್ಟಿಂಗ್ ಅನ್ನು ವಿಸ್ತರಿಸುವ ಸೆಲೆಕ್ಟರ್‌ಗೆ ಪುನರಾವರ್ತಿಸಲು ಪ್ರಯತ್ನಿಸುತ್ತದೆ. ಇದು ನಿಮ್ಮ ಕಂಪೈಲ್ ಮಾಡಿದ CSS ನಲ್ಲಿ ಅತ್ಯಂತ ಉದ್ದವಾದ, ಜಟಿಲವಾದ ಸೆಲೆಕ್ಟರ್ ಚೈನ್‌ಗಳನ್ನು ರಚಿಸಬಹುದು.

ಒಂದು ಅಪಾಯಕಾರಿ ಉದಾಹರಣೆ (ಇದನ್ನು ಮಾಡಬೇಡಿ):

            // A generic helper class
.text-muted {
  color: #6c757d;
}

// A component with nested styles
.sidebar nav a {
  font-weight: bold;

  &:hover {
    @extend .text-muted; // DANGER!
  }
}

// Another component
.footer .legal-links a {
  text-decoration: none;

  &:hover {
    @extend .text-muted; // DANGER!
  }
}
            

              
                Copy
              
            
          

ನೀವು ಒಂದು ಸರಳ ಔಟ್‌ಪುಟ್ ಅನ್ನು ನಿರೀಕ್ಷಿಸಬಹುದು. ಬದಲಾಗಿ, ನೀವು ಒಂದು "ಸೆಲೆಕ್ಟರ್ ಸ್ಫೋಟ"ವನ್ನು ಪಡೆಯುತ್ತೀರಿ:

ಉಬ್ಬಿದ ಕಂಪೈಲ್ ಮಾಡಿದ CSS:

            .text-muted, .sidebar nav a:hover, .footer .legal-links a:hover {
  color: #6c757d;
}

.sidebar nav a {
  font-weight: bold;
}

.footer .legal-links a {
  text-decoration: none;
}
            

              
                Copy
              
            
          

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

ಸ್ಪೆಸಿಫಿಸಿಟಿ ಮತ್ತು ಮೂಲ ಕ್ರಮದ ಸಮಸ್ಯೆಗಳು

ನೀವು ಒಂದು ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ವಿಸ್ತರಿಸಿದಾಗ, ನಿಮ್ಮ ಹೊಸ ಸೆಲೆಕ್ಟರ್ ಅದು ವಿಸ್ತರಿಸಿದ ಸೆಲೆಕ್ಟರ್‌ನ ಸ್ಪೆಸಿಫಿಸಿಟಿಯನ್ನು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯುತ್ತದೆ. ನೀವು ಜಾಗರೂಕರಾಗಿರದಿದ್ದರೆ ಇದು ಕೆಲವೊಮ್ಮೆ ಅನಿರೀಕ್ಷಿತ ನಡವಳಿಕೆಗೆ ಕಾರಣವಾಗಬಹುದು. ಇದಲ್ಲದೆ, ಉತ್ಪತ್ತಿಯಾದ ರೂಲ್‌ಸೆಟ್ ಅನ್ನು ಮೂಲ ಸೆಲೆಕ್ಟರ್ (ವಿಸ್ತರಿಸಲ್ಪಟ್ಟದ್ದು) ಮೊದಲು ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಸ್ಥಳದಲ್ಲಿ ಇರಿಸಲಾಗುತ್ತದೆ, ನೀವು @extend ಕರೆಯನ್ನು ಬರೆದ ಸ್ಥಳದಲ್ಲಿ ಅಲ್ಲ. ನೀವು ಶೈಲಿಗಳು ಬೇರೆ ಕ್ರಮದಲ್ಲಿ ಅನ್ವಯವಾಗಬೇಕೆಂದು ನಿರೀಕ್ಷಿಸುತ್ತಿದ್ದರೆ ಇದು ಕ್ಯಾಸ್ಕೇಡ್ ಅನ್ನು ಮುರಿಯಬಹುದು.

ಜಾಗತಿಕ ತಂಡದ ಪರಿಸರದಲ್ಲಿ @extend ಬಳಸಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

@extend ಅನ್ನು ಸುರಕ್ಷಿತವಾಗಿ ಮತ್ತು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಬಳಸಲು, ವಿಶೇಷವಾಗಿ ದೊಡ್ಡ, ಸಹಯೋಗದ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳಲ್ಲಿ, ಈ ಜಾಗತಿಕವಾಗಿ ಗುರುತಿಸಲ್ಪಟ್ಟ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸಿ.

1. ಯಾವಾಗಲೂ ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಸೆಲೆಕ್ಟರ್‌ಗಳನ್ನು ವಿಸ್ತರಿಸಿ, ಕ್ಲಾಸ್‌ಗಳನ್ನಲ್ಲ

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

2. ವಿಸ್ತರಿಸಿದ ಸೆಲೆಕ್ಟರ್‌ಗಳನ್ನು ಸರಳ ಮತ್ತು ಉನ್ನತ ಮಟ್ಟದಲ್ಲಿಡಿ

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

ಒಳ್ಳೆಯದು: %base-button { ... }
ಕೆಟ್ಟದು: .modal .header %title-style { ... }

3. ನಿಮ್ಮ ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್‌ಗಳನ್ನು ಕೇಂದ್ರೀಕರಿಸಿ

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

4. ನಿಮ್ಮ ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್‌ಗಳನ್ನು ದಾಖಲಿಸಿ

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

            // _placeholders.scss

/**
 * @name %ui-panel
 * @description Provides a base visual treatment for any panel-like container.
 * Includes default padding, border, and background color.
 */
%ui-panel {
  padding: 20px;
  border: 1px solid #dee2e6;
  background-color: #f8f9fa;
  border-radius: 5px;
}
            

              
                Copy
              
            
          

5. ನಿಜವಾದ "is-a" ಸಂಬಂಧಗಳಿಗಾಗಿ ಮಾತ್ರ @extend ಬಳಸಿ

ನೀವು ನಿಜವಾದ ಸಂಬಂಧವನ್ನು ರೂಪಿಸುತ್ತಿದ್ದೀರಾ ಎಂದು ನಿರಂತರವಾಗಿ ಕೇಳಿಕೊಳ್ಳಿ. .user-avatar ಎಂಬುದು %circular-image ನ ಒಂದು ನಿರ್ದಿಷ್ಟ ಪ್ರಕಾರವೇ? ಹೌದು, ಅದು ಅರ್ಥಪೂರ್ಣವಾಗಿದೆ. .form-input ಎಂಬುದು %ui-panel ನ ಒಂದು ಪ್ರಕಾರವೇ? ಬಹುಶಃ ಇಲ್ಲ; ಅವು ಕೇವಲ ಕೆಲವು ದೃಶ್ಯ ಶೈಲಿಗಳನ್ನು ಹಂಚಿಕೊಳ್ಳಬಹುದು, ಇದು @mixin ಅನ್ನು ಉತ್ತಮ ಆಯ್ಕೆಯನ್ನಾಗಿ ಮಾಡುತ್ತದೆ.

6. ನಿಮ್ಮ ಕಂಪೈಲ್ ಮಾಡಿದ CSS ಅನ್ನು ನಿಯತಕಾಲಿಕವಾಗಿ ಪರಿಶೀಲಿಸಿ

ಕೇವಲ ನಿಮ್ಮ SCSS ಅನ್ನು ನಂಬಬೇಡಿ. ಕಂಪೈಲ್ ಮಾಡಿದ CSS ಔಟ್‌ಪುಟ್ ಅನ್ನು ಪರೀಕ್ಷಿಸುವ ಅಭ್ಯಾಸವನ್ನು ಮಾಡಿಕೊಳ್ಳಿ, ವಿಶೇಷವಾಗಿ ಹೊಸ ಎಕ್ಸ್‌ಟೆಂಡ್‌ಗಳನ್ನು ಸೇರಿಸಿದ ನಂತರ. ಅತಿ ಉದ್ದವಾದ ಸೆಲೆಕ್ಟರ್ ಪಟ್ಟಿಗಳು ಅಥವಾ ಅನಿರೀಕ್ಷಿತ ನಿಯಮದ ಸ್ಥಾನಗಳಿಗಾಗಿ ನೋಡಿ. ಈ ಸರಳ ಪರಿಶೀಲನೆಯು ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಗಳು ಮತ್ತು ವಾಸ್ತುಶಿಲ್ಪದ ಸಮಸ್ಯೆಗಳನ್ನು ಅವು ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ನಲ್ಲಿ ಆಳವಾಗಿ ಬೇರೂರುವ ಮೊದಲು ಹಿಡಿಯಬಹುದು.

ತೀರ್ಮಾನ: ಉದ್ದೇಶಪೂರ್ವಕ ಸ್ಟೈಲಿಂಗ್‌ಗಾಗಿ ಒಂದು ಸಾಧನವಾಗಿ @extend

@extend ನಿಯಮವು ಕೇವಲ ಕೋಡ್ ನಕಲನ್ನು ಕಡಿಮೆ ಮಾಡುವ ಸಾಧನಕ್ಕಿಂತ ಹೆಚ್ಚಾಗಿದೆ; ಇದು ನಿಮ್ಮ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಯೊಳಗಿನ ಸಂಬಂಧಗಳ ಬಗ್ಗೆ ಯೋಚಿಸಲು ನಿಮ್ಮನ್ನು ಪ್ರೋತ್ಸಾಹಿಸುವ ಒಂದು ವೈಶಿಷ್ಟ್ಯವಾಗಿದೆ. ಇದು ನಿಮ್ಮ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳಲ್ಲಿ ನೇರವಾಗಿ ಒಂದು ತಾರ್ಕಿಕ, ಇನ್ಹೆರಿಟೆನ್ಸ್-ಆಧಾರಿತ ವಾಸ್ತುಶಿಲ್ಪವನ್ನು ನಿರ್ಮಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ಆದಾಗ್ಯೂ, ಅದರ ಶಕ್ತಿಯು ಗಮನಾರ್ಹ ಜವಾಬ್ದಾರಿಯೊಂದಿಗೆ ಬರುತ್ತದೆ. ಒಂದು ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಮೇಲೆ ಚೆನ್ನಾಗಿ ಇರಿಸಿದ @extend ಸುಂದರವಾಗಿ ಸ್ವಚ್ಛ ಮತ್ತು DRY CSS ಗೆ ಕಾರಣವಾಗಬಹುದಾದರೆ, ಒಂದು ನೆಸ್ಟೆಡ್ ಕ್ಲಾಸ್ ಮೇಲೆ ಅಸಡ್ಡೆಯಾಗಿ ಬಳಸಿದ @extend ಒಂದು ಉಬ್ಬಿದ ಮತ್ತು ನಿರ್ವಹಿಸಲಾಗದ ಗೊಂದಲವನ್ನು ಸೃಷ್ಟಿಸಬಹುದು.

ಇಲ್ಲಿ ವಿವರಿಸಿದ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸುವ ಮೂಲಕ—ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್‌ಗಳಿಗೆ ಆದ್ಯತೆ ನೀಡುವುದು, ಎಕ್ಸ್‌ಟೆಂಡ್‌ಗಳನ್ನು ಸರಳವಾಗಿಡುವುದು, ಅವುಗಳನ್ನು ಕೇಂದ್ರೀಕರಿಸುವುದು ಮತ್ತು ದಾಖಲಿಸುವುದು, ಮತ್ತು ಮಿಕ್ಸಿನ್‌ಗಳಿಂದ مفهನಾತ್ಮಕ ವ್ಯತ್ಯಾಸವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು—ನೀವು @extend ನ ಸಂಪೂರ್ಣ ಸಾಮರ್ಥ್ಯವನ್ನು ಬಳಸಿಕೊಳ್ಳಬಹುದು. ನೀವು ಕೇವಲ ಕ್ರಿಯಾತ್ಮಕವಲ್ಲದೆ, ವಿಸ್ತರಿಸಬಹುದಾದ, ನಿರ್ವಹಿಸಬಲ್ಲ, ಮತ್ತು ಜಗತ್ತಿನ ಯಾವುದೇ ಡೆವಲಪರ್‌ಗೆ ಕೆಲಸ ಮಾಡಲು ಆನಂದದಾಯಕವಾದ CSS ಬರೆಯುವ ಹಾದಿಯಲ್ಲಿರುತ್ತೀರಿ.