0
0

Проверяла коды несколько раз. Цвет кнопок при наведении не меняется  http://joxi.ru/EA4Vg80cO9D3Om   пробовала варианты и $main_color  и $main-color - результат нулевой . Аналогично с заменой плюсиков псевдоэлементами. Плюсики не появвляются  http://joxi.ru/zANvbR7i6gn96A (sass  для плюсиков ниже) p.s. первый ответ не помог

$main_color: #1eacc7
$second_color: #ff5656

=btn_hover
  &:hover 
    background-image: none 
    background-color: $main_color 
  
  *
  font-family: 'Roboto', sans-serif

nav
  height: 50px
  background-color: #212121

.menu
  display: flex
  justify-content: space-between
  padding: 13px 70px
  margin: 0
  list-style: none

  .menu_link
    color: #ffffff
    font-family: Roboto
    font-size: 15px
    font-weight: 300

  .menu_item
    border-right: 2px dotted

.subheader
  position: absolute
  width: 100%
  height: 84px
  background-color: rgba(0, 0, 0, 0.6)

  &_logo
    display: block
    max-width: 100%
    margin-top: 16px

  &_official
    margin-top: 6px
    opacity: 0.5
    color: #ffffff
    font-size: 13px
    font-weight: 400

  &_call
    color: #ffffff
    font-size: 12px
    font-weight: 300
    line-height: 14px
    margin-top: 19px
    text-align: right

  &_phone
    display: block
    margin-top: 8px
    color: #ffffff
    font-size: 22px
    font-weight: 400
    text-transform: uppercase
    text-align: right

  &_btn
    margin-top: 19px
    width: 172px
    height: 46px
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12)
    border: none
    border-radius: 4px
    background-image: linear-gradient(to top, #1eacc7 0%, #4ce2ff 100%)
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.21)
    color: #ffffff
    font-size: 14px
    font-weight: 400
    text-transform: uppercase
    +btn_hover

.promo
  min-height: 800px
  background: url('../img/bg/main_bg.jpg') (center / cover) no-repeat
  padding: 150px 0 135px 0

  &_header
    color: #ffffff
    font-weight: 700
    text-transform: uppercase
    font-size: 60px
    line-height: 60px
    margin: 0
    text-align: center

  &_subheader
    color: #ffffff
    font-weight: 700
    text-transform: uppercase
    font-size: 36px
    line-height: 36px
    margin: 0
    margin-top: 22px
    text-align: center

  &_descr
    color: #ffffff
    font-size: 18px
    font-weight: 400
    line-height: 24px
    text-align: center
    margin-top: 23px

  &_btn
    display: block
    margin: 118px auto 0 auto
    width: 259px
    height: 63px
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.12)
    border: none
    border-radius: 4px
    background-image: linear-gradient(to top, #1eacc7 0%, #4ce2ff 100%)
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.21)
    color: #ffffff
    font-size: 18px
    font-weight: 400
    text-transform: uppercase
    +btn_hover

SaSS Замена плюсиков псевдоэлементами

 &_plus
      display: flex
      justify-content: center
      align-items: center
      position: absolute
      bottom: 35px
      left: 50%
      transform: translateX(-50%)
      width: 26px
      height: 26px
      background-color: #000000
      margin: 0 auto
      border-radius: 100%
      cursor: pointer
      &:before
        content: ''
        display: block
        width: 14x
        height: 2px
        background-color: $main_color
      &:after
        content: ''
        display: block
        height: 14px
        width: 2px
        background-color: $main_color
        position: absolute
        left: 50%
        transform: translateX(-50%)
        background-color: $main_color


student_iihABcCt
4 years ago






а точек с запятой почему нет в конце строк?

у вас написано внчале $main_color, в свойствах $main-color

Вадим Семенов
4 years ago

Сама нашла, в чём проблемма. В sass вместо табов были активны пробелы. Поменяла на табы и всё заработало

student_iihABcCt
4 years ago

2 ответов