Respuestas populares con la etiqueta

7 votos
Aceptado

¿Que significa en sass/scss "&"?

¿Entonces sería en este caso .show > & equivalente a .show > .nav-pills .nav-link? Sí. ¿Se hereda todas los selectores padres con &? Sí. Según la documentación oficial (Inglés): ...
6 votos
Aceptado

¿Existen diferencias entre SCSS y CSS?

CSS es el lenguaje de estilo que cualquier navegador entiende para diseñar páginas web. SCSS es un tipo especial de archivo para SASS, un programa escrito en Ruby que ensambla hojas de estilo CSS ...
Avatar del usuario OtroBrayan
4 votos
Aceptado

carga de iconos font awesome

Juan, debes tener un problema sea con el archivo de fontawesome que estás usando, sea con restricciones del navegador, o con las rutas u otra cosa. De todos modos en la página de FA, ellos dan una ...
Avatar del usuario A. Cedano
  • 94.5k
4 votos
Aceptado

problema con Pseudo-elementos ::before y ::after en css

Rápidamente se me ocurre que sería una muy buena opción para usar calc() para variar la posición a la izquierda left, tomando como referencia el 50% y restándole la mitad del ancho que ocupa la "...
Avatar del usuario Shaz
  • 29.2k
3 votos
Aceptado

Cómo puedo cambiar el primary color de un framework css?

Sass es un metalenguaje de CSS, es decir, es un lenguaje de script que es traducido a CSS. Del mismo modo que, por ejemplo, los cambios hechos en un código fuente en C no se reflejan en el programa ...
Avatar del usuario Alvaro Montoro
  • 49.4k
3 votos
Aceptado

Bucle for en Sass

Vale ya di con la solución. Para que nth-child() admita esa variable, la tengo que poner como #{$i}. Dejo un captura de pantalla por si a alguien le pasa algo similar.
Avatar del usuario Carlos Rayón Álvarez
3 votos

Cómo hacer un estilo en el que un ancestro cambia de clase

Realmente creo que lo que buscas no existe. Yo también he buscado más de una vez este comportamiento (hacer referencia al elemento abuelo en vez de al padre pero no he podido encontrar nada). Sin ...
Avatar del usuario Francisco Romero
3 votos
Aceptado

¿Cuándo y cómo usar la directiva @content en Sass?

El @content lo he usad en mixin con un enfoque similar al que propones: Para trabajar mediaqueries donde desee como este ejemplo: @mixin desde($size){ @if map-has-key($breakpoints,$size){ ...
Avatar del usuario HarleySG
3 votos
Aceptado

Puedo abreviar tipos de Input en Sass?

Según mi experiencia lo más cercano que hay sería usar el & o referenciador de selectores superiores (padres): input { &[type=text], &[type=password], &[type=email] { &:...
Avatar del usuario Shaz
  • 29.2k
3 votos

¿Se puede insertar un media query en un mixin de sass?

Editado El uso de content blocks tal y como menciona @blonfu puede llegar a ser muy útil, con la etiqueta @content podrás extender las capacidades de tu mixin. En la documentación de sass podrás ver ...
Avatar del usuario Daniel Rodríguez Meza
3 votos
Aceptado

media querie manager en sass

Media Queries No funcionó porque se utilizó max-with en lugar de max-width, ya que la primera es una Media features no válida. Aquí la solución al problema Media Queries: @mixin respond ($breakpoint) {...
Avatar del usuario David E. Luna M.
3 votos
Aceptado

¿Cómo añadir reglas css nuevas (o modificar existentes) al framework BULMA?

Lo primero es conocer cómo se deben declarar las reglas en css: Las etiquetas se declaran por nombre, sin signos: div {} Asignará el estilo a todos los elementos con esta etiqueta p.una-clase {} ...
Avatar del usuario Triby
  • 25.1k
3 votos
Aceptado

Como puedo compilar con gulp-sass?

El mensaje de error te esta intentando explicar que no has inicializado correctamente el paquete. Puntualmente señala que una forma de hacerlo es: var sass = require('gulp-sass')(require('sass')); ...
Avatar del usuario Marcos
  • 34.5k
3 votos

Quiero que el título de la imagen esté desaparecido y cuando pase el mouse por encima, aparezca: lo logro con CSS, pero no con SASS

En SASS, para obtener como resultado lo mismo que tenes en CSS, podrías hacerlo así: .content-img .image { .name { background-color: #202020; border-radius: 15px; color: #fff; ...
Avatar del usuario Marcos
  • 34.5k
2 votos

Compilar sass con Gulp - Problema con la compilación

Lo que yo hago es importar todos mis partial dentro del main.scss, y pienso que lo hiciste bien. Pero en tu archivo gulpfile.js solo tienes que llamar el main.scss, ya que los @imports los trabajará ...
Avatar del usuario Emerson
  • 21
2 votos
Aceptado

Botón con transición de CSS

El error sucede porque hay un conflicto entre la posición absoluta del botón y el span interno, por lo que yo te recomiendo que no uses top o left para moverlo, prueba con transform: translateX() ...
Avatar del usuario Edgar Gutiérrez
2 votos
Aceptado

CDN font-awesome no funciona correctamente

Te falta poner rel="stylesheet" en el link que hace referencia a font-awesome. Tiene que quedar así: <!DOCTYPE html> <html> <head> <link href="https://maxcdn....
Avatar del usuario Aitor
  • 1,008
2 votos
Aceptado

Consulta Compilación SASS con NPM en Servidor

Lo mas simple y correcto seria compilar en local para obtener los archivos estáticos (CSS, JavaScript, fuentes e imágenes) listos para producción. Ya que para una aplicación en Laravel que no dependa ...
Avatar del usuario Eduardo Rengifo
2 votos
Aceptado

Como puedo hacer un menu sobre una imagen?

El truco está en usar pixels y definir los margenes y rellenos deseados (además de sacarle el estilo lista) al elemento UL. en este ejemplo el left y bottom los puse en pixels, los podes usar en % ...
Avatar del usuario alo Malbarez
  • 9,533
2 votos
Aceptado

Sass Separación según número de elementos

Edit para poner el primer elemento al 0% y el último elemento al 100% en la solución que encontré es necesario saber cuantos elementos hay. Tal vez se pueda refinar HTML <body> <div class=...
Avatar del usuario alo Malbarez
  • 9,533
2 votos

problema al generar css con node-sass

Instala nuevamente el node-sass con esta version npm install [email protected] si te genera algun problema al momento de la instalacion prueba lo siguiente npm rebuild [email protected] --force si con ...
Avatar del usuario Leonardo Pineda
2 votos

¿Cómo enviar los estilos Sass compilados con vue-cli (webpack-simple) a un archivo externo?

Puedes segmentar tu estilo css en varios archivos directamente. Por ejemplo, en el archivo app.vue ( o como se llame su .vue inicial ) puede añadir lo siguiente: <style lang="scss"> @import ...
Avatar del usuario javimovi
  • 121
2 votos
Aceptado

Dar estilo a un elemento dependiendo del número de radio buttons marcados

Traducción de la respuesta de juzraai en un cross-post en el sitio en inglés Puedes generar esos selectores & ~ & ... usando un bucle for, interpolación de cadenas y concatenación: // ...
2 votos
Aceptado

El metodo map en SASS no me devuelve todos los valores

Nunca he usado SASS, pero mirando la documentación he descubierto la función inspect( ). Usándola, vemos que a { color: inspect( map-get( $colors, "darkTurquoise" ) ); } produce a { color: ...
Avatar del usuario Trauma
  • 26.6k
2 votos

¿Para qué sirve SASS en desarrollo web?

Como SASS es un lenguaje "Turing Complete" al satisfacer la Regla 110, puedes realizar cualquier calculo o programa computacional usándolo. Por consecuencia podrías programar absolutamente todo lo ...
Avatar del usuario Ruslan López
2 votos

Como se puede mejorar la compilación de SASS y Bootstrap usando npm?

Lo que puedes hacer es utilizar la extension Live Sass Compiler ya que comentas que usas vscode, compila todo el sass del proyecto a la vez, no requiere que tengas ningun paquete de npm instalado, ...
Avatar del usuario fabran99
  • 176
2 votos

Como se puede mejorar la compilación de SASS y Bootstrap usando npm?

Una forma que podrías hacer para optimizar la forma en como compilas es crear un archivo dentro del folder scss llamado main.scss. Dentro de este archivo, debes importar tus archivos scss @import '...
Avatar del usuario Roberto
  • 316
2 votos
Aceptado

¿Cómo cambio el color del borde de fuera de un button?

Lo que hice fue lo siguiente: Quito todos los bordes y sombras por defecto que incluye el botón de Bootstrap, con la propiedad outline: none y box-shadow: none. Se usa la declaración !important para ...
Avatar del usuario Cris223511.dev

Only top scored, non community-wiki answers of a minimum length are eligible