0

Что нужно для преобразования этого кода из CSS в SCSS, использовать mixin или extend?

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

Подойдет ли такой вариант и считается ли он правильным в данном случае?

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

2
  • 1
    Есть онлайн сервисы для такого рода операций, в том числе css 2 scss
    – Deonis
    Commented 26 февр. 2019 в 10:40
  • @Deonis спасибо Commented 26 февр. 2019 в 10:46

1 ответ 1

1

В SCSS будет это записано как:

//Вариант 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;
  }
}

введите сюда описание изображения

Хорошая книга по SCSS - это Sass for Web Designers by Dan Cederholm

12
  • Просто у нас получается что селекторы через запятую, а сделать иначе можно как то? Commented 26 февр. 2019 в 10:26
  • @GlebPristupa Я написал код в пределах того, что вижу в твоем вопроcе) Если приведешь пример свое кода и укажешь где проблема - я расширю свой ответ Commented 26 февр. 2019 в 10:35
  • Спасибо за книгу, я написал в ответе код, верно ли так? Commented 26 февр. 2019 в 10:39
  • @GlebPristupa ответ лучше удалить и дополнить свой код в вопросе. Что именно хотелось бы видеть: HTML + CSS/SCSS, чтобы понятнее было Commented 26 февр. 2019 в 10:41
  • а & в данном случае зачем?
    – Grundy
    Commented 26 февр. 2019 в 10:42

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.