...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...
...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 variables disappear when the stylesheet is compiled. CSS custom properties stay in the browser: they follow the cascade, can be changed at runtime, and let one value drive a...
...can explain what a CSS custom property is and how it differs from a Sass variable, in particular that it lives in the browser and follows the cascade.
...those assets before delivering them to the client. For example, you'll never see SASS anywhere in your browser. Rails offers various asset processing and delivery mechanisms which will be...
...esbuild: read its configuration, add an entrypoint, import files and npm packages, add a Sass or image asset, and find the build output. You can add and update JavaScript libraries...
...JavaScript build Propshaft, import maps, "no build" esbuild No-build means no bundling, no Sass, no JSX, and poor debugging; esbuild bundles, transpiles and fingerprints JS, CSS and images in...
...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
...asset management from Sprockets to Webpacker. Perhaps this migration guide might help you. Your Sass files can remain (mostly) unchanged, but they need to be compiled by Webpack now
Best results in other decks
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...