Sass вложени правила

Sass ви позволява да влагате CSS селектори по същия начин като HTML.

Погледнете пример за някакъв код на Sass за навигация в даден сайт:

Пример

Синтаксис на SCSS:

Забележете, че в Sass, на ul, liи aселектори са вложени във вътрешността на navселектора.

Докато са в CSS, правилата се дефинират едно по едно (не са вложени):

CSS синтаксис:

Тъй като можете да влагате свойства в Sass, той е по-чист и по-лесен за четене от стандартния CSS.

Sass вложени свойства

Много CSS свойства имат един и същ префикс, като семейство шрифтове, размер на шрифта и тегло на шрифта или подравняване на текст, преобразуване на текст и преливане на текст.

С Sass можете да ги запишете като вложени свойства:

Пример

Синтаксис на SCSS:

Транспилаторът Sass ще преобразува горното в нормален CSS:

CSS изход: