What do you need to convert this code from CSS to SCSS, use mixin or extend?

main > nav, main > div { display: inline-block; }

Is this option suitable and is it considered correct in this case?

 @mixin default { display: inline-block; } main > nav { @include default; } main > div { @include default; }

  • one
    There are online services for such operations, including css 2 scss - Deonis
  • @Deonis thanks - Gleb Pristupa

1 answer 1

In SCSS, it will be written as:

 //Вариант 1 main{ & > nav, & > div{ display: inline-block; } } //Вариант 2 @mixin inline-block(){ display: inline-block; } main{ & > nav{ @include inline-block; } & > nav{ @include inline-block; } } //Вариант 3 main{ & > nav, & > div{ @include inline-block; } }

enter image description here

A good book on SCSS is Sass for Web Designers by Dan Cederholm

  • It just happens that the selectors are separated by a comma, but how else can we do it? - Gleb Pristupa
  • @GlebPristupa I wrote the code within the limits of what I see in your question) If you give an example of your code and indicate where the problem is - I will expand my answer - Antonio112009 February
  • Thanks for the book, I wrote the code in the answer, is that right? - Gleb Pristupa
  • The @GlebPristupa answer is best removed and supplemented with your own code in question. What exactly would like to see: HTML + CSS / SCSS, to make it clearer - Antonio112009
  • and & in this case why? - Grundy