По-малко вложените правила получават родителски свойства

Здравейте, чудя се възможно ли е да направя нещо подобно за по-малко. Имам този css:

.parent{display: block; color: red; border: yellow 1px solid;}
.parent a, .parent a.special-link{color: blue; border-color: green;}

Бих го написал по-малко така:

.parent{
    display: block; 
    color: red; 
    border: yellow 1px solid;

    a, a.special-link{
        color: blue; border-color: green;
    }
}

И правилата са добре, но какво ще стане, ако при по-нататъшното разработване трябва да добавя нещо към :hover, но само за него, напр. подложка: 20px; Кой е най-добрият начин да направите това? Първата ми мисъл е, че ако има някакво решение/хак/селектор, който позволява да се наследят всички свойства на родител.


css less
person Adrian Wajs    schedule 20.09.2013    source източник

Отговори (1)


arrow_upward
1
arrow_downward

Съмнявам се, че ясно разбирам точните ви нужди (":hover" от какво? "само" за какво "то"?) Но като цяло обикновено върви така:

.parent {
    display: block;
    color:   red;
    border:  yellow 1px solid;

    a {
        // <a> properties:
        // ...

        &, &.special-link {
            // <a> and <a.special-link> properties:
            // ...
            color:        blue;
            border-color: green;
        }

        &.special-link {
            // <a.special-link> properties:
            // ...
        }

        &:hover {
            // <a:hover> properties:
            // ...
        }

        /// etc. etc. etc.
    }
}
person seven-phases-max    schedule 20.09.2013
comment
Благодаря много, сега разбирам, че е много просто :). - person Adrian Wajs; 20.09.2013