איפשהו בעבר הרחוק מישהו סיפר לי על Less ו Sass ואיך שווה להשתמש בהם כי אפשר לכתוב סלקטור בתוך סלקטור וזה היה מאוד מרגש בשעתו. עם הזמן נפרדנו מ Less ולמדנו לקבל את Sass ונכון שלימים גם הוא הוחלף ב CSS In JS וב Tailwind אבל עדיין יש משהו קסום בלכתוב CSS ויש עדיין לא מעט פרויקטים עם קבצי css.

עכשיו נכון Sass כולל המון המון פיצ'רים וקינון סלקטורים הוא רק אחד מהם, אבל עדיין קשה לדמיין ש Sass בכלל היה נולד אם סלקטורים מקוננים ומשתנים היו עובדים ב 2006.

אבל אנחנו כבר לא ב 2006 ואפילו לא ב 2016. משתנים ב CSS כבר עובדים מזמן והיום במקרה גיליתי שגם סלקטורים מקוננים כבר עובדים ברוב הדפדפנים המודרניים. איך זה נראה? נו כמעט כמו שזה נראה ב Sass, רק בלי הפריקומפיילר.

קוד HTML:

<form>
  <label for="name">Name:
    <input type="text" id="name" />
  </label>
  <label for="email">email:</label>
  <input type="text" id="email" />
</form>

קוד CSS:

input {
  /* styles for input not in a label  */
  border: tomato 2px solid;
}
label {
  /* styles for label */
  font-family: system-ui;
  font-size: 1.25rem;
  input {
    /* styles for input in a label  */
    border: blue 2px dashed;
  }
}

ולייב קודפן:

https://codepen.io/ynonp/pen/abXZbvo

לכל הפרטים וההבדלים מול Sass שווה להעיף מבט בתיעוד בקישור: https://developer.mozilla.org/en-US/docs/Web/CSS/CSSnesting/UsingCSS_nesting