Почему не срабатывает правило sass?

Question

[cupacabka]

Добрый день, подскажите такой вопрос. делаю по обучающему виде. почему не срабатывает сас правило, хотя в видео описании все работает.

<ul class="menu">
            <li class="menu_item"><a href="#" class="menu_link">Главная</a></li>
            <li class="menu_item"><a href="#require" class="menu_link">ппппппп</a></li>

</ul>

пприменяю сас с правилом медиа

@media  (max-width:1200px)
    .menu
        &_item
            padding-right: 20px

Тут все работает, падинги между элементами изменяются
и потом пробую сделать как в обучаещем видео
добавляю в сас правило для изменения фонт сайз

.menu
		&_item 
			padding-right: 20px
		&_link 
			font-size: 13px

И оно почему то не срабатывает. В видео один в один, я прямо с исходника из обучалки копирую, хтмл код оттуда тоже подставил все сравнил все один в один. И нет изменения шрифта.
если прописать с классами

@media  (max-width:1200px)
    .menu
        &_item
            padding-right: 20px
    .menu_item .menu_link
            font-size: 13px

то все работает. Не поиму почему так.

Далее также

.subheader
		&_logo
			img 
				width: 100%
		&_text
			font-size: 11px

так не подхватывает

а так

.subheader
        &_logo
            img
                width: 100%
        .col-md-4.offset-md-1 .subheader_text
                font-size: 11px

да

Comments

[ProjectSoft]

Поправьте, если что ни так. Но работает.

Answer 1

[Aetae]

Результат sass

.menu
    &_link

не .menu_item .menu_link, а просто.menu_link.
Где-то с этим проблема.

Возможно ниже по коду есть ещё одно объявление font-size для .menu_link, которое обладает более высоким приоритетом по праву очередности, а когда вы указываете .menu_item .menu_link уже это правило обладает более высоким приоритетом над последующим .menu_link как более точный селектор.

Скорее всего это объявление идёт ниже в @media с max-width большим 1200px - в таком случае просто поменяйте порядок @media.

Comments

[cupacabka]

Это именно самый низ кода и с media не берет почему то размер шрифта

[Aetae]

cupacabka, ну значит выше есть селектор, который точнее чем просто .menu_link но менее или настолько же точен как .menu_item .menu_link.
Чудес не бывает.
В комментах вон ProjectSoft сделал pen, там, самоочевидно, всё работает как должно.

[Aetae]

Просто откройте инструменты разработчика, выделите элемент и посмотрите какое правило для font-size активно.

[cupacabka]

Aetae, активен фонт сайз из основного файла, где правила до адоптации к мобильной версии. Далее все я пишу для мобильной версии в отдельном подключенном файле. Если указывать паддинги, но они срабатывают отсюда с media, вот размер шрифта не перебивается.

[Aetae]

По какому селектору "из основного файла" он активен?

[cupacabka]

У меня идет так
общий сасс
в него

*
  font-family: "Roboto", sans-serif
@import "variables"
@import "mixine"
@import "general"
@import "media"

в сасс media я пишу правила для оптимизированной версии. в ней указываю изменить паддинги - падинги перебиваются, указываю изменить фонт сайз - они не пербиваются остаются из general. Тут ошибка обращения. Я так понимаю, что в general могло быть указано все что угодно, далее подключается правило для уменьшения размера экрана и оно должно перебивать предыдущие правила. я не могу понять почему в видео обучающем все идет, взял даже код из обучалки, он одинаков, с него идет а с аналогичного скопированного в редактор нет.

[Aetae]

Р-р-р. Покажите по какому именно селектору активен font-size.
Вот такое вот:

Далее подключается правило для уменьшения размера экрана и оно должно перебивать предыдущие правила.

Оно не должно. Оно будет "перебивать" только в том случае если селектор точнее или столь же точен. Если он менее точен - предыдущее правило имеет приоритет.

[cupacabka]

вот исходный код



почему при таком медиа срабатывает тольк падинг, а фонт сайз нет.


вот и инструментов разраба


тут 15 из основного файла правил для не оптимизированной версии.

[cupacabka]

А вот в обучающем видео, такой же исходный код. и все работает на видео

[Aetae]

Как мы видим в инспекторе, активен селектор .menu_item .menu_link, в то время как в @media у нас просто .menu_link.
Всё именно так, как я и предполагал в своём ответе(и первом комменте).

В чём проблема - читайте во второй части моего предыдущего коммента и в тексте ответа. Внимательно.

[cupacabka]

Aetae,
в таком коде

@media (max-width: 1200px)
    .menu
        &_item
            padding-right: 20px

padding-right применяется к .menu_item все верно же? так.

в таком коде

@media (max-width: 1200px)
    .menu
        &_item
            padding-right: 20px
        &_link
            font-size: 13px

В таком коде font-size: 13px применяется к .menu_link ? верно же? В обучаещем видео скнир с него оно применяется. там такие же классы

[Aetae]

cupacabka, потому что в general у тебя нет никакого padding-right. А font-size есть. А padding-right нет. А font-size есть. А padding-right вообще нет.
А в "обучающем видео" совсем нет никакого general.

Забудь про чёртов padding-right и прочитай о чём я тебе, с примерами, пишу.

[cupacabka]

В обучалке есть генерал там общее также до оптимизации. там есть и падинг райт и фонт сайз. вот они

.menu_item
  border-right: 2px dotted black
  padding-right: 28px
  &:last-child
      border-right: none

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

Я понимаю о чем вы пишите, но мы немного не допонимаем друг друга.

почему паддинг перебивает а фонт сайз нет. Тут ошибка обращения получается. Значит амперсанды не работают получается.

вот простейший аналогичный пример

<div class="new"> <div class="new_1">ddddfffffffff </div>  <div class="new_2">ffffffffffffffffffffff</div>   
        
        
    </div>

.new_1 {
    color: aqua
}

.new_2 {
    color: blue
}

тут все работает. почему при обращении к _link через амперсанд сасс не перебиваетуказанные ранее.

[Aetae]

Разуй, пожалуйста глаза.
Вот твой инспектор:

Ты видишь разницу между .menu_item .menu_link и .menu_link? Точно не видишь? Точно-точно не видишь? А может ты там видишь padding-right?
Твоя проблема не в sass, твоя проблема в базовом понимании каскадных таблиц стилей.
Sass - это не какая-то магия, не кнопка "сделать заебись", это просто способ писать css короче. За вас sass думать не будет. И амперсанды тоже не будут думать за вас.

Твоя "проблема" с практической точки зрения "решается" одним табом. Но пока ты вообще не понимаешь что происходит - давать тебе решение смысла нет.

[cupacabka]

паддинги применяются не к тексту внутри меню а к промежуткам между пунктами меню.
вот они в оригинале берутся из дженерал э

далее я пишу сас код в отдельным файле.
пишу

.menu
        &_item
            padding-right: 20px

Все работает, пандинги между пунктами меню уменьшаются. к какому классу тут происходит обращение? к menu_item.

Далее мне надо изменить размер шрифтав ссылке списка с классом menu_link

я пишу э

.menu
        &_item
            padding-right: 20px
        &_link
            font-size: 13px

к чему применится font-size: 13px ? к .menu_link ? Не применяется. Значит ошибка в обращении где-то.

У меня вот и не допонимание, почему при одинаковом коде не применяется, а в обучалке работает.

я пониманию разницу между .menu_item .menu_link и .menu_link. я прислал такой же пример .new .new__2

обращение работает с указанием .new__2 А в сас почему то нет.

[cupacabka]

Aetae, Вот файл из обучалки. как вы можете видеть в инструменте разработчика все меняется и обращение идет к .menu_link



Вот именно это я и не могу понять!!

[Aetae]

Твой general и general из обучалки отличаются.

Что кристально ясно видно в твоём инспекторе, для padding-right у тебя в general селектор просто .menu_item, а для font-size в том же твоём general - .menu_item .menu_link.
В @media же у тебя исключительно .menu_item и .menu_link.
.menu_item из @media переписывает верхний .menu_item, но .menu_link не может переписать верхний .menu_item .menu_link.

https://www.youtube.com/watch?v=7eiIR7ThAW8
>.menu_item .menu_link
>.menu_link.
>.menu_item
>.menu_item

[cupacabka]

Вот код из обучалки этого куска

<div class="container">
                <ul class="menu">
                    <li class="menu_item"><a href="#" class="menu_link">Главная</a></li>
                    <li class="menu_item"><a href="#require" class="menu_link">Со своим автомобилем</a></li>
                    <li class="menu_item"><a href="#require" class="menu_link">На автомобиле компании</a></li>
                    <li class="menu_item"><a href="#" class="menu_link">Требования</a></li>
                    <li class="menu_item"><a href="#" class="menu_link">Контакты</a></li>
                    <li class="menu_item"><a href="#" class="menu_link">Оставить заявку</a></li>
                </ul>
            </div>

вот мой

<div class="container">
          <ul class="menu">
            <li class="menu_item"><a href="#" class="menu_link">Главная</a></li>
            <li class="menu_item"><a href="#require" class="menu_link">Со своим автомобилем</a></li>
            <li class="menu_item"><a href="#require" class="menu_link">На автомобиле компании</a></li>
            <li class="menu_item"><a href="#" class="menu_link">Требования</a></li>
            <li class="menu_item"><a href="#" class="menu_link">Контакты</a></li>
            <li class="menu_item"><a href="#" class="menu_link">Оставить заявку</a></li>
          </ul>
        </div>

Отличий нет. Но почему то в инструменте разраба обучалки файл работает и там идет обращение именно .menu_link В моем случае обратится к этому элементу я могу только не используя амперсанд а через .menu_item .menu_link

[Aetae]

В html коде у вас нет различий, различия есть css/sass в файле general.

Амерсанд это не магия, бить тебя батоном колбасы, амперсанд - это просто заменитель. Если амперсанд используется под .menu - это значит что он тупо равен .menu. Если ты пишешь &_что-то - это просто заменяется на .menu_что-то. Всё, больше ничего, никаких чудесных превращений. С sass проблемы нет. Проблема есть с css. А точнее с твоим непониманием css. Учи css.
Или не учи, но хотя бы прочитай все мои комментарии головой, а не тем чем ты там читал. Я дал все необходимые ответы, в гораздо большем чем нужно объёме. Просто перечитывай до просветления.
Больше мне сказать нечего, так что я ухожу отсюда.

[kuzminakat]

Aetae, я учусь по тому же курсу, пока не сильно шарю, но ваши ответы очень круты, спасибо