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...

...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...

Multiply by 1x the unit: $number = 13 $length = $number * 1px // => 13px Removing a unit

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...

...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...

Be careful to name any file @imported by SASS with a leading underscore. SASS files not beginning with an underscore will be rendered on their own, which will fail if...

...For me it broke only in production, which may be due to some settings in SASS-GEM/lib/sass/plugin/rails.rb.) From the SASS docs: The underscore lets Sass know that the file...

...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...

...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:

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...

...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...

...times, the CSS rules will be duplicated in the compiled CSS. Here is a Sass partial called _fonts.sass that contains both CSS rules and a mixin: @font-face

...CSS projects that are organized over multiple files: When you @import fonts from 5 Sass files, the @font-face declaration will be listed 5 times in the final CSS output...

...from mysql to mysql2, but did not activitate the asset pipeline. Instead we used Sass the old-school way (stylesheets in...

...public/sass/*.sass) and relied on stylesheet_link_tag to activate the Sass compiler. Now all Sass-generated stylesheets inserted the following text into body:before: Encoding::CompatibilityError: incompatible character encodings...

...few side effects is: =clearfix &:after content: "" display: block clear: both This is a Sass mixin. Issues clearing with display: table You will find many clearfix solutions that clear with...

Write a // and indent every subsequent line by two spaces. This is great for documenting BEM blocks! // An action button...

The adjust-hue function of Sass allows you to change a color's hue, but only relative to its current hue. adjust-hue(#ffff00, 120) // => #00ffff

If you want your application to display properly on iPad, iPhone or Android there are two things to do:

The ruby sass gem also installs a command line tool...

...to convert to and from SCSS. Use it for a directory of .scss-files like sass-convert -R assets/stylesheets --from scss --to sass

Just dumping this in case somebody might need it. When you need a CSS value (a padding, margin, height etc...