...needs no configuration, no Rake task, no Photoshop, just a little change in your Sass or SCSS files...
If you would like to use language specific layout (e.g. background-images) in your applications stylesheets you can achieve this...
...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...
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...
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...
Sass now comes with user-defined functions, keyword arguments, list manipulation. Haml and Sass are now two separate gems...
Sass is a meta-language on top of CSS that‘s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass...
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...
Do you have page caching enabled for the development environment and there are cached pages lying around in public/?
I am a huge fan of SASS (Syntactically Awesome Stylesheets) for styling Rails applications. I have been using it on all of my projects for quite a while now and...
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...
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...
...you're going to need: yarn add esbuild-plugin-import-glob yarn add esbuild-sass-plugin create esbuild.config.js in the root folder of your project. A minimal config could look...
...and looks good. Finish remove gems from your Gemfile that are no longer necessary, e.g. sass-rails or uglifier run your test suite and make sure that all tests succeed...
// jest.config.js import hq from 'alias-hq' module.exports = { ... moduleNameMapper: hq.get('jest'), } Support for SASS In Sass, your @import statements also use their own resolving. To bring your path aliases...
...to Sass, add this to your esbuild.config.js: First, a function that rewrites paths, itself using alias-hq: const path = require('path') const hq = require('alias-hq') function escapeStringRegexp(string) {
...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
...class => 'label') end content_tag(:span, label, options.merge(:class => classes.join(' '))) end 3 Use a Sass mixin to style icons When you want to change the style of an icon (e.g...
...this awkward expression: .element_with_icon .icon:before { color: red; } Instead I use a Sass mixin to write this: +icon color: red Here is the mixin (requires modern Sass versions...
Splitting up commits makes the process of reviewing often easier, since you can create several merge requests or review every...
} ::-moz-selection { background-color: red; } If you're using a CSS preprocessor like Sass, you can write a mixin that does the copying and pasting for you: =selection
@content ::selection @content Then use it like this in your .sass file: +selection background-color: red You will still have the rule twice in your CSS, but your .sass...
...an example how this might look: { "dependencies": { "@rails/webpacker": "4.x", "bootstrap-datepicker": "1.8.0", "bootstrap-sass": "3.4.1", "font-awesome": "4.7.x", "jquery": "2.2.4", "marked": "0.3.2", "select2": "./vendor/asset-libs/select2", }, "devDependencies": { "webpack-dev-server...
Cleanup Remove all gems you used for assets and the Asset Pipeline itself, e.g. sass-rails, uglifier, autoprefixer-rails, sprockets-rails, jquery-rails, bootstrap-sass and many more.
...version into your project and replace the old imports, e.g. with webpack import 'bootstrap-sass/assets/javascripts/bootstrap.js' to import 'bootstrap/dist/js/bootstrap.bundle.js' Your directories should look similar to this: stylesheets/blocks/ stylesheets/ext/ stylesheets/_environment.scss stylesheets/_variables.scss...
...them bit by bit and use their new versions. If you have used bootstrap-sass before you may have already overwritten some variables. Move them also to this block at...
...is normally handled by setting the left and right margins to auto, for example: // SASS $container_width: 100px .container width: $container_width margin: 0 auto However, this won’t work...
...on an absolutely positioned element. But there is a solution: // SASS $container_width: 100px .container width: $container_width position: absolute left: 50% margin-left: floor($container_width...
If you want to to create maps within SASS/SCSS-files, it normally works like this: $some-map: (key1: value1, key2: value2) However, some maps can get big really fast, if they...
Writing a map likes this: $some-map: ( key1: value1, key2: value2 ) confuses the SASS-parser and you will get an error like ERROR: unclosed parenthesis. So the easiest...