Databases
StackOverflow2013
Postsdbo
POMultiple box-shadow declarations in Sass
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMultiple box-shadow declarations in Sass
    primarykey
    data
    text
    <p>I would like to create a Sass mixin for the box-shadow property but am running into some trouble. Some of the existing code looks like this.</p> <pre><code>#someDiv { -moz-box-shadow:0 0 5px rgba(0,0,0,.25); } #someOtherDiv { -moz-box-shadow:0 0 5px rgba(0,0,0,.25) inset; } #theLastDiv { -moz-box-shadow: 0 0 5px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.2) inset; } </code></pre> <p>Trying to roll all of this into 1 mixin is becoming problematic. The documentation for using logic within mixins is pretty sparse.</p> <p>I would like to create some mixin along the lines of:</p> <pre><code>@mixin boxShadow($xOffSet, $yOffSet, $blur, $red, $green, $blue, $opacity, $inset : false) { @if $inset == true { -moz-box-shadow: #{$xOffSet}px #{$yOffSet}px #{$blur}px rgba($red,$green,$blue) inset; } @else { -moz-box-shadow: #{$xOffSet}px #{$yOffSet}px #{$blur}px rgba($red,$green,$blue); } } </code></pre> <p>This is throwing errors because I guess Sass can't evaluate the $inset variable.</p> <p>The previous example only demonstrates the problem I am having when it comes to to box-shadow being inset or not. The other problem I am having is when there are multiple box-shadows being declared on a single element. Refer to #theLastDiv described above if for reference.</p> <pre><code>@mixin boxShadow($declarations : 2, $xOffSet1, $yOffSet1, $blur1, $red1, $green1, $blue1, $opacity1 $xOffSet2, $yOffSet2, $blur2, $red2, $green2, $blue2, $opacity2) { @if $declarations == 1 { -moz-box-shadow: #{$xOffSet}px #{$yOffSet}px #{$blur}px rgba($red,$green,$blue); } @else if $declarations == 2 { -moz-box-shadow: #{$xOffSet1}px #{$yOffSet1}px #{$blur1}px rgba($red1,$green1,$blue1), #{$xOffSet2}px #{$yOffSet2}px #{$blur2}px rgba($red2,$green2,$blue2); } </code></pre> <p>Sometimes an element has one box-shadow and other times it has to separate box-shadows. Am I mistaken that Sass lacks the ability to decipher this logic and that to accomplish this would require separate Mixins (one for elements with one box shadow, another for mixins with two box shadows).</p> <p>And to complicate the matter, how does the opacity problem described above factor into this? Would love to get some feedback on this. Let me know if I'm mistaken or the way I'm thinking about the problem is flawed in general. Thanks!</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USKevin Burke
    1. USSteve Klein
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POMultiple box-shadow declarations in Sass
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POMultiple box-shadow declarations in Sass
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POMultiple box-shadow declarations in Sass
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload