makandra Curriculum

Learn what a "reset stylesheet" is. Learn what "CSS precompilers" are. Examples are "Sass" and "Less" (we use "Sass"). Learn some basic Sass syntax: Variables Nesting Partials Mixins

...A visual guide to the most important CSS properties, with illustrations and animated examples. Sass Basics: Guide for our favorite CSS preprocessor Reset style sheet: Wikipedia article

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

...How can your assets be minified? How can your assets be transpiled, e.g. from Sass to CSS or from ESNext to ES2015? Can we define our own postprocessing steps? E.g...

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

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

Search in all decks