Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Multi-Line Properties in Stylus for box-shadow

Tags:

css

stylus

How can I rewrite the following line into a multi-line form in stylus?

div
  box-shadow 0 0 0 black, 1 0 0, black, 0 0 1, black

Using a much larger list of properties for box-shadow will make my editor explode. I want sth like this, but Stylus syntax will not allow it:

div
  box-shadow
    0 0 0 black,
    1 0 0 black,
    0 0 1 black

Also omitting the commas is not working. This is frustrating...

like image 466
frhd Avatar asked Mar 02 '14 00:03

frhd


2 Answers

I believe i have seen the coding set up like this:

div
  box-shadow:
    0 0 0 black,
    1 0 0 black,
    0 0 1 black

or try this if the one above does not work

div
  box-shadow: 0 0 0 black,
              1 0 0 black,
              0 0 1 black

I Hope This Helps You.


Also works in the context of media queries. (real world example for retina-enabled sprites). Note the (somewhat odd-looking) indentation of the second background-image.

.sprite
  background-image url('/assets/static/sprite.png')
  background-repeat no-repeat
  background-size 960px 480px;

  @media only screen and (-webkit-min-device-pixel-ratio 1.3),
    only screen and (-o-min-device-pixel-ratio 13/10),
    only screen and (min--moz-device-pixel-ratio 1.3),
    only screen and (min-device-pixel-ratio 1.3),
    only screen and (min-resolution 120dpi)
    background-image url('/assets/static/sprite_x2.png')
like image 155
Aurous Avatar answered Oct 11 '22 11:10

Aurous


I wrote like this.

div
  box-shadow \
    0 0 0 black \
    1 0 0 black \
    0 0 1 black
like image 41
KABA Avatar answered Oct 11 '22 12:10

KABA