es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Tag: SCSS-MIXINS

Corregir problemas de ruta de scss en la aplicación de React durante la compilación.

Mi estructura de carpetas para mi aplicación de React es la siguiente: my-react-app |_public | |_assets | |_style.scss | |_elements | |_ _test.scss |_src |_index.scss |_index.js Ese es la estructura de mis carpetas para mi aplicación de React. index.js import ‘./index.scss’; index.scss @import “../public/assets/style”; style.scss @import url(elements/_test.scss); _test.scss body { . . . Read more

Variables anidados de Sass para estilizar.

Intenté optimizar mi estilo que tiene estilos repetidos en su mayoría. Tengo algo como esto: .ds-input.ds–valid .ds-input__control:not(#specificity-issue), .ds-select.ds–valid .ds-select__control:not(#specificity-issue) { border-color: var(–my-color); &:focus { border-color: var(–my-border-color); } } Intenté usar variables, pero las variables anidadas dan un resultado incorrecto. $dsSelectors: “ds-select, ds-input”; .#{$dsSelectors}.ds–valid.#{$dsSelectors}__control:not(#specificity-issue) { border-color: var(–my-color); &:focus { border-color: var(–my-border-color); . . . Read more

Recorriendo los puntos de interrupción a través de SCSS

Actualmente tengo lo siguiente, pero sería genial poder recorrer fácilmente los puntos de interrupción si es posible. @for $i from 1 through 200 { .m-#{$i}px { margin: 1px * $i !important; } &-sm { @include media-breakpoint-up(sm) { margin: 1px * $i !important; } } &-md { @include media-breakpoint-up(md) { margin: . . . Read more

Crear un triángulo con dirección dinámica CON SCSS

Por favor, necesito ayuda para crear una dirección dinámica de un triángulo con SCSS. Estoy usando un mixin pero no me está funcionando. Archivo HTML: <div class=”arrow-div”>Flecha</div> Archivo SCSS: .arrow-div{ font-size: 20px; display: flex; justify-content: center; align-items: center; width: 300px; height: 300px; margin: 50px auto; border:1px solid #ccc; position: relative; . . . Read more