inset - sombra interior css

Múltiples declaraciones de caja-sombra en Sass.

Question

Me gustaría crear un mixin de Sass para la propiedad box-shadow pero estoy teniendo algunos problemas. Algunos de los códigos existentes se ven así.

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

Tratar de enrollar todo esto en una mezcla es cada vez más problemático. La documentación para usar la lógica dentro de los mixins es bastante escasa.

Me gustaría crear una mezcla 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 está generando errores porque supongo que Sass no puede evaluar la variable $ inset.

El ejemplo anterior solo demuestra el problema que estoy teniendo cuando se trata de insertar o no box-shadow. El otro problema que tengo es que cuando se declaran varias casillas de sombras en un solo elemento. Consulte # theLastDiv descrito anteriormente si es 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 una sombra de cuadro y otras veces tiene que separar sombras de cuadro. ¿Estoy equivocado de que Sass carece de la capacidad de descifrar esta lógica y que para lograr esto requeriría Mixins separados (uno para elementos con una sombra de cuadro, otro para mixins con dos sombras de cuadro).

Y para complicar el asunto, ¿cómo el problema de opacidad descrito anteriormente se toma en cuenta? Me encantaría recibir algún comentario sobre esto. Déjeme saber si estoy equivocado o la forma en que pienso sobre el problema es deficiente en general. ¡Gracias!

Answer 1

El código de compás podría valer la pena studying :

Sin embargo, también parecen usar algunos ayudantes del lado del servidor.

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

Answer 2

He agregado un poco de lógica para manejar los casos que describiste. 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);
}
}
}

La mezcla toma 17 parámetros. Lo siento por tener tantas, pero SASS no maneja matrices u objetos. En cualquier caso, 10 son opcionales. Son:

1. $ xOffSet - el desplazamiento x de la primera sombra
2. $ yOffSet - el desplazamiento y de la segunda sombra
3. $ blur - el desenfoque de la primera sombra
4. $ rojo - el valor rojo de la primera sombra
5. $ azul - el valor azul de la primera sombra
6. $ verde - el valor verde de la primera sombra
7. $ opacidad - la opacidad de la primera sombra
8. $ inserción (Opcional) - Verdadero o Falso. Indica si la primera sombra debe estar insertada (el valor predeterminado es falso)
9. $ dos (Opcional): Verdadero o Falso: Verdadero si desea definir dos bordes (el valor predeterminado es 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 rojo de la segunda sombra
14. $ blue2 (Opcional) - el valor azul de la segunda sombra
15. $ green2 (Opcional) - el valor verde de la segunda sombra
16. $ opacity2 (Opcional) - la opacidad de la segunda sombra
17. $ inset2 (Opcional) - Verdadero o Falso. Indica si la segunda sombra debe estar insertada (el valor predeterminado es falso)

Podrías configurar tus estilos así:

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

Lo que genera el siguiente 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;
}

Answer 3

Podrías usar colecciones y solo tener 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);
}

Answer 4

Prefiero mantener el parámetro CSS básico sin comas: 0 0 1px rgba(0, 0, 0, .5) lugar de 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), ...

Answer 5

Puedes usar un argumento variable como este:

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

Eso te permite tener comas en el argumento pasado. para que puedas pasar todas las sombras que quieras.

Un ejemplo usándolo:

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

Pasa en variables de color como esta:

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

ACTUALIZAR

$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 haya visto argumentos con la elipsis que permiten un número variable de argumentos antes (es decir, símbolos), consulte este enlace: http://sass-lang.com/documentation/file.SASS_CHANGELOG.html#variable_keyword_arguments