Как передать свойства одного стиля другому?

Тема в разделе "Верстка", создана пользователем plas, 15 апр 2017.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. plas

    plas Создатель

    Регистр.:
    24 фев 2012
    Сообщения:
    49
    Симпатии:
    1
    Добрый день, сайт на WP, в шаблоне прописаны стили кнопки "btn btn-info" установлен плагин WPCC у него тоже есть кнопка, со своими стилями "wpcc_submit wpcc_submit_3" как назначить стили одной кнопки другой? ( что бы стиль wpcc_submit wpcc_submit_3 унаследовал все от стиля btn btn-info)
     
  2. zALEHANz

    zALEHANz Создатель

    Регистр.:
    26 апр 2015
    Сообщения:
    49
    Симпатии:
    22
    Никак.
    Либо дописать классы "btn btn-info" к "wpcc_submit wpcc_submit_3" либо скопировать все свойства "btn btn-info" в "wpcc_submit wpcc_submit_3".
    Можно конечно скрипт написать который ищет "wpcc_submit wpcc_submit_3" и дописывает к ним "btn btn-info", но не думаю, что это хороший вариант.
     
  3. plas

    plas Создатель

    Регистр.:
    24 фев 2012
    Сообщения:
    49
    Симпатии:
    1
    Варианта дописать в CSS что-то типа .wpcc_submit {btn-info;} никакого нет?)
     
  4. zALEHANz

    zALEHANz Создатель

    Регистр.:
    26 апр 2015
    Сообщения:
    49
    Симпатии:
    22
    Нет. CSS до такого еще не додумался. И судя по спецификациям и в css4 ничего подобного не будет. Там работы ведь на пару минут. Скопировать свойства с одного селектора и заменить на другом.
     
    plas нравится это.
  5. alex_me

    alex_me Постоялец

    Регистр.:
    25 янв 2017
    Сообщения:
    63
    Симпатии:
    42
    Для вложенных элементов можно использовать значение inherit
    Перейти по ссылке

    Но для того, о чем идет речь нужен scss:

    Код:
    // ++++++++++ Палитра цветов
    $deep-purple: #ff0099;
    $deep-orange: #ff5501;
    
    
    // ++++++++++ Миксины
    @mixin btn-alert {
        background: $deep-purple;
        color: white;
        &:focus {
            background: $deep-purple;
        }
        &:hover {
            background: lighten($deep-purple, 10);
            a {
                color: white;
            }
        }
    }
    
    // ++++++++ Стили
    
    // Делаем первую кнопку малиновой
    .my-button-1 {  
        @include btn-alert;
    }
    
    // Делаем вторую кнопку малиновой с оранжевой полоской
    .my-button-2 {  
        @include btn-alert;  
        border: 2px solid $deep-orange;
    }
     
    Последнее редактирование: 15 апр 2017