Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Shorthand and Previous Values

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #194611
    moxieman
    Participant

    Let’s say I have an element with some padding:

    padding: 20px 40px;

    And let’s say I have a media query that adjusts that on a different screen size, but I only want to change the left and right padding, and leave the top/bottom padding alone. (whatever their value may be).

    My question is, do I have any shorthand options? Or do I have to declare like this:

    padding-left: 10px;
    padding-right: 10px;
    

    Ideally I would like to do something like this:

    padding: previous 10px;

    Where “previous” would inherit the 20px from the previous declaration.

    Is this something that is possible or will I just have to abandon shorthand in this case?

    #194614
    Paulie_D
    Member

    Why not use the same shorthand again but different values?

    padding: 20px 10px;
    

    Yes, you are repeating the top/bottom property but it’s still shorthand.

    #194616
    moxieman
    Participant

    Ideally I wouldn’t want to declare them twice (DRY Blah blah blah)

    and potentially the query might be lines away from the initial declaration, so I might have to hunt for what the value was.

    Or, in the reverse, change the initial declaration and not worry if there was a media query override for that property later on in the code.

    #194623
    Paulie_D
    Member

    SASS or LESS then…make it a variable.

    potentially the query might be lines away from the initial declaration, so I might have to hunt for what the value was.

    Why not just put the media query right there then?

    Performance wise it’s not really an issue

    #194625
    moxieman
    Participant

    99% of the time it’s not an issue, I either declare right after or use non-shorthand (or if it’s variable worthy, make it a variable).

    It’s more of a curiosity than anything else, really.

    #194626
    Senff
    Participant

    In this specific case: yes, you have to either declare padding for ALL sides, or ONE side (and then do that twice). With normal CSS you can’t override just 2 or 3 sides in one line.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.