Varios box-shadow declaraciones en Sass

Me gustaría crear un Sass mixin para la caja de sombra de la propiedad, pero estoy con algunos problemas. Algunos de los existentes código se parece a esto.

#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;
}

Tratando de rodar en 1 mixin se está convirtiendo en algo problemático. La documentación para el uso dentro de la lógica de los mixins es bastante escasa.

Me gustaría crear algunos mixin a lo largo de las líneas de:

@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);
  }
}

Esto es tirar errores porque supongo que Sass no pueden evaluar el $de margen variable.

El ejemplo anterior sólo se muestra el problema que tengo cuando se trata de box-shadow siendo inserción o no. El otro problema que estoy teniendo es que cuando hay múltiples cuadro de sombras de ser declarada en un solo elemento. Se refieren a #theLastDiv descritos anteriormente, si para referencia.

@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);
  }

A veces un elemento tiene un box-shadow y otras veces ha separado cuadro de sombras. Estoy equivocado que Sass carece de la capacidad para descifrar esta lógica, y que para lograr esto requeriría separado Mixins (uno de los elementos con una caja de sombra, otro para los mixins con cuadro de dos sombras).

Y para complicar el asunto, ¿cómo la opacidad del problema descrito más arriba factor en esto? Me encantaría llegar algunos comentarios sobre este. Dime si me equivoco o la forma en que estoy pensando que el problema es deficiente en general. Gracias!

InformationsquelleAutor Steve Klein | 2011-03-23

5 Kommentare

  1. 21

    Puede utilizar una variable de un argumento como este:

    //Box shadows
    @mixin box-shadow($shadow...) {
      -webkit-box-shadow: $shadow;
         -moz-box-shadow: $shadow;       
              box-shadow: $shadow;
    }

    Que le permite tener comas en el argumento pasado. así que usted puede pasar todas las sombras que desee.

    Un ejemplo de uso es:

    @include box-shadow(2px 2px 2px rgba(#ccc, .8), -2px -2px 2px rgba(#ccc, 0.8)) ;

    Pasar variables de color como este:

    $shadow-color: red;  //could also be a #F9F8F6 type color
    @include box-shadow(0 2px 2px rgba($shadow-color, .9));

    ACTUALIZACIÓN

    $shadow-color: red;  //could also be a hex (like #F9F8F6) type color
    @include box-shadow(0 2px 2px rgba($shadow-color, .9));

    En caso de que no he visto argumentos con la elipsis permite un número variable de argumentos antes (es decir, splats) revise este enlace: http://sass-lang.com/documentation/file.SASS_CHANGELOG.html#variable_keyword_arguments

    • ¿Cómo pasar variables en el uso de este método? @include(1px 1px 1px $backgroundColor) no parece funcionar?
    • Viendo lo que han puesto allí, que han perdido el mixin nombre.
    • Lo siento – @incluyen box-shadow(0 0 3px $amarillo); devuelve una definición css que tiene la cadena «$amarillo» por el color, más que el valor en $de color amarillo;
    • ¿Cómo está la definición de $amarillo? esto me da el brillante sol de color frontera: $amarillo : #f2e00f; @incluyen box-shadow( 0 0px 20px $amarillo); : )
    • Tengo que admitir, yo no entendía el @mixin definición en la primera vista a causa de los puntos suspensivos ‘…’. Usted no necesita nada más, aparte de CSS válido de valores para box-shadow propiedades. Se upvote después de la aclaración.
    • la elipsis hace que sea un argumento splat – splats permitir un número variable de argumentos. Es un rubí concepto que se ha extendido a coffeescript & sass. @VolkerE. – consulte sass-lang.com/documentation/…

  2. 18

    Prefiero mantener básica de CSS parámetro sin comas: 0 0 1px rgba(0, 0, 0, .5) en lugar de con comas: 0, 0, 5, 0, 0, 0, .25.

    Esta es mi solución:

    @mixin box-shadow($shadow1, $shadow2:false, $shadow3:false, $shadow4:false, $shadow5:false) {
     $params: $shadow1;
      @if $shadow2 
        { $params: $shadow1, $shadow2; }
        @if $shadow3 != false
          { $params: $shadow1, $shadow2, $shadow3; }
          @if $shadow4 != false
            { $params: $shadow1, $shadow2, $shadow3, $shadow4; }
            @if $shadow5 != false
              { $params: $shadow1, $shadow2, $shadow3, $shadow4, $shadow5; }
    
      -webkit-box-shadow: $params;
         -moz-box-shadow: $params;
              box-shadow: $params;
    
    }
    
    @include box-shadow(-1px -1px 2px rgba(0, 0, 0, .05), 0 1px 1px white inset), ...
    • Mucho mejor que el 17 de parámetros. Gracias!
    • A pesar de que con esta solución el número de sombras que puede tener está limitado por el número de parámetros (en este caso 5 sombras). la respuesta es mucho más limpia y no tiene un límite en la cantidad de sombras.
  3. 5

    Usted podría utilizar colecciones y sólo tiene un parámetro:

    @mixin box-shadow($params) {
      -webkit-box-shadow: $params;
      -moz-box-shadow: $params;
      box-shadow: $params;
    }
    
    $shadows: 0px 0px 5px rgba(0, 0, 0, 0.25), 0px 1px 0px #000 inset;
    
    .myclass { 
       @include box-shadow($shadows);
    }
  4. 4

    He añadido un poco de lógica para resolver los casos que se describen. Aquí está el mixin:

    @mixin boxShadow($xOffSet, $yOffSet, $blur, $red, $green, $blue, $opacity, $inset : false, $two : false, $xOffSet2 : 0, $yOffSet2 : 0, $blur2 : 0, $red2 : 0, $green2 : 0, $blue2 : 0, $opacity2 : 0, $inset2 : false) {
      @if $inset {
        @if $two {
            @if $inset2 {
                -moz-box-shadow: #{$xOffSet}px #{$yOffSet}px #{$blur}px rgba($red,$green,$blue, $opacity) inset, #{$xOffSet2}px #{$yOffSet2}px #{$blur2}px rgba($red2,$green2,$blue2, $opacity2) inset;
            } @else {
                -moz-box-shadow: #{$xOffSet}px #{$yOffSet}px #{$blur}px rgba($red,$green,$blue, $opacity) inset, #{$xOffSet2}px #{$yOffSet2}px #{$blur2}px rgba($red2,$green2,$blue2, $opacity2);
            }
        } @else {
            -moz-box-shadow: #{$xOffSet}px #{$yOffSet}px #{$blur}px rgba($red,$green,$blue, $opacity) inset;
        }
      } @else {
        @if $two {
            @if $inset2 {
                -moz-box-shadow: #{$xOffSet}px #{$yOffSet}px #{$blur}px rgba($red,$green,$blue, $opacity), #{$xOffSet2}px #{$yOffSet2}px #{$blur2}px rgba($red2,$green2,$blue2, $opacity2) inset;
            } @else {
                -moz-box-shadow: #{$xOffSet}px #{$yOffSet}px #{$blur}px rgba($red,$green,$blue, $opacity), #{$xOffSet2}px #{$yOffSet2}px #{$blur2}px rgba($red2,$green2,$blue2, $opacity2);
            }
        } @else {
            -moz-box-shadow: #{$xOffSet}px #{$yOffSet}px #{$blur}px rgba($red,$green,$blue, $opacity);
        }
      }
    }

    El mixin tarda 17 parámetros. Lo siento por tener tantas, pero SASS no manejar arrays u objetos. En cualquier caso, 10 son opcionales. Ellos son:

    1. $xOffSet – el desplazamiento x de la primera sombra
    2. $yOffSet – el desplazamiento y de la segunda sombra
    3. $desenfoque – desenfoque de la primera sombra
    4. $rojo – el rojo de el valor de la primera sombra
    5. $azul – el valor de azul de la primera sombra
    6. $verde – el verde de valor de la primera sombra
    7. $opacidad la opacidad de la primera sombra
    8. $margen (Opcional) – Verdadero o Falso. Indica si la primera instantánea se debe reducir (por defecto falso)
    9. $dos (Opcional) – Verdadero o Falso – Verdadero si desea definir dos fronteras (por defecto falso)
    10. $xOffSet2 (Opcional) – el desplazamiento x de la segunda sombra
    11. $yOffSet2 (Opcional) – el desplazamiento y de la segunda sombra
    12. $blur2 (Opcional) – el desenfoque de la segunda sombra
    13. $red2 (Opcional)- el valor de rojo el segundo sombra
    14. $blue2 (Opcional) – el valor de azul de la segunda sombra
    15. $green2 (Opcional) – el valor ecológico de la segunda sombra
    16. $opacity2 (Opcional) – la opacidad de la segunda sombra
    17. $inset2 (Opcional) – Verdadero o Falso. Indica si el segundo sombra debería ser reducir (por defecto falso)

    Podría definir su estilo como este:

    #someDiv {
        @include boxShadow(0, 0, 5, 0, 0, 0, .25);
    }
    #someOtherDiv {
        @include boxShadow(0, 0, 5, 0, 0, 0, .25, true);
    }
    
    #theLastDiv {
        @include boxShadow(0, 0, 5, 0, 0, 0, .25, false, true, 0, 1, 0, 255, 255, 255, .2, true);
    }

    Que genera el siguiente código CSS:

    /* line 9, ../src/screen.scss */
    #someDiv {
      -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
    }
    
    /* line 12, ../src/screen.scss */
    #someOtherDiv {
      -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25) inset;
    }
    
    /* line 16, ../src/screen.scss */
    #theLastDiv {
      -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25), 0px 1px 0px rgba(255, 255, 255, 0.2) inset;
    }
    • Sí. Un poco después de que envió la pregunta que me he construido algo bastante mucho la misma cosa. Es realmente lamentable que no hay mejor manera para construir cosas como esta en SASS. Fue interesante si SASS añadido algunos concatenación tipo de funcionalidad. Tal vez eso es pedir demasiado.
  5. 0

    Brújula código puede ser vale la pena el estudio de:

    Sin embargo, parecen utilizar algún lado del servidor ayudantes también.

    @mixin box-shadow(
      $shadow-1 : default,
      $shadow-2 : false,
      $shadow-3 : false,
      $shadow-4 : false,
      $shadow-5 : false,
      $shadow-6 : false,
      $shadow-7 : false,
      $shadow-8 : false,
      $shadow-9 : false,
      $shadow-10: false
    ) {
      @if $shadow-1 == default {
        $shadow-1 : -compass-space-list(compact(if($default-box-shadow-inset, inset, false), $default-box-shadow-h-offset, $default-box-shadow-v-offset, $default-box-shadow-blur, $default-box-shadow-spread, $default-box-shadow-color));
      }
      $shadow : compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10);
      @include experimental(box-shadow, $shadow,
        -moz, -webkit, not -o, not -ms, not -khtml, official
      );
    }

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea