Articles of sass

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

¿Se pueden usar variables en las sentencias de importación para archivos Sass?

En Less puedo hacer algo como esto @basePath:”../../some_crazy_project_path_to_repeat/less/”; @import “@{basePath}less.less”; Así que traté de hacer lo mismo en Sass $basePath:”../../some_crazy_project_path_to_repeat/less/”; @import “${basePath}less.scss”; // Syntax error: File to import not found or unreadable: ${basePath}less.scss. y @import “#{basePath}less.scss”; // Syntax error: File to import not found or unreadable: #{basePath}less.scss. ¿Hay alguna manera de hacer esto en Sass?

Placeholder Mixin SCSS / CSS

Estoy intentando crear un mixin para marcadores de posición en sass. Este es el mixin que he creado. @mixin placeholder ($css) { ::-webkit-input-placeholder {$css} :-moz-placeholder {$css} ::-moz-placeholder {$css} :-ms-input-placeholder {$css} } Así es como me gustaría incluir el mixin: @include placeholder(font-style:italic; color: white; font-weight:100;); Obviamente, esto no va a funcionar debido a todos los dos […]

Fusionar consultas de medios, usando SASS y Breakpoint (Responder a)

El uso de SASS y Responder a (Punto de interrupción) produce un archivo .css con múltiples consultas de medios, no fusionadas. No es gran cosa, pero en IE8, al utilizar css3-mediaqueries.js, causa un locking de IE8. css3-mediaqueries.js agrega una etiqueta de estilo para cada mediaqueries, e IE8 no puede obtener hasta 32 … ¿Cómo puedo […]

¿Cómo se pueden importar solo variables y mixins desde Scss stylehsheets?

Estoy usando el framework Zurb Foundation 4 (S) CSS, y me estoy encontrando con un problema de estilos masivamente duplicados. Esto se debe a que en todos los archivos en los que @import ‘foundation’ , todos los estilos de Foundation también se importan (reglas para body , .row , .button y friends). Esto lleva a […]

No se puede instalar sass + brújula + susy debido a conflicto de versión

Estoy trabajando con Sass, Compass y Susy en OSX / Terminal. Pero no puedo lograr que Susy trabaje junto con Sass y Compass. Qué he hecho: sudo gem install sass sass -v Devoluciones: Sass 3.3.0 (Maptastic Maple) sudo gem install compass Esto parece también instalar sass-3.2.14.gem, luego la brújula-0.12.3.gem. compass -v devoluciones: Compass 0.12.3 (Alnilam) […]

Al usar SASS, ¿cómo puedo importar un archivo desde un directorio diferente?

En SASS, ¿es posible importar un archivo de otro directorio? Por ejemplo, si tuviera una estructura como esta: – root_directory – sub_directory_a – _common.scss – template.scss – sub_directory_b – more_styles.scss template.scss podría importar _common.scss usando @import “common” pero ¿es posible que more_styles.scss importe _common.scss? @import “../sub_directory_a/common” algunas cosas diferentes, entre ellas @import “../sub_directory_a/common” y @import […]

Incluyendo otra clase en SCSS

Tengo esto en mi archivo SCSS: .class-a{ display: inline-block; //some other properties &:hover{ color: darken(#FFFFFF, 10%); } } .class-b{ //Inherite class-a here //some properties } En la clase-b, me gustaría heredar todas las propiedades y declaraciones anidadas de la class-a . ¿Cómo se hace esto? Intenté usar @include class-a , pero eso arroja un error […]