Multiple nested CSS namespaces with SASS?

Question

I cannot seem to find any documentation on the possibility (or if even possible) to do the following.

Below is the basic CSS/SASS namespaces declaration:

.example {
  border: {
    style: dashed;
    width: 30px;
    color: blue;
  }
}

Is it possible to still have this format, but chain the top, right, bottom, left declaration?

How I would imagine this being written:

.example {
  border: {
    top, right, bottom, left: {
      style: dashed;
      width: 30px;
      color: blue;
    }
  }
}

.example {
  border: {
    [top, right, bottom, left]: {
      style: dashed;
      width: 30px;
      color: blue;
    }
  }
}

David Dias · Accepted Answer · 2017-01-03 12:14:19Z

2

It is possible (sorry for my previous wrong answer). That example seems to be working perfectly with all versions of SASS:

.example {
  border: {
    top: {
      style: dashed;
      width: 30px;
      color: blue;
    }
    left: {
      style: dashed;
      width: 30px;
      color: blue;
    }
  }
}

Check the example on SassMeister.

edited Jan 3, 2017 at 12:14

answered Jan 3, 2017 at 11:59

David Dias

3123 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Shannon Young Over a year ago

I thought that might be the case, my examples were purely theory. Seems like something I should submit as a request on Github?

David Dias Over a year ago

@shannon-young, check my last example. Sorry for my wrong previous response (I learned something new on SASS today :)). It's possible to nest properties but you need to separate theme like the example.

Shannon Young Over a year ago

This is what I had initially, but if possible I was looking for a way to avoid the repetition. Thinking in D.R.Y terms.

David Dias Over a year ago

I see. I'm pretty sure it's not possible for now. See if it exist on Github some ticket about that, I'm sure someone else wanted to do the same that you want.

Kashif Raza · Accepted Answer · 2017-01-03 11:35:38Z

0

You will need to add them one by one after border:{}, property like this:

.example{
      border:{
          style: dashed;
          width:10px;
         color: blue;
      }
     border-top:{
         width:3px;
       }
    border-left:{
      color:red;
     }
   border-right:{
      width:25px;
     }
     padding:70px;
  }

answered Jan 3, 2017 at 11:35

Kashif Raza

849 bronze badges

1 Comment

Shannon Young Over a year ago

Thanks, it does not wholly answer my question though.

Collectives™ on Stack Overflow

Multiple nested CSS namespaces with SASS?

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related