...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...
...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
...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...
...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
PDFKit converts a web page to a PDF document. It uses a Webkit engine under the hood...
...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
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...
...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
...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...
...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...
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...
...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...
The Rails asset pipeline improves delivery of application assets (javascripts, stylesheets, images, fonts). Here are some basic facts about its...
...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...
...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...
...below to fit an image into a container. Example: # HAML .image = image_tag post.image # SASS .image +object-fit(cover, $aspect-ratio: 52%) Sass Mixin = object-fit($mode, $aspect-ratio)
...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', })
Opera 12 will support radial gradients. Our collection of Sass mixins has been updated accordingly...