...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...
The Rails asset pipeline improves delivery of application assets (javascripts, stylesheets, images, fonts). Here are some basic facts about its...
...adds a few fixes. Use it by adding it to your project and requiring Sass files as follows. // Include your custom Bootstrap variables instead, if you have some. @import ~bootstrap/scss/bootstrap/variables...
...or the above won't work: $element.select2({ theme: 'bootstrap' }) I recommend adding the following Sass to make empty options the same height as non-empty options: $option-line-height: $line...
...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)
...styling block elements you often apply both height and line-height to them. This Sass mixin helps you out with odd heights by always setting an even line height:
line-height: floor($height / 2) * 2 So when you call +height(19px) in Sass this will be the resulting CSS: height: 19px line-height: 18px
...when does it happen? Why are the image-url and font-url necessary for sass urls? What are "expiry" or "cache-control" headers? How do those work for our applications...
...When importing variables or mixins into a .sass file, we need to use @import other_file. We cannot use //= require 'other_file'. Do you understand why? Other resources
...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...
...lemonade descriptions. Unfortunately, the gem has a few problems: it does not work with Sass2 it always generates all sprites when the sass file changes, which is too slow for...
...Rails.root : RAILS_ROOT).to_s Compass.add_project_configuration(File.join(rails_root, "config", "compass.rb")) Compass.configure_sass_plugin! Compass.handle_configuration_change! create config/compass.rb (or copy from development repo): ^ This configuration file works...
Many mail clients do not support external style sheets. Some even require all styling inline, which means you'll have...
Since we are migrating from our homegrown mixins.sass and helpers.sass to Compass, here is a list of all the mixins...
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...
Opera 12 will support radial gradients. Our collection of Sass mixins has been updated accordingly...
This works like an extremely stripped down version of Rails, giving you HAML SASS helpers partials When done, everything is simply compiled to static HTML and CSS, so no...
...to both button and span) it will look different on each browser. Use this Sass snippet as a base style: button border: 0 padding: 0 cursor: pointer overflow: visible // removes...
...that box will create an undesired 'bottom padding' inside that box. Here is a Sass mixin that you can apply to such boxes. It makes the last child's bottom...
...via CSS, using the ::selection and ::-moz-selection pseudo-elements. Adding this to your Sass will make all text selections use a red background: ::selection background-color: #f00 ::-moz-selection...
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
...Rails locale files. Did you know that ... << is a merge key (similar to & in SASS) there are variables, called aliases. Definition: &alias Some content, usage: *alias. Caveats Specifying a key...
...looking at a manifest file (like application.css) which is always empty during development Your Sass file has a syntax error it did not handle properly
Free Bootstrap theme resembling Material Design. Bootswatch offers Sass and Less files, so the theme can easily be integrated into your usual Rails application. Implements only Bootstrap features which means...
[################################################# ] (49/65) travis-lint... Slow requires: 110.21 render_anywhere 147.33 nokogiri 173.83 haml 179.62 sass-rails 205.04 delayed_job_active_record 286.76 rails 289.36 mail 291.98 capistrano 326.05 delayed...
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...
The following Sass will do it: hr color: #ddd background-color: #ddd border: none