...from mysql to mysql2, but did not activitate the asset pipeline. Instead we used Sass the old-school way (stylesheets in...
...public/sass/*.sass) and relied on stylesheet_link_tag to activate the Sass compiler. Now all Sass-generated stylesheets inserted the following text into body:before: Encoding::CompatibilityError: incompatible character encodings...
Just dumping this in case somebody might need it. When you need a CSS value (a padding, margin, height etc...
Be careful to name any file @imported by SASS with a leading underscore. SASS files not beginning with an underscore will be rendered on their own, which will fail if...
...For me it broke only in production, which may be due to some settings in SASS-GEM/lib/sass/plugin/rails.rb.) From the SASS docs: The underscore lets Sass know that the file...
The adjust-hue function of Sass allows you to change a color's hue, but only relative to its current hue. adjust-hue(#ffff00, 120) // => #00ffff
The ruby sass gem also installs a command line tool...
...to convert to and from SCSS. Use it for a directory of .scss-files like sass-convert -R assets/stylesheets --from scss --to sass
Moved from Less to Sass. Bootstrap now compiles faster than ever thanks to Libsass, and we join an increasingly large community of Sass developers. Improved grid system...
...resets like box-sizing: border-box, margin tweaks, and more all in a single Sass file. Brand new customization options. Instead of relegating style embellishments like gradients, transitions, shadows, and...
...your assets (we recommend /vendor/asset-libs/font-awesome-sass). You can now use Font Awesome icons from your Sass files: @import font-awesome-sass .delete_link +prepend_icon($ICON_REMOVE) color: red
...und WTF THEY RENAMED ALL THE ICONS. You will need to adjust the Sass files to make it work with Font Awesome 4. The attached Ruby script to convert a...
...of us can get away with that, but thankfully, as Chris Eppstein points out, Sass 3.2 (not yet released) can generate a separate stylesheet with everything it needs to create...
Awesome Sass plugin to experiment with Subtle Patterns based textures. It automatically removes the base color from the pattern, leaving a semi-transparent texture that you can tint in any...
...adds a few fixes. Use it by adding it to your project and requiring Sass files as follows. // Include your custom Bootstrap variables instead, if you have some. @import ~bootstrap/scss/bootstrap/variables...
...or the above won't work: $element.select2({ theme: 'bootstrap' }) I recommend adding the following Sass to make empty options the same height as non-empty options: $option-line-height: $line...
...know the file extension of your desired search results, apply a file mask: # Only SASS files *.sass # Exclude all SASS files !*.sass # Only SASS files OR CSS files
The debate between using mixins or extends in Sass has been heating up recently. From the surface it appears they both provide solid benefits in helping us write consistent and...
Do you have page caching enabled for the development environment and there are cached pages lying around in public/?
...styling block elements you often apply both height and line-height to them. This Sass mixin helps you out with odd heights by always setting an even line height:
line-height: floor($height / 2) * 2 So when you call +height(19px) in Sass this will be the resulting CSS: height: 19px line-height: 18px
This works like an extremely stripped down version of Rails, giving you HAML SASS helpers partials When done, everything is simply compiled to static HTML and CSS, so no...
...to both button and span) it will look different on each browser. Use this Sass snippet as a base style: button border: 0 padding: 0 cursor: pointer overflow: visible // removes...
...that box will create an undesired 'bottom padding' inside that box. Here is a Sass mixin that you can apply to such boxes. It makes the last child's bottom...
use: [ { loader: 'style-loader', options: {...
{ loader: 'css-loader', options: {...
{ loader: 'postcss-loader', options: {...
{ loader: 'sass-loader', options: {...
], } When you import a file that matches the test regexp (i.e. any...
...loaders (which are usually npm modules) are run on it in reverse order. First, the sass-loader converts SASS to regular CSS. Then, the postcss-loader uses PostCSS to postprocess...
This article shows how to create a Sass mixin for a colored button. The button's foreground color is dynamically chosen between either black or white, depending on the given...
...background color. It's a nice intro into @if and @else conditionals in Sass...
Crazy hack. Might be useful one day. The code required has since been extracted into a library.
When we looked at this card together a year ago, we were no longer sure if unquote is actually useful...
Sass lets you easily specify multiple selectors at once like this: .some-block &.has-hover, &:hover outline: 1px solid red This will add a red outline on either real hover...
outline: 1px solid red ... will simply drop the &.has-hover part in ruby-sass(deprecated). sassc and Node Sass (Dart Sass transpiled to JS) are not affected by this...
...looking at a manifest file (like application.css) which is always empty during development Your Sass file has a syntax error it did not handle properly
Free Bootstrap theme resembling Material Design. Bootswatch offers Sass and Less files, so the theme can easily be integrated into your usual Rails application. Implements only Bootstrap features which means...