...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...
The following Sass will do the trick: button, input[type="reset"], input[type="button"], input[type="submit"], input[type="file"] > input[type="button"] &::-moz-focus-inner border: none
...following structure and classes: A very long city name (23 miles) This is the Sass that goes along with it, providing a fallback case for visitors without JavaScript that does...
Many mail clients do not support external style sheets. Some even require all styling inline, which means you'll have...
Consider this Sass: .comment width: 320px; height: 240px; Any textarea with the comment class will be sized 320 by 240 pixels. In WebKit browsers (Chrome, Safari, ...) or Firefox, this is...
CSS variables are very different from preprocessor variables. While preprocessors use variables to compile a static piece of CSS, CSS...