If you want your application to display properly on iPad, iPhone or Android there are two things to do:
Bourbon is a library of pure Sass mixins that are designed to be simple and easy to use. No configuration required. The mixins aim to be as vanilla as possible...
...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...
Since we are migrating from our homegrown mixins.sass and helpers.sass to Compass, here is a list of all the mixins...
...used in Bootstrap. Overwrite to customize your bootstrap application. When you are using bootstrap-sass, simply replace @ by...
This is useful if you want to extract some colors into a Sass $variable and are looking for a proper variable name...
...you play around with four rather complex CSS stylings and gives you CSS or SASS code to use your result right away. Gradients Borders Noise textures – offers a texture download...
...production mode. Daniel Zahn made a blogpost about our journey, precompiling assets, fingerprinting, Haml, Sass & Compass and what he calls "the dark heinous hutch...
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...
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...
step "Style: JS", "npx prettier", ".", "--check" step "Style: CSS", "npx stylelint", "**/*.{css,scss,sass}" step "Autoloading: Ruby", "bin/rails", "zeitwerk:check" step "Tests: Seeds", "env RAILS_ENV=test bin/rails db...
...and then use the SVG to mask it, giving it the correct shape. Using SASS, you can write something like this: // unfortunately, we manually have to list all our icons...
} else { // Code that should happen for other environments } Or in your CSS / Sass: html[data-environment="test"] { * { text-transform: none !important; } } See also Cucumber: Detect if the current...
...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...
...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...
...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.
Internet Explorer until version 9 has some limitations when parsing CSS files Summarized, these are: Up to 31 CSS files...
...and at the same time make its width automatically fit some content. Use this SASS: .center_float_outer_container overflow: hidden .center_float_container position: relative left: 50% float: left...
...you can simply generate non-opaque versions of a color without any preprocessor like Sass. This card describes how to do that. Note that we're not talking about defining...
...these (human readable) chunks: git diff master --color-moved=dimmed_zebra --find-renames=25% '*.sass' ':!vendor' git diff master --color-moved=dimmed_zebra --find-renames=25% '*.coffee' ':!vendor'
git diff master --color-moved=dimmed_zebra --find-renames=25% ':!*.coffee' ':!*.sass' ':!*.js' ':!*.haml' ':!*.rb' ':!vendor' git diff master --color-moved=dimmed_zebra --find-renames=25% vendor...
...on each side"? Here you go: .foo { width: calc(100% - (20px * 2)); } When using Sass, you need to interpolate Sass expressions: $margin: 20px * 2 .foo width: calc(100% - #{$margin})
...on the canvas needs to know something about your code or repository, e.g. which Sass variables exist or how a component is built, it asks the agent and gets an...