Articles of sass

SASS ignora variables, definidas en if-statement

Tengo un archivo llamado style.scss con el siguiente código: @import ‘variables’; body { color: $text-color; background: $background-color; } Y una parte llamada _variables.scss: $colorscheme: white; @if $colorscheme == white { $text-color: #333; $background-color: #fff; } @else { $text-color: #ccc; $background-color: #333; } La instrucción if funciona correctamente, pero las variables definidas en el interior no […]

¿Valor variable negativo Sass?

Tengo un par de selectores scss donde uso la misma cantidad positiva y negativa, como en: padding: 0 15px 15px; margin: 0 -15px 20px -15px; Preferiría usar una variable para todos los montos de 15px, pero esto no funciona: $pad: 15px; padding: 0 $pad $pad; margin: 0 -$pad 20px -$pad; Los montos de margen se […]

Sass @each con múltiples variables

Estoy empezando con Sass y Compass, y me encanta. Algo que me gustaría hacer es aprovechar la función @each para simplificar las tareas repetitivas. Sin embargo, solo he visto ejemplos de @each insertando una variable, y me gustaría poder usar múltiples variables. La forma estándar (de la referencia Sass ): @each $animal in puma, sea-slug, […]

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 […]