Articles of sass

Estrutura adequada de ativos do SCSS em rails

Então, eu tenho uma estrutura de diretório app/assets/stylesheets/ que se parece com isso: |-dialogs |-mixins |—buttons |—gradients |—vendor_support |—widgets |-pages |-structure |-ui_elements Em cada diretório, há vários parciais de sass (geralmente * .css.scss, mas um ou dois * .css.scss.erb). Eu posso estar assumindo muito, mas os rails DEVEM automaticamente compilar todos os arquivos nesses diretórios […]

Resultados inesperados ao usar o @extend para temas

Estou refatorando alguns dos meus códigos Sass e me deparei com um problema estranho. Meu código atualmente é assim: // household $household_Sector: ‘household’; $household_BaseColor: #ffc933; // sports $sports_Sector: ‘sports’; $sports_BaseColor: #f7633e; // the mixin to output all sector specific css @mixin sector-css($sector_Sector,$sector_BaseColor) { .sector-#{$sector_Sector} { &%baseColor { background-color: $sector_BaseColor; } } } // execute the […]

Definir variables ​​no Sass com base nas classs

Eu gostaria de saber se é possível definir uma variável no Sass dependendo se uma class está definida ou não. Eu preciso fazer alguns testes de tipo de fonte e gostaria de alterar a variável de fonte $basicFont dinamicamente com base na class de corpo. Por exemplo: $basicFont: Arial, Helvetica, sans-serif; body { &.verdana { […]

Variáveis ​​podem ser usadas em instruções de importação para arquivos Sass?

Em menos eu posso fazer algo parecido com isto @basePath:”../../some_crazy_project_path_to_repeat/less/”; @import “@{basePath}less.less”; Então eu tentei fazer a mesma coisa no 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. e @import “#{basePath}less.scss”; // Syntax error: File to import not found or unreadable: #{basePath}less.scss. Existe uma maneira de fazer isso […]

Modifique o arquivo no local (mesmo dest) usando Gulp.js e um padrão globbing

Eu tenho uma tarefa gulp que está tentando converter arquivos .scss em arquivos .css (usando gulp-ruby-sass) e, em seguida, coloque o arquivo .css resultante no mesmo lugar em que encontrou o arquivo original. O problema é que, como estou usando um padrão globbing, não sei necessariamente onde o arquivo original está armazenado. No código abaixo, […]

Placeholder Mixin SCSS / CSS

Estou tentando criar um mixin para placeholders no sass. Este é o mixin que eu criei. @mixin placeholder ($css) { ::-webkit-input-placeholder {$css} :-moz-placeholder {$css} ::-moz-placeholder {$css} :-ms-input-placeholder {$css} } É assim que eu gostaria de include o mixin: @include placeholder(font-style:italic; color: white; font-weight:100;); Obviamente isso não vai funcionar por causa de todos os dois-pontos e […]

Mesclando consultas de mídia, usando SASS e Breakpoint (Responder a)

O uso de SASS e Respond-To (Breakpoint) produz um arquivo .css com várias consultas de mídia, não mescladas. Não é grande coisa, mas no IE8, usando o css3-mediaqueries.js, causa o travamento do IE8. css3-mediaqueries.js adiciona uma tag de estilo para todas as mediaqueries, e o IE8 não pode chegar a 32 … Como posso mesclar […]

Como se pode importar apenas variables ​​e mixins de stylehsheets Scss?

Eu estou usando o framework CSS da Zurb Foundation 4 (S), e estou me deparando com uma questão de estilos massivamente duplicados. Isso ocorre porque em todos os arquivos em que eu @import ‘foundation’ , todos os estilos do Foundation também são importados (regras para body , .row , .button e friends). Isso leva a […]

Não é possível obter sass + compass + susy instalado devido ao conflito de versões

Eu estou trabalhando com Sass, Compass e Susy no OSX / Terminal. Mas não consigo fazer com que Susy trabalhe junto com Sass e Compass. O que eu fiz: sudo gem install sass sass -v Retorna: Sass 3.3.0 (Maptastic Maple) sudo gem install compass Isto parece também instalar o sass-3.2.14.gem, então a bússola-0.12.3.gem. compass -v […]

ciclismo através de uma lista de colors com sass

É possível ter uma lista de três colors: $ lista de colors: xyz; Em seguida, aplique essas três colors percorrendo-as e adicionando-as a um item de lista não ordenado. Eu quero: row 1 (gets color x) row 2 (gets color y) row 3 (gets color z) row 4 (gets color x) e assim por diante. […]