Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » Problemas con SASS y BackGround- Imagen

CSS - Problemas con SASS y BackGround- Imagen

Volver
Nuevo Tema
<<>>
 
Vista:
Mensajes realizados anteriormente (No estaban la última vez que entraste)Problemas con SASS y BackGround- Imagen
rafael (23/11/2019 13:39:42)92 visitas
1 respuesta
Mensajes realizados anteriormente (No estaban la última vez que entraste)Problemas con SASS y BackGround- Imagen
juan jose (29/12/2019 18:53:05)

Problemas con SASS y BackGround- Imagen

Publicado por rafael (2 intervenciones) el 23/11/2019 13:39:42
Hola a todos. Tengo este problema con SASS y no encuentro la manera de solucionarlo. Espero que me podáis ayudar. Pasa que cuando en el archivo SASS coloco un background-image con sus respectivos paréntesis para la ruta, cuando lo compila lo hace sin los paréntesis y la imagen no se muestra. ¿Alguna solución?. Gracias.

CÓDIGO EN ARCHIVO SCSS:



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
@mixin mainImagen ($medidaHorizontal, $medidaVertical){
    width: 100%;
    height: 65%;
    display: flex;
    background-position: $medidaHorizontal $medidaVertical;
    background-size: cover;
}
 
.main-imagen-beline {
    @include mainImagen(10%, 40%,);
    background-image: url ("../imagenes/modelo1/imagenprincipal.jpg");
}
 
.main-imagen-yessica {
    @include mainImagen(10%, 0%,);
    background-image: url ("../imagenes/modelo2/imagenprincipal.jpg");
}
 
.main-imagen-justiny {
    @include mainImagen(10%, 0%,);
    background-image: url ("../imagenes/modelo3/imagenprincipal.jpg");
}
 
CÓDIGO COMPILADO EN CSS (NÓTESE LA FALTA DE PARENTESIS EN LA RUTA):
 
.main-imagen-beline {
  width: 100%;
  height: 65%;
  display: flex;
  background-position: 10% 40%;
  background-size: cover;
  background-image: url "../imagenes/modelo1/imagenprincipal.jpg"; }
 
.main-imagen-yessica {
  width: 100%;
  height: 65%;
  display: flex;
  background-position: 10% 0%;
  background-size: cover;
  background-image: url "../imagenes/modelo2/imagenprincipal.jpg"; }
 
.main-imagen-justiny {
  width: 100%;
  height: 65%;
  display: flex;
  background-position: 10% 0%;
  background-size: cover;
  background-image: url "../imagenes/modelo3/imagenprincipal.jpg"; }
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de juan jose
Val: 196
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Problemas con SASS y BackGround- Imagen

Publicado por juan jose (54 intervenciones) el 29/12/2019 18:53:05
hola, el problema es por que tienes un espacio entre url y el parentesis ponlo asi:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@mixin mainImagen ($medidaHorizontal, $medidaVertical){
    width: 100%;
    height: 65%;
    display: flex;
    background-position: $medidaHorizontal $medidaVertical;
    background-size: cover;
}
 
.main-imagen-beline {
    @include mainImagen(10%, 40%,);
    background-image: url("../imagenes/modelo1/imagenprincipal.jpg");
}
 
.main-imagen-yessica {
    @include mainImagen(10%, 0%,);
    background-image: url("../imagenes/modelo2/imagenprincipal.jpg");
}
 
.main-imagen-justiny {
    @include mainImagen(10%, 0%,);
    background-image: url("../imagenes/modelo3/imagenprincipal.jpg");
}

y en el css te saldra asi

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.main-imagen-beline {
  width: 100%;
  height: 65%;
  display: flex;
  background-position: 10% 40%;
  background-size: cover;
  background-image: url("../imagenes/modelo1/imagenprincipal.jpg"); }
 
.main-imagen-yessica {
  width: 100%;
  height: 65%;
  display: flex;
  background-position: 10% 0%;
  background-size: cover;
  background-image: url("../imagenes/modelo2/imagenprincipal.jpg"); }
 
.main-imagen-justiny {
  width: 100%;
  height: 65%;
  display: flex;
  background-position: 10% 0%;
  background-size: cover;
  background-image: url("../imagenes/modelo3/imagenprincipal.jpg"); }

salu2
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar