Compiling Sass is probably the slowest part of your build, so this is worth a try if you're using Sass...
...If you're using the sass npm package to compile your SASS/SCSS, consider switching to sass-embedded. It should be a drop-in replacement in a large app and it...
...set the Sass options. Webpacker const sassLoaderConfig = environment.loaders.get('sass') const sassLoaderIndex = sassLoaderConfig.use.findIndex(config => { return config.loader === 'sass-loader' }) // Disable deprecation warnings inside dependencies sassLoaderConfig.use[sassLoaderIndex].options.sassOptions.quietDeps = true sassLoaderConfig.use[sassLoaderIndex].options.sassOptions.silenceDeprecations = ['import...
module.exports = { module: { rules: [ { test: /\.s[ac]ss$/i, use: [ "style-loader", "css-loader", { loader: "sass-loader", options: { sassOptions: { quietDeps: true, silenceDeprecations: ['import'], }, }, }, ], }, ], }, }; ESBuild esbuild.build({ // ... plugins: [ sassPlugin({ quietDeps: true, silenceDeprecations...
// jest.config.js import hq from 'alias-hq' module.exports = { ... moduleNameMapper: hq.get('jest'), } Support for SASS In Sass, your @import statements also use their own resolving. To bring your path aliases...
...to Sass, add this to your esbuild.config.js: First, a function that rewrites paths, itself using alias-hq: const path = require('path') const hq = require('alias-hq') function escapeStringRegexp(string) {
Multiply by 1x the unit: $number = 13 $length = $number * 1px // => 13px Removing a unit
Sass comes with many built-in functions to manipulate color. Some of the more interesting functions include: adjust-hue($color, $degrees) :Changes the hue of a color. lighten($color, $amount...
...you're going to need: yarn add esbuild-plugin-import-glob yarn add esbuild-sass-plugin create esbuild.config.js in the root folder of your project. A minimal config could look...
...and looks good. Finish remove gems from your Gemfile that are no longer necessary, e.g. sass-rails or uglifier run your test suite and make sure that all tests succeed...
} ::-moz-selection { background-color: red; } If you're using a CSS preprocessor like Sass, you can write a mixin that does the copying and pasting for you: =selection
@content ::selection @content Then use it like this in your .sass file: +selection background-color: red You will still have the rule twice in your CSS, but your .sass...
...lesson covers selectors, the box model, basic layout, the browser's inspector, and the Sass basics we use in all projects. Important Work on this lesson in teacher mode.
...stylesheet does and why we use one. You can write stylesheets with a preprocessor — Sass in the indented syntax we use — using variables, nesting, partials and mixins, and you follow...
...class => 'label') end content_tag(:span, label, options.merge(:class => classes.join(' '))) end 3 Use a Sass mixin to style icons When you want to change the style of an icon (e.g...
...this awkward expression: .element_with_icon .icon:before { color: red; } Instead I use a Sass mixin to write this: +icon color: red Here is the mixin (requires modern Sass versions...
...benefits from it. You can integrate Bootstrap into a Rails app from npm as Sass, without a CDN, and load only the parts you need. You can build layouts with...
...know which of them need JavaScript. You can customize Bootstrap's look through its Sass variables before it is loaded. Resources Read what's new to you, skim what's...
SASS has an @extend keyword to inherit styles. .alert color: red &.-framed border: 1px solid red padding: 5px &.-homepage @extend .-framed border-width: 5px When compiling, SASS will simply join...
...using the import and require of your bundler. Instead you must concatenate files using Sass' @import statement...
When writing a Sass function, you may run into an error message that may be confusing: @function rules may not contain style rules. What Sass is trying to tell you...
...is that a line in your Sass function is computing a result that is neither assigned to a variable nor returned. Keep in mind that all functions in Sass return...
If you want to to create maps within SASS/SCSS-files, it normally works like this: $some-map: (key1: value1, key2: value2) However, some maps can get big really fast, if they...
Writing a map likes this: $some-map: ( key1: value1, key2: value2 ) confuses the SASS-parser and you will get an error like ERROR: unclosed parenthesis. So the easiest...
...may want to set a specific property value to an existing variable in your SASS environment. A pratical example would be a list of color variables that you've defined...
...kind of value to be assigned (thus not being bound to CSS-context). The SASS compiler consequently preserves this functionality/behavior and the value you assign will be translated one by...
logical_path = RELATIVE_PATH_TO_YOUR_TEMPLATE path = File.join(Rails.root, logical_path) template = Sass::Rails::SassTemplate.new(path) environment = YourApp::Application.assets context = environment.context_class.new(environment, logical_path, Pathname.new(path)) output = template.render...
...OF_COLOR_VALUES # e.g. { 'primary' => [100, 250, 10] } end In an initializer, add module Sass::Script::Functions def color(color_name) assert_type color_name, :String context = @options[:custom][:resolver...
...default file extensions, like .rb, .erb, .css, .js. When using different markup like Haml, Sass, or CoffeeScript, you need to make Rails aware of its extensions and how comments work...
...into config/initializers/ and you are good to go: Rails.application.config.annotations.tap do |notes| notes.register_extensions('scss', 'sass') { |annotation| %r(//\s*(#{annotation}):?\s*(.*?)$) } notes.register_extensions('haml') { |annotation| %r(#\s*(#{annotation}):?\s*(.*?)$) } notes.register_extensions...
When working with large Sass files you will notice that the first request after a change to a Sass file takes quite some time. This is because the CSS files...
...are being generated from the Sass files the moment the application answers your request (Sass looks at the files and recompiles if the timestamp changed); it takes even longer when...
If you need to modify (e.g. add 2px) a Sass variable that defines multiple values as one (e.g. for short-hand CSS definitions such ass padding), you can by using...
...combined padding into one for vertical and one for horizontal padding) in your own Sass definitions, when using some framework definitions like bootstrap-sass, those variables are defined outside your...
When calling a Sass mixins, you usually don't need to quote arguments: +tint_article(#f21) However, when a CSS property consists of multiple parts (like background or box-shadow...
...the Sass parser will trip up: +box_shadow(0 1px 2px #000) // this will blow up The solution is to quote the argument like this: +box_shadow('0 1px 2px...
...unavoidable to have different CSS rules for Internet Explorer than for sane browsers. Using Sass, this can be achieved in a relatively non-hackish way without CSS hacks.
...Move your current Sass file into a partial. Let's assume it was called screen.sass. Rename it _screen.sass. Step 2 Create two new Sass files: Call this one screen.sass:
Write a // and indent every subsequent line by two spaces. This is great for documenting BEM blocks! // An action button...
...just like it would appear on white background with a .25 alpha channel. Advanced: Sass function that does all the magic for you If you don't know the base...
...RGB color, you can extract it using the red, green, and blue Sass functions. The following is basically the solution above, but also computes the base color and transparency value...
This collection of Sass mixins enables cross-browser styling (including IE with CSS3PIE) with less lines of code. This enables PIE for IE up to version 8 only (the first...
<%= stylesheet_link_tag 'screen', :media => 'screen' %> These would be your two screen Sasses: # screen_with_pie.sass =pie behavior: url(/stylesheets/lib/PIE.htc) position: relative @import base.sass # screen.sass =pie // No pie for you...
You don't need a Rails application to use Sass. Even when you're working on a static site you can generate your CSS through Sass. Install Sass with sudo...
...t being generated automatically without Rails (this would bite you after a deploy). Instead exclude .sass-cache, which will be created in whatever folder you run sass --watch in...