Tag: SCSS-MIXINS
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
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
¿Cómo puedo resolver este problema en el proyecto principal? Porque he utilizado este código en todos los archivos, pero hace un mes no tenía ningún problema, sin embargo, después de un tiempo, Vocode me muestra este error. aquí está la imagen que muestra el error de ) se esperaba scss(css-rparentexpected) . . . Read more
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
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