Articles of sass

SASS: use variables en múltiples archivos

Me gustaría mantener un archivo .scss central que almacene todas las definiciones de variables SASS para un proyecto. // _master.scss $accent: #6D87A7; $error: #811702; $warning: #F9E055; $valid: #038144; // etc… El proyecto tendrá una gran cantidad de archivos CSS, debido a su naturaleza. Es importante que declare todas las variables de estilo de proyecto en […]

Rails 4: ¿cómo uso Sass Mappings?

Estoy tratando de limpiar algunos de mis estilos para una aplicación de Rails 4.1. En lugar de enumerar todos los colores y sus variaciones, me gustaría crear un mapeo de colores / valores y luego generar el CSS iterando sobre él. # colors.css.scss $colors: ( “red”: #330000, “blue”: #003300 ); Sin embargo, me sale el […]

Usar variables para propiedades de CSS en Sass

Estoy escribiendo una @mixin con algunas matemáticas que calculan el porcentaje de ancho de un elemento, pero dado que es muy útil, me gustaría usar la misma función para otras propiedades, como márgenes y rellenos. ¿Hay alguna manera de pasar el nombre de la propiedad como argumento para un mixin? @mixin w_fluid($property_name, $w_element,$w_parent:16) { $property_name: […]

¿Tienes una variable en la ruta de las imágenes en Sass?

Quiero tener una variable que contenga la ruta de acceso raíz a todas mis imágenes en mi archivo CSS. No puedo entender si esto es posible en Sass puro (el proyecto web real no es RoR, por lo que no puede usar asset_pipeline o cualquiera de esos elegantes jazz). Aquí está mi ejemplo que no […]

Sass @each interpolación variable

En mi sitio más nuevo estoy tratando de hacer un esfuerzo masivo para usar las características de Sass para hacerme la vida más fácil. Estoy escribiendo algunos estilos simples de cuadro de error y pensé que el uso de cada uno simplificaría un poco. Tengo lo siguiente: $ message-box-types: error éxito normal @each $type in […]

@import en la statement @if en Sass

Quiero cargar solo el CSS necesario para la página de inicio de sesión para el rendimiento. En mis otras páginas quiero un archivo css agrupado que se almacenará en caché en cada página que contenga todo mi CSS. Tengo los siguientes archivos: minifiedcssforloginpage.scss grouped-pages.scss En minifiedcssforloginpage.scss Declaro $ load-complete-css: false. Después importo myproject.scss que contiene […]

SCSS extiende un selector nested y anula los conjuntos de reglas nesteds

Ok, entonces tengo un marcador de posición con un selector nested: %block { .title { font-size:12px; } } Quiero extenderlo y AGREGAR a la clase .title : .superblock { @extend %block; .title { font-weight:bold; } } La respuesta que QUIERO es esta: .superblock .title { font-size: 12px; font-weight: bold; } Sin embargo, la respuesta que […]

Estructura de activos SCSS adecuada en Rails

Entonces, tengo una estructura de directorio de app/assets/stylesheets/ que se parece a esto: |-dialogs |-mixins |—buttons |—gradients |—vendor_support |—widgets |-pages |-structure |-ui_elements En cada directorio, hay varios parciales sass (generalmente * .css.scss, pero uno o dos * .css.scss.erb). Podría estar asumiendo mucho, pero los Rails DEBERÍAN comstackr automáticamente todos los archivos en esos directorios debido […]

Fusionando selectores de mixins

Intento contener estilos / trucos generales en un archivo de mezcla separado que se puede aplicar a cualquier proyecto cuando sea necesario. Algunos de estos estilos requieren varios elementos para funcionar juntos para funcionar. Por ejemplo: _mixins.scss ==================== @mixin footer_flush_bottom { html { height: 100%; } body { min-height: 100%; position: relative; } #footer { […]

Variable Sass en la función CSS calc ()

Estoy tratando de usar la función calc() en una hoja de estilo Sass, pero estoy teniendo algunos problemas. Aquí está mi código: $body_padding: 50px body padding-top: $body_padding height: calc(100% – $body_padding) Si uso la literal de 50px lugar de mi variable body_padding , obtengo exactamente lo que quiero. Sin embargo, cuando cambio a la variable, […]