...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...
...goodies that Rails developers are used to. Out of the box, Middleman brings Haml, Sass, helpers etc. However, it can be configured to do even better. This card is a...
...Windows. Add these gems: gem 'middleman-livereload' gem 'middleman-sprockets' # Asset pipeline! gem 'bootstrap-sass' # If you want to use Bootstrap gem 'byebug' gem 'capistrano' gem 'capistrano-middleman', require: false...
...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...
...to let the text color fade from red to green on hover, the following SASS is used (shorthand syntax): .element color: red transition: color .1s &:hover color: green
...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})
PDFKit converts a web page to a PDF document. It uses a Webkit engine under the hood...
} 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...
...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...
...also -webkit-line-clamp which works only on Chrome. Example Consider this HTML and Sass for a box that is not wide enough for its content: Hello universe! #greetings
Dies ist ein Text mit mehreren Zeilen... I recommend building a SASS mixin for this purpose: =line-clamp($lines) display: -webkit-box overflow: hidden overflow-wrap: break...
Internet Explorer until version 9 has some limitations when parsing CSS files Summarized, these are: Up to 31 CSS files...
...now have an idea where optimization might be feasible. Look around for suggestions, e.g. the sass-loader readme when you want to optimize Sass build time...
...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...
...release directory. Hint for github shorthand If your using something like gem 'font-awesome-sass', github: 'makandra/font-awesome-sass' and get an error Could not find gem 'font-awesome-sass', in any...
...of the sources, specifiy the version: gem 'font-awesome-sass', '=4.1.0', github: 'makandra/font-awesome-sass...
...into your Webpack's assets folder or write an npm package with an own sass file that can be imported from the Webpack manifest. Load fonts from your assets folder...
...path/application/index.js import './stylesheets/reset' import './stylesheets/main' // loads the fonts in let stylesheetsContext = require.context('./stylesheets/blocks', true, /\.sass$/) for(let key of stylesheetsContext.keys()) { stylesheetsContext(key) } // webpack_source_path/application/stylesheets/main.sass @import 'font_faces' html
...no idea why it works in development in the first place. Simply use the SASS helper: .tile background-image: image-url('foo.png') Managing 3rd party assets You don't want...
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...
getComputedStyle(someElement).getPropertyValue('--current-breakpoint-tier') If you're using Bootstrap and Sass, you can even do this: \:root @each $name, $min-width in $grid-breakpoints @media (min...
...Let's assume you have two images app/assets/images/layout/blue-button.png, and .../blue-button-hover.png and the following sass: .blue-button ... background: image-url("layout/blue-button.png") no-repeat &:hover background: image-url("layout/blue-button-hover.png") no-repeat
...Restart your server. Move the two images into a new folder app/assets/images/layout/buttons. Change your sass stylesheet to: @import "compass/utilities/sprites/base" @import "layout/buttons/*.png" .blue-button +buttons-sprite("blue-button") &:hover
...similar like CSS preprocssing is handling nested rules, but be aware of the specificity. /* SASS */ .nav-list, ol, li /* After preprocessing */ .nav-list li, ol li /* .nav-list li => specificity...
...similar like CSS preprocssing is handling nested rules, but be aware of the specificity. /* SASS */ .nav-list, ol, li /* After preprocessing */ .nav-list li, ol li /* .nav-list li => specificity...
...1rem + 0) yourself, but it might be the result of a CSS preprocessor (like Sass) or when using custom properties. The following is invalid: .example { --extra-padding: 0; padding: calc...
...css: './tmp/webpack/generated/_icon_font_[family].scss' }, watch: { pattern: 'app/webpack/images/icons/*', cwd: undefined }, }) ) // unfortunately, we need to adjust the sass-loader and add an additional `resolve-url-loader`, otherwise // the relative url(./fonts/...) entries...
...the IconfontPlugin will not work const sassLoaderConfig = environment.loaders.get('sass') const sassLoaderIndex = sassLoaderConfig.use.findIndex(config => { return config.loader === 'sass-loader' }) sassLoaderConfig.use[sassLoaderIndex].options.includePaths = ['tmp/webpack'] sassLoaderConfig.use.splice(sassLoaderIndex, 0, { loader: 'resolve-url-loader', })
...the requiring CSS file to .css.scss, turn calls to url into font-url (requires SASS) and pass a valid path to that font. To reference a file in /vendor/asset-libs/ /fonts...