# Sass

Sass is a CSS extension language for writing stylesheets with features beyond standard CSS.

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## Bootstrap 5.3.7

DevFeed: [Bootstrap 5.3.7](<https://devfeed.tech/articles/bootstrap-5-3-7-22298.md>)

Original publisher: [Read original article](<https://blog.getbootstrap.com/2025/06/17/bootstrap-5-3-7/>)

Author: Mark Otto

Published: 2025-06-17T15:22:00Z

Content type: release

Language: en

Sources: [Bootstrap.com](<https://devfeed.tech/sources/bootstrap-com.md>)

Topics: [Bootstrap](<https://devfeed.tech/topics/bootstrap.md>), [Documentation](<https://devfeed.tech/topics/documentation.md>), [Astro](<https://devfeed.tech/topics/astro.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Sass](<https://devfeed.tech/topics/sass.md>), [Visual Studio Code](<https://devfeed.tech/topics/visual-studio-code.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [configuration](<https://devfeed.tech/tags/configuration.md>), [dependency](<https://devfeed.tech/tags/dependency.md>), [documentation](<https://devfeed.tech/tags/documentation.md>), [integrity](<https://devfeed.tech/tags/integrity.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [migration](<https://devfeed.tech/tags/migration.md>), [npm](<https://devfeed.tech/tags/npm.md>), [regression](<https://devfeed.tech/tags/regression.md>), [release](<https://devfeed.tech/tags/release.md>), [updates](<https://devfeed.tech/tags/updates.md>), [vscode](<https://devfeed.tech/tags/vscode.md>)

### AI overview

Bootstrap v5.3.7 is a patch release with fixes related to the migration to Astro, documentation, accessibility, JavaScript popovers and tooltips, Sass output, and recommended VSCode configuration. The release notes also mention a recent regression expected to be addressed in another patch release.

### Source excerpt

Bootstrap v5.3.7 was just released with some follow-up fixes from our migration to Astro, plus a handful of small fixes. We expect to have another patch release shortly due to at least one recent regression, so stay tuned for that. In the mean time, here are some highlights! Docs Fixed broken "View on GitHub" URLs Corrected HTML <head> content generated by the "Download examples" button Refined sanitizer documentation for clarity and completeness Improved accessibility in the "On this page" table of contents and section heading anchor links Relocated ads to the right sidebar to minimize content reflow Added a new section on the Download page for the Intelissence extension Clarified the "Via JavaScript" usage example for Accordion Collapse Made internal documentation improvements to support future maintenance (no visible user impact) Mention CDN integrity and crossorigin attributes in introduction page Enhance floating labels placeholder usage description Add example of showing dynamic range value with output Sass Consolidated multiple 'none' values in the box-shadow Sass mixin for cleaner output JavaScript Fixed popover and tooltip behavior with a trigger: "hover click" configuration Build tools Added recommended VSCode extensions and settings configuration to the repository Read the GitHub v5.3.7 changelog for a full list of changes (including a ton of documentation and dependency updates) in this release.

## Bootstrap Icons v1.12 and v1.13

DevFeed: [Bootstrap Icons v1.12 and v1.13](<https://devfeed.tech/articles/bootstrap-icons-v1-12-and-v1-13-22297.md>)

Original publisher: [Read original article](<https://blog.getbootstrap.com/2025/05/09/bootstrap-icons-1-12-1-13/>)

Author: Mark Otto

Published: 2025-05-09T00:01:00Z

Content type: release

Language: en

Sources: [Bootstrap.com](<https://devfeed.tech/sources/bootstrap-com.md>)

Topics: [Bootstrap](<https://devfeed.tech/topics/bootstrap.md>), [releases](<https://devfeed.tech/topics/releases.md>), [Sass](<https://devfeed.tech/topics/sass.md>), [Vite](<https://devfeed.tech/topics/vite.md>), [Figma Community](<https://devfeed.tech/topics/figma-community.md>), [npm](<https://devfeed.tech/topics/npm.md>), [GitHub](<https://devfeed.tech/topics/github.md>)

Tags: [bug-fixes](<https://devfeed.tech/tags/bug-fixes.md>), [docs](<https://devfeed.tech/tags/docs.md>), [figma-community](<https://devfeed.tech/tags/figma-community.md>), [github](<https://devfeed.tech/tags/github.md>), [icons](<https://devfeed.tech/tags/icons.md>), [install](<https://devfeed.tech/tags/install.md>), [npm](<https://devfeed.tech/tags/npm.md>), [releases](<https://devfeed.tech/tags/releases.md>), [v1](<https://devfeed.tech/tags/v1.md>), [vite](<https://devfeed.tech/tags/vite.md>)

### AI overview

A recap of Bootstrap Icons v1.12.x and v1.13.x releases, covering new icons, documentation updates, Sass guidance for Vite, bug fixes, a search hotfix, installation options, and publication of the Figma file to Figma Community.

### Source excerpt

In the last few weeks, a handful of new Bootstrap Icons releases have gone out. Here's a recap of what's new in our v1.12.x and v1.13.x releases so far. v1.12 v1.12.0 added a single icon, mostly because people wouldn't stop asking for it haha, and v1.12.1 added a page to the docs for it. That was all for Bluesky. v1.13.0 and v1.13.1 New in v1.13.0 are several icons, some guidance around how to use Sass files with Vite, and a few little bug fixes to some fill rules. v1.13.1 was a hotfix to resolve an issue with search on our docs.

## Bootstrap 5.3.4

DevFeed: [Bootstrap 5.3.4](<https://devfeed.tech/articles/bootstrap-5-3-4-22294.md>)

Original publisher: [Read original article](<https://blog.getbootstrap.com/2025/04/03/bootstrap-5-3-4/>)

Author: Mark Otto

Published: 2025-04-03T15:22:00Z

Content type: release

Language: en

Sources: [Bootstrap.com](<https://devfeed.tech/sources/bootstrap-com.md>)

Topics: [Bootstrap](<https://devfeed.tech/topics/bootstrap.md>), [changelog](<https://devfeed.tech/topics/changelog.md>), [CSS](<https://devfeed.tech/topics/css.md>), [Sass](<https://devfeed.tech/topics/sass.md>)

Tags: [bug-fixes](<https://devfeed.tech/tags/bug-fixes.md>), [changelog](<https://devfeed.tech/tags/changelog.md>), [css](<https://devfeed.tech/tags/css.md>), [dark-mode](<https://devfeed.tech/tags/dark-mode.md>), [display](<https://devfeed.tech/tags/display.md>), [npm](<https://devfeed.tech/tags/npm.md>), [padding](<https://devfeed.tech/tags/padding.md>), [release](<https://devfeed.tech/tags/release.md>), [v5](<https://devfeed.tech/tags/v5.md>)

### AI overview

Bootstrap v5.3.4 is a release containing bug fixes and documentation updates. Highlighted changes include fixes for modal and offcanvas headers, close-button display, carousel behavior across color modes, floating-label alignment, Sass nested-rule deprecation warnings, and popover toggling.

### Source excerpt

Bootstrap v5.3.4 is here with several bug fixes and a load of documentation updates. Here are a handful of highlights from the CSS and JS changes: Fixed modal and offcanvas headers collapsing when any padding variables were set to 0. Fixed close button display in color modes. Fixed light mode carousel when in dark mode. Updated floating labels for better <select> alignment and other styling issues. Fixed a Sass 1.77.7 deprecation for nested rules Fixed popover toggling twice to close. Read the GitHub v5.3.4 changelog for a full list of changes (including a ton of documentation and dependency updates) in this release.

## Bootstrap 5.3.3

DevFeed: [Bootstrap 5.3.3](<https://devfeed.tech/articles/bootstrap-5-3-3-22293.md>)

Original publisher: [Read original article](<https://blog.getbootstrap.com/2024/02/20/bootstrap-5-3-3/>)

Author: Julien Déramond

Published: 2024-02-20T15:22:00Z

Content type: release

Language: en

Sources: [Bootstrap.com](<https://devfeed.tech/sources/bootstrap-com.md>)

Topics: [Bootstrap](<https://devfeed.tech/topics/bootstrap.md>), [bug](<https://devfeed.tech/topics/bug.md>), [Documentation](<https://devfeed.tech/topics/documentation.md>), [Sass](<https://devfeed.tech/topics/sass.md>), [selectors](<https://devfeed.tech/topics/selectors.md>), [Vite](<https://devfeed.tech/topics/vite.md>)

Tags: [bug-fixes](<https://devfeed.tech/tags/bug-fixes.md>), [css](<https://devfeed.tech/tags/css.md>), [documentation](<https://devfeed.tech/tags/documentation.md>), [improvements](<https://devfeed.tech/tags/improvements.md>), [release](<https://devfeed.tech/tags/release.md>), [selectors](<https://devfeed.tech/tags/selectors.md>), [vite](<https://devfeed.tech/tags/vite.md>)

### AI overview

Bootstrap v5.3.3 is a release focused on bug fixes, documentation improvements, and color-mode enhancements. It updates Sass variable imports, fixes a selector-engine regression involving multiple IDs, adjusts color-mode behavior and documentation, and includes miscellaneous component, validation, accessibility, and RTL fixes.

### Source excerpt

Bootstrap v5.3.3 is here with bug fixes, documentation improvements, and more follow-up enhancements for color modes. Keep reading for the highlights! Highlights Fixed a breaking change introduced with color modes where it was required to manually import variables-dark.scss when building Bootstrap with Sass. Now, _variables.scss will automatically import _variables-dark.scss. If you were already importing _variables-dark.scss manually, you should keep doing it as it won't break anything and will be the way to go in v6. Fixed a regression in the selector engine that wasn't able to handle multiple IDs anymore. Color modes Badges now use the .text-bg-* text utilities to be certain that the text is always readable (especially when the customized colors are different in light and dark modes). Fixed our color-modes.js script to handle the case where the OS is set to light mode and the auto color mode is used on the website. If you copied the script from our docs, you should apply this change to your own script. Fixed color schemes description in the color modes documentation to show that color-scheme() only accept light and dark values as parameters. Miscellaneous Allowed <dl>, <dt> and <dd> in the sanitizer. Dropped evenly items distribution for modal and offcanvas headers. Fixed the accordion CSS selectors to avoid inheritance issues when nesting accordions. Fixed the focus box-shadow for the validation stated form controls. Fixed the focus ring on focused checked buttons. Fixed the product example mobile navbar toggler. Changed the RTL processing of carousel control icons. Docs Dropped unnecessary right margin for example code blocks. Fixed emphasis text utilities usage in background utilities examples section. Added an technical explanation on how to render an accordion expanded by default. Changed Vite config path import in Vite guide. Enhanced the card image description of the .card-img-* classes. Mentioned shift-color() function in the Sass customization page among

## CSS and TailwindCSS Approaches to Styling Websites in 2024

DevFeed: [CSS and TailwindCSS Approaches to Styling Websites in 2024](<https://devfeed.tech/articles/styling-in-2024-34908.md>)

Original publisher: [Read original article](<https://frontendfocus.substack.com/p/styling-in-2024>)

Author: Mads Brodt

Published: 2023-12-27T16:00:42Z

Content type: opinion

Language: en

Sources: [Front-End Focus](<https://devfeed.tech/sources/front-end-focus.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [Front end](<https://devfeed.tech/topics/frontend.md>), [Tailwind CSS](<https://devfeed.tech/topics/tailwind.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [Sass](<https://devfeed.tech/topics/sass.md>), [Less](<https://devfeed.tech/topics/less.md>), [browsers](<https://devfeed.tech/topics/browsers.md>), [Design system](<https://devfeed.tech/topics/design-system.md>)

Tags: [2017](<https://devfeed.tech/tags/2017.md>), [browsers](<https://devfeed.tech/tags/browsers.md>), [css](<https://devfeed.tech/tags/css.md>), [design-system](<https://devfeed.tech/tags/design-system.md>), [flexbox](<https://devfeed.tech/tags/flexbox.md>), [front-end](<https://devfeed.tech/tags/front-end.md>), [less](<https://devfeed.tech/tags/less.md>), [sass](<https://devfeed.tech/tags/sass.md>), [tailwind](<https://devfeed.tech/tags/tailwind.md>)

### AI overview

This opinion article examines approaches to styling websites in 2024. It argues that vanilla CSS has become more capable through features such as custom properties, CSS Grid, and CSS nesting, while TailwindCSS remains popular for reducing style conflicts and discouraging arbitrary values. The article also emphasizes that TailwindCSS still requires knowledge of underlying CSS concepts such as Flexbox, Grid, and the box model.

### Source excerpt

Hi again!

## Tackling Hugo Integration of Asciidoctor

DevFeed: [Tackling Hugo Integration of Asciidoctor](<https://devfeed.tech/articles/tackling-hugo-integration-of-asciidoctor-26075.md>)

Original publisher: [Read original article](<https://blog.arkey.fr/2020/04/23/tackling-hugo-integration-of-asciidoctor/>)

Author: brice.dutheil@gmail.com (Brice Dutheil)

Published: 2020-04-23T21:59:50Z

Content type: tutorial

Language: en

Sources: [The Coffee Workshop](<https://devfeed.tech/sources/the-coffee-workshop.md>)

Topics: [Hugo](<https://devfeed.tech/topics/hugo.md>), [CSS](<https://devfeed.tech/topics/css.md>), [Sass](<https://devfeed.tech/topics/sass.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [code](<https://devfeed.tech/tags/code.md>), [css](<https://devfeed.tech/tags/css.md>), [hugo](<https://devfeed.tech/tags/hugo.md>), [sass](<https://devfeed.tech/tags/sass.md>), [script](<https://devfeed.tech/tags/script.md>)

### AI overview

This tutorial describes integrating Asciidoctor with Hugo and addressing rendering, syntax highlighting, CSS conflicts, Sass or SCSS overrides, and Font Awesome compatibility issues.

### Source excerpt

Integrate Asciidoctor as everyone should expect While Hugo comes with Asciidoctor support, they are in reality several issues to account for at this time: While basic rendering of asciidoc files works, we soon encounter problems ; the very first

## Next.js 9.3

DevFeed: [Next.js 9.3](<https://devfeed.tech/articles/next-js-9-3-3260.md>)

Original publisher: [Read original article](<https://nextjs.org/blog/next-9-3>)

Author: Tim Neutkens

Published: 2020-03-09T18:50:27Z

Content type: release

Language: en

Sources: [Next.js Blog](<https://devfeed.tech/sources/next-js-blog.md>)

Topics: [Next.js](<https://devfeed.tech/topics/next-js.md>), [Server-side rendering](<https://devfeed.tech/topics/server-side-rendering.md>), [Content Management System](<https://devfeed.tech/topics/cms.md>), [Sass](<https://devfeed.tech/topics/sass.md>), [Optimization](<https://devfeed.tech/topics/optimization.md>), [web applications](<https://devfeed.tech/topics/web-applications.md>)

Tags: [applications](<https://devfeed.tech/tags/applications.md>), [building](<https://devfeed.tech/tags/building.md>), [component](<https://devfeed.tech/tags/component.md>), [content](<https://devfeed.tech/tags/content.md>), [css](<https://devfeed.tech/tags/css.md>), [display](<https://devfeed.tech/tags/display.md>), [framework](<https://devfeed.tech/tags/framework.md>), [generation](<https://devfeed.tech/tags/generation.md>), [github](<https://devfeed.tech/tags/github.md>), [html](<https://devfeed.tech/tags/html.md>), [next-js](<https://devfeed.tech/tags/next-js.md>), [optimization](<https://devfeed.tech/tags/optimization.md>), [server](<https://devfeed.tech/tags/server.md>), [speed](<https://devfeed.tech/tags/speed.md>), [ssr](<https://devfeed.tech/tags/ssr.md>), [update](<https://devfeed.tech/tags/update.md>), [web](<https://devfeed.tech/tags/web.md>), [web-applications](<https://devfeed.tech/tags/web-applications.md>)

### AI overview

Next.js 9.3 introduces improved static-site generation with new data-fetching methods, preview mode for CMS drafts, built-in Sass and CSS Modules support, statically generated 404 pages, a smaller runtime, and GitHub Discussions integration.

### Source excerpt

Next.js 9.3 introduces new static-site generation improvements, native support for SCSS, reduced bundle sizes, static 404 pages, and more!

## Migrating Right-to-Left CSS Generation from Sass to RTLCSS

DevFeed: [Migrating Right-to-Left CSS Generation from Sass to RTLCSS](<https://devfeed.tech/articles/css-done-right-post-rtlcss-28070.md>)

Original publisher: [Read original article](<https://tech.trivago.com/post/css-done-right-post-rtlcss/>)

Author: Christoph Reinartz Follow

Published: 2017-07-07T00:00:00Z

Content type: article

Language: en

Sources: [Trivago](<https://devfeed.tech/sources/trivago.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [migration](<https://devfeed.tech/topics/migration.md>), [PostCSS](<https://devfeed.tech/topics/postcss.md>), [Sass](<https://devfeed.tech/topics/sass.md>), [Automation](<https://devfeed.tech/topics/automation.md>)

Tags: [automation](<https://devfeed.tech/tags/automation.md>), [configuration](<https://devfeed.tech/tags/configuration.md>), [css](<https://devfeed.tech/tags/css.md>), [frontend](<https://devfeed.tech/tags/frontend.md>), [migration](<https://devfeed.tech/tags/migration.md>), [sass](<https://devfeed.tech/tags/sass.md>)

### AI overview

The article explains trivago's migration of right-to-left CSS generation from Sass mixins and variables to RTLCSS post-processing. It describes the motivations, including reducing source complexity, avoiding manual authoring errors, and removing shared RTL configuration requirements, along with the move to a Node-based PostCSS build stack.

### Source excerpt

Our first [right-to-left platform](https://www.trivago.co.il/) was released in 2014. We had developed a solution to generate right-to-left CSS with Sass mixins and variables as we have [described](https://tech.trivago.com/2015/04/27/right-to-left/) in a blog article. We used this approach for nearly 3 years but recently migrated the right-to-left CSS generation from pre-processing to post-processing with [RTLCSS](http://rtlcss.com/). With this article I would like to share the reasons for the migration as well as our experiences and lessons learned.

## Configure a proxy for your API calls with Angular CLI

DevFeed: [Configure a proxy for your API calls with Angular CLI](<https://devfeed.tech/articles/configure-a-proxy-for-your-api-calls-with-angular-cli-21301.md>)

Original publisher: [Read original article](<https://juri.dev/blog/2016/11/configure-proxy-api-angular-cli/>)

Published: 2016-11-06T00:00:00Z

Content type: tutorial

Language: en

Sources: [Juri Strumpflohner](<https://devfeed.tech/sources/juri-strumpflohner.md>)

Topics: [Angular CLI](<https://devfeed.tech/topics/angular-cli.md>), [Angular](<https://devfeed.tech/topics/angular.md>), [API](<https://devfeed.tech/topics/api.md>), [Cross-origin resource sharing (CORS)](<https://devfeed.tech/topics/cors.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Webpack](<https://devfeed.tech/topics/webpack.md>), [REST API](<https://devfeed.tech/topics/rest-api.md>), [TypeScript](<https://devfeed.tech/topics/typescript.md>), [CSS](<https://devfeed.tech/topics/css.md>), [Sass](<https://devfeed.tech/topics/sass.md>), [Ajax](<https://devfeed.tech/topics/ajax.md>), [HTTP](<https://devfeed.tech/topics/http.md>)

Tags: [angular](<https://devfeed.tech/tags/angular.md>), [api](<https://devfeed.tech/tags/api.md>), [browser](<https://devfeed.tech/tags/browser.md>), [cli](<https://devfeed.tech/tags/cli.md>), [cors](<https://devfeed.tech/tags/cors.md>), [css](<https://devfeed.tech/tags/css.md>), [development](<https://devfeed.tech/tags/development.md>), [frontend](<https://devfeed.tech/tags/frontend.md>), [http](<https://devfeed.tech/tags/http.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [proxy](<https://devfeed.tech/tags/proxy.md>), [rest-api](<https://devfeed.tech/tags/rest-api.md>), [typescript](<https://devfeed.tech/tags/typescript.md>), [webpack](<https://devfeed.tech/tags/webpack.md>)

### AI overview

A tutorial explains how to configure the Angular CLI development server to proxy API calls to a separate backend, avoiding the need to use full backend URLs in the application and helping address cross-origin restrictions during local development.

### Source excerpt

Lorem ipsum dolor sit amet

## Implementing PhotoShop font sizes and tracking in CSS, points to pixels conversion

DevFeed: [Implementing PhotoShop font sizes and tracking in CSS, points to pixels conversion](<https://devfeed.tech/articles/implementing-photoshop-font-sizes-and-tracking-in-css-points-to-pixels-conversion-37272.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/font-size-and-tracking-points-to-pixels/>)

Author: Stanko

Published: 2016-09-08T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [Sass](<https://devfeed.tech/topics/sass.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>)

Tags: [conversion](<https://devfeed.tech/tags/conversion.md>), [css](<https://devfeed.tech/tags/css.md>), [function](<https://devfeed.tech/tags/function.md>), [mixins](<https://devfeed.tech/tags/mixins.md>), [photoshop](<https://devfeed.tech/tags/photoshop.md>), [pixels](<https://devfeed.tech/tags/pixels.md>), [points](<https://devfeed.tech/tags/points.md>), [sass](<https://devfeed.tech/tags/sass.md>), [scss](<https://devfeed.tech/tags/scss.md>), [tracking](<https://devfeed.tech/tags/tracking.md>)

### AI overview

A tutorial on converting Photoshop font sizes from points to CSS pixels and translating Photoshop tracking into CSS letter spacing using Sass functions and mixins. It explains when to use each construct and provides example Sass and generated CSS.

### Source excerpt

We've all been there - trying to get right font sizes from PhotoShop to CSS. Designers usually work with points, which are used in the print, but not common on the web. They also use term tracking a lot, which is actually only a letter spacing with different units. You can recalculate everything by hand and try to keep track of it. But we can use the goodies of SCSS to make that process a bit easier. Point to pixel ratio is 1pt = 1.333333px. We'll create SASS function to do conversion for us. And PhotoShop tracking works relative to the font size. One point of tracking is 1/1000 of the font size. For this one we'll create a mixin. // Converts pt to px @function pt-to-px($size-in-points){ @return #{ round($size-in-points * 1.333333) }px; } // Adds letter spacing to match photoshop tracking @mixin tracking($ps-tracking){ letter-spacing: #{ $ps-tracking / 1000 }em; } // Usage .Component { @include tracking(-5); font-size: pt-to-px(20); line-height: pt-to-px(30); } This will generate following CSS: .Component { letter-spacing: -.005em; font-size: 15px; line-height: 23px; } Note that function and mixin can do pretty much the same job. But it makes more sense to use mixins when including complete styles, and functions to return values. So conversion makes sense to be a function, as we can use it for font size, line height or anything else. Conversion of tracking to letter spacing is including a specific style, so keep it in a mixin.

## SASS random() and circle animation

DevFeed: [SASS random() and circle animation](<https://devfeed.tech/articles/sass-random-and-circle-animation-37345.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/sass-random-and-circle-animation/>)

Author: Stanko

Published: 2016-08-30T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [Sass](<https://devfeed.tech/topics/sass.md>), [CSS](<https://devfeed.tech/topics/css.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [function](<https://devfeed.tech/topics/function.md>)

Tags: [animation](<https://devfeed.tech/tags/animation.md>), [css](<https://devfeed.tech/tags/css.md>), [js](<https://devfeed.tech/tags/js.md>), [sass](<https://devfeed.tech/tags/sass.md>)

### AI overview

A CSS-only circle animation uses JavaScript to create 50 elements and demonstrates Sass's random() function. The article explains its range behavior, examples using positive and negative offsets, and how generated values remain static in CSS until the next Sass compilation.

### Source excerpt

I decided to move my CSS playground to the CodePen, and this is the first one I made. Idea came to me while I was riding on a bus, and I might use it on this blog, as a part of it's redesign. This is CSS only animation (I used JS to create 50 elements though). And you can see the usage of SASS random() function. random() will return random integer between 1 and n, where n is the number you pass to it. Default param is 100. Note that random does not return 0. To get different random ranges just add or subtract your base. This will return number between 11 and 20. $random-number: random(10) + 10; Same thing with negative numbers, this one covers the range between -10 and 10. $random-number: random(21) - 11; Something to have in mind, new random numbers will be generated on every SASS compilation. But once generated, CSS will stay static, until the next compilation.

## Setting up Webpack, Babel and React from scratch - Part 2

DevFeed: [Setting up Webpack, Babel and React from scratch - Part 2](<https://devfeed.tech/articles/setting-up-webpack-babel-and-react-from-scratch-part-2-37349.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/setting-up-webpack-babel-and-react-from-scratch-part-2/>)

Author: Stanko

Published: 2016-08-29T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [Webpack](<https://devfeed.tech/topics/webpack.md>), [Babel](<https://devfeed.tech/topics/babel.md>), [Sass](<https://devfeed.tech/topics/sass.md>), [React](<https://devfeed.tech/topics/react.md>), [es6](<https://devfeed.tech/topics/es6.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [babel](<https://devfeed.tech/tags/babel.md>), [compiler](<https://devfeed.tech/tags/compiler.md>), [css](<https://devfeed.tech/tags/css.md>), [es6](<https://devfeed.tech/tags/es6.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [react](<https://devfeed.tech/tags/react.md>), [sass](<https://devfeed.tech/tags/sass.md>), [webpack](<https://devfeed.tech/tags/webpack.md>)

### AI overview

Part two of a tutorial on setting up Webpack, Babel, and React covers adding SASS support, source maps, Autoprefixer, hot reloading, and additional ES6 features such as static class properties and decorators.

### Source excerpt

Part two # Update: Part two is pretty much done. Part three will cover redux and production builds. Other parts: Part 1 - Webpack, Babel, React, Router, ESLint Part 2 - SASS, More ES6 goodness (Static props, decorators, deconstruction...) Part 3 - Where to go from here Adding SASS # We will use SASS loader for webpack, so let's install it together with node-sass compiler, css and style loaders npm install --save-dev style-loader css-loader sass-loader node-sass Create scss folder in the app folder, and main app.scss file in it. This file will include all of the other scss files. Now we need to add a loader to webpack config file. ... { test: /\.scss$/, loader: 'style!css!sass' } ... This will handle importing SCSS files in our JavaScript code. So we need to import app.scss manually in the JavaScript code. You'll need to add only one line to your app.js. import '../scss/app.scss'; This includes your styles by calling loaders we defined in the webpack config. Restart your webpack, and voala, now we have styles and hot reloading for them. Try changing your styles to check it. Source maps # To enable source maps, we'll pass the sourceMap option to the sass and the css loaders. Enable devtool, and update the loader ... devtool: 'inline-source-map', // or 'source-map' module: { loaders: [ ... { test: /\.scss$/, loader: 'style!css?sourceMap!sass?sourceMap', } ] } ... If you want to read more, here's link to the official documentation Autoprefixer # Always use autoprefixer - I can't stress this enough. We'll need postcss loader, precss and autoprefixer npm install --save-dev postcss-loader precss autoprefixer At the top of our webpack config, require precss and autoprefixer const precss = require('precss'); const autoprefixer = require('autoprefixer'); Update our sass loader config and and postcss config ... module: { loaders: [ ... { test: /\.scss$/, loader: 'style!css?sourceMap!postcss!sass?sourceMap', } ] }, postcss() { return [autoprefixer, precss]; }, ... Restart webpa

## Jekyll and Gulp workflow

DevFeed: [Jekyll and Gulp workflow](<https://devfeed.tech/articles/jekyll-and-gulp-workflow-37301.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/jekyll-gulp-workflow/>)

Author: Stanko

Published: 2016-02-27T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [Gulp](<https://devfeed.tech/topics/gulp.md>), [Jekyll](<https://devfeed.tech/topics/jekyll.md>), [Sass](<https://devfeed.tech/topics/sass.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Development](<https://devfeed.tech/topics/development.md>), [es6](<https://devfeed.tech/topics/es6.md>)

Tags: [development](<https://devfeed.tech/tags/development.md>), [es6](<https://devfeed.tech/tags/es6.md>), [gulp](<https://devfeed.tech/tags/gulp.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [jekyll](<https://devfeed.tech/tags/jekyll.md>), [sass](<https://devfeed.tech/tags/sass.md>), [workflow](<https://devfeed.tech/tags/workflow.md>)

### AI overview

This tutorial describes a Jekyll development workflow that uses Gulp to compile and watch SASS and JavaScript, run a local Jekyll server, proxy it through BrowserSync, and reload the browser on changes. The author notes that the setup may be outdated because they no longer use Jekyll.

### Source excerpt

Please note that I'm not using Jekyll anymore, so this post might be outdated. Update, November 2017 # I don't use this setup anymore, it might be outdated, proceed with caution. Original post # As you probably know this blog is powered by Jekyll. It is a really nice platform, but it lacks a few things I'm used to during development. First one is live reload on file changes (and injecting CSS), using SASS, autoprefixer, ES6... I tried to find a boilerplate, but everything I found didn't match my needs. Usually people would run gulp tasks for SASS and JavaScript files, and on change run jekyll build, which is insanely slow. They would use BrowserSync to serve _site folder. So I did what programmers do - written my own. I quickly made usual gulp tasks: styles - to compile SASS and autoprefix it scripts - to transpile ES6 goodness, and concatenate JavaScript files serve - to start local server, watch for changes and auto reload First thing I did is that I was running jekyll serve in one terminal, and gulp serve with BrowserSync in the other. This was working decently, but I wanted to run only one command, and let the tasks do everything for me. That is where node child process comes in. import childProcess from 'child_process'; const spawn = childProcess.spawn; gulp.task('jekyll', function (){ const jekyll = spawn('jekyll', ['serve'], { stdio: 'inherit' }); }); This task spawns a child process from gulp. Nice thing is that we can start it, and gulp will kill it on exit. Now we have up and running Jekyll server, and proxy it to BrowserSync. But darn, injecting CSS files didn't really work. Server was expeting CSS file to come from /css/style.css, but browserSync.stream in gulp pipe would inject it from the _sass folder. I solved this by copying css file to the .tmp/css and adding .tmp to the serveStatic option of the BrowserSync. One thing I should mention, that I keep my SASS files in the _sass folder, and JavaScript in the _js one. Gulp watches changes on SASS/JS, and

## If You Know Sass, You Know ES2015

DevFeed: [If You Know Sass, You Know ES2015](<https://devfeed.tech/articles/if-you-know-sass-you-know-es2015-28834.md>)

Original publisher: [Read original article](<https://una.im/sass-es2015/>)

Published: 2016-02-23T00:00:00Z

Content type: comparison

Language: en

Sources: [Una Kravets](<https://devfeed.tech/sources/una-kravets.md>)

Topics: [Sass](<https://devfeed.tech/topics/sass.md>), [es6](<https://devfeed.tech/topics/es6.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Babel](<https://devfeed.tech/topics/babel.md>)

Tags: [babel](<https://devfeed.tech/tags/babel.md>), [es2015](<https://devfeed.tech/tags/es2015.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [programming-language](<https://devfeed.tech/tags/programming-language.md>), [sass](<https://devfeed.tech/tags/sass.md>)

### AI overview

This article compares Sass and ES2015, explaining how familiarity with Sass concepts can help developers understand modern JavaScript. It discusses language design similarities, string interpolation, and using Babel to transpile ES2015 for browser compatibility.

### Source excerpt

If you know some Sass, you're probably a lot further than you think to understanding and diving into the world of modern JavaScript. This post showcases some of the similarities.

## Hello World

DevFeed: [Hello World](<https://devfeed.tech/articles/hello-world-37279.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/hello-world/>)

Author: Stanko

Published: 2016-02-21T00:00:00Z

Content type: article

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [Development](<https://devfeed.tech/topics/development.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [CSS](<https://devfeed.tech/topics/css.md>), [Sass](<https://devfeed.tech/topics/sass.md>), [Script](<https://devfeed.tech/topics/script.md>)

Tags: [blog](<https://devfeed.tech/tags/blog.md>), [css](<https://devfeed.tech/tags/css.md>), [development](<https://devfeed.tech/tags/development.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [plugin](<https://devfeed.tech/tags/plugin.md>), [sass](<https://devfeed.tech/tags/sass.md>), [script](<https://devfeed.tech/tags/script.md>)

### AI overview

The blog introduces a planned series of weekly small JavaScript or CSS (SASS) plugins and scripts, ranging from proof-of-concept experiments to production-ready work.

### Source excerpt

Everything starts with a Hello World so does this blog. In the first couple of weeks, everything will be under heavy development, until I get it the way I want. As I really enjoy making stuff, I decided to try to make small JavaScript or CSS (SASS) plugin/script every week. Those are going to be both big and small, proof of concepts and production ready stuff.

## 2015 Year In Review & 2016 Resolutions

DevFeed: [2015 Year In Review & 2016 Resolutions](<https://devfeed.tech/articles/2015-year-in-review-2016-resolutions-28726.md>)

Original publisher: [Read original article](<https://una.im/2015-review/>)

Published: 2015-12-28T00:00:00Z

Content type: opinion

Language: en

Sources: [Una Kravets](<https://devfeed.tech/sources/una-kravets.md>)

Topics: [Development](<https://devfeed.tech/topics/development.md>), [Front end](<https://devfeed.tech/topics/frontend.md>), [Sass](<https://devfeed.tech/topics/sass.md>), [Gulp](<https://devfeed.tech/topics/gulp.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [Open Source](<https://devfeed.tech/topics/open-source.md>), [dev-tools](<https://devfeed.tech/topics/dev-tools.md>)

Tags: [css](<https://devfeed.tech/tags/css.md>), [developer](<https://devfeed.tech/tags/developer.md>), [development](<https://devfeed.tech/tags/development.md>), [github](<https://devfeed.tech/tags/github.md>), [guide](<https://devfeed.tech/tags/guide.md>), [retrospective](<https://devfeed.tech/tags/retrospective.md>), [sass](<https://devfeed.tech/tags/sass.md>), [year-in-review](<https://devfeed.tech/tags/year-in-review.md>)

### AI overview

A personal retrospective of 2015 projects, talks, writing, podcasts, and work at IBM, followed by resolutions for 2016. The article highlights web and front-end experiments, Sass and Gulp tools, CSS libraries, pattern libraries, prototypes, and community activities.

### Source excerpt

It's time for my annual reflection and goal resetting! It's been a crazy year for sure.

## Classy CSS: a Programmatic Approach to Sass Stylesheets

DevFeed: [Classy CSS: a Programmatic Approach to Sass Stylesheets](<https://devfeed.tech/articles/classy-css-a-programmatic-approach-to-sass-stylesheets-28779.md>)

Original publisher: [Read original article](<https://una.im/classy-css/>)

Published: 2015-11-15T00:00:00Z

Content type: opinion

Language: en

Sources: [Una Kravets](<https://devfeed.tech/sources/una-kravets.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [Sass](<https://devfeed.tech/topics/sass.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [Front end](<https://devfeed.tech/topics/frontend.md>)

Tags: [architecture](<https://devfeed.tech/tags/architecture.md>), [components](<https://devfeed.tech/tags/components.md>), [css](<https://devfeed.tech/tags/css.md>), [libraries](<https://devfeed.tech/tags/libraries.md>), [modular](<https://devfeed.tech/tags/modular.md>), [properties](<https://devfeed.tech/tags/properties.md>), [sass](<https://devfeed.tech/tags/sass.md>), [variables](<https://devfeed.tech/tags/variables.md>)

### AI overview

An opinionated article introduces Classy CSS, a programmatic, modular, scalable, and class-based architecture for Sass stylesheets. It explains the approach through a button example and discusses its relationship to BEM-like naming and Sass features.

### Source excerpt

An opinionated Sass architecture system for writing modular and scalable libraries. Also, a case in defense of extends.

## Material Theme for Google Blogger

DevFeed: [Material Theme for Google Blogger](<https://devfeed.tech/articles/material-theme-for-google-blogger-21517.md>)

Original publisher: [Read original article](<http://lifepluslinux.blogspot.com/2015/08/material-theme-for-google-blogger.html>)

Author: Suresh Alse (noreply@blogger.com)

Published: 2015-08-03T19:32:00Z

Content type: tutorial

Language: en

Sources: [Life Plus Linux](<https://devfeed.tech/sources/life-plus-linux.md>)

Topics: [Material Design](<https://devfeed.tech/topics/material-design.md>), [Sass](<https://devfeed.tech/topics/sass.md>)

Tags: [blogger](<https://devfeed.tech/tags/blogger.md>), [design](<https://devfeed.tech/tags/design.md>), [github](<https://devfeed.tech/tags/github.md>), [google](<https://devfeed.tech/tags/google.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [material-design](<https://devfeed.tech/tags/material-design.md>)

### AI overview

A project that generates Material Design themes for Google Blogger using Sass, with examples of available themes and widgets. The article points readers to instructions for using the themes.

### Source excerpt

Inspired by Google's Material Design principles, this generates Material themes for Google Blogger using sass preprocessor. Fork me on Github Here are some of the themes generated with material-blogger Get themes Honor Theme Aqua Theme Pink Ribbon Theme Sample Widgets Button Search Results Popular Widget Widget (Aqua Theme) Archive To see how to use it, see this

## Sass Pixel Art

DevFeed: [Sass Pixel Art](<https://devfeed.tech/articles/sass-pixel-art-28836.md>)

Original publisher: [Read original article](<https://una.im/sass-pixel-art/>)

Published: 2015-05-03T00:00:00Z

Content type: tutorial

Language: en

Sources: [Una Kravets](<https://devfeed.tech/sources/una-kravets.md>)

Topics: [Sass](<https://devfeed.tech/topics/sass.md>), [HTML5 and CSS3 tricks](<https://devfeed.tech/topics/html5-and-css3-tricks.md>), [pixel](<https://devfeed.tech/topics/pixel.md>), [Programming](<https://devfeed.tech/topics/programming.md>)

Tags: [blog-post](<https://devfeed.tech/tags/blog-post.md>), [css3](<https://devfeed.tech/tags/css3.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [pixel-art](<https://devfeed.tech/tags/pixel-art.md>), [sass](<https://devfeed.tech/tags/sass.md>)

### AI overview

This tutorial explains how Sass lists, matrices, maps, and list functions can generate pixel art using CSS3 multiple box shadows. It examines how individually positioned box shadows form pixels and how Sass data structures organize them.

### Source excerpt

Pixel art is so much fun! This blog post walks through how to read a matrix-like list with Sass and generate Mario pixel art from box shadows.

## My favorite old webdev tools

DevFeed: [My favorite old webdev tools](<https://devfeed.tech/articles/my-favorite-old-webdev-tools-32171.md>)

Original publisher: [Read original article](<https://adambard.com/blog/webdev-tools-rundown-2015/>)

Published: 2015-04-09T00:00:00Z

Content type: opinion

Language: en

Sources: [Adam Bard](<https://devfeed.tech/sources/adam-bard.md>)

Topics: [Web Development](<https://devfeed.tech/topics/web-development.md>), [Flask](<https://devfeed.tech/topics/flask.md>), [Django](<https://devfeed.tech/topics/django.md>), [static-site-generator](<https://devfeed.tech/topics/static-site-generator.md>), [Sass](<https://devfeed.tech/topics/sass.md>), [CSS Framework](<https://devfeed.tech/topics/css-framework.md>), [Clojure](<https://devfeed.tech/topics/clojure.md>)

Tags: [clojure](<https://devfeed.tech/tags/clojure.md>), [css](<https://devfeed.tech/tags/css.md>), [django](<https://devfeed.tech/tags/django.md>), [flask](<https://devfeed.tech/tags/flask.md>), [frameworks](<https://devfeed.tech/tags/frameworks.md>), [sass](<https://devfeed.tech/tags/sass.md>), [static-site-generator](<https://devfeed.tech/tags/static-site-generator.md>), [tools](<https://devfeed.tech/tags/tools.md>), [webdev](<https://devfeed.tech/tags/webdev.md>)

### AI overview

An opinionated roundup of older web development tools the author has used for years. It discusses Middleman for generating static sites, Skeleton for lightweight CSS prototyping, Flask for small sites, and Django for applications that benefit from an all-in-one framework; it also mentions Clojure for high-performance API servers.

### Source excerpt

The way we make websites has changed a lot since I started doing it, and it's important to keep up-to-date on new tools and techniques. That said, I've been noticing that I've not spent as much time churning through new frameworks and whatnot as I used to - in fact, I've picked out a few tools that I've been using for years.

## 5 Great Uses for Sass Maps

DevFeed: [5 Great Uses for Sass Maps](<https://devfeed.tech/articles/5-great-uses-for-sass-maps-28768.md>)

Original publisher: [Read original article](<https://una.im/5-great-uses-sass-maps/>)

Published: 2015-03-17T00:00:00Z

Content type: tutorial

Language: en

Sources: [Una Kravets](<https://devfeed.tech/sources/una-kravets.md>)

Topics: [Sass](<https://devfeed.tech/topics/sass.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [blog-post](<https://devfeed.tech/tags/blog-post.md>), [sass](<https://devfeed.tech/tags/sass.md>)

### AI overview

A SitePoint blog post covering five uses for Sass maps, along with thoughts on code.

### Source excerpt

Another blog post written for SitePoint about 5 great uses for Sass maps and other thoughts on code at the moment.

## Sass Director and Manifest Files

DevFeed: [Sass Director and Manifest Files](<https://devfeed.tech/articles/sass-director-and-manifest-files-28835.md>)

Original publisher: [Read original article](<https://una.im/sass-manifests/>)

Published: 2015-01-18T00:00:00Z

Content type: tutorial

Language: en

Sources: [Una Kravets](<https://devfeed.tech/sources/una-kravets.md>)

Topics: [Sass](<https://devfeed.tech/topics/sass.md>), [Command-line interface](<https://devfeed.tech/topics/cli.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [build](<https://devfeed.tech/tags/build.md>), [files](<https://devfeed.tech/tags/files.md>), [manifest](<https://devfeed.tech/tags/manifest.md>), [project](<https://devfeed.tech/tags/project.md>), [sass](<https://devfeed.tech/tags/sass.md>), [shell-script](<https://devfeed.tech/tags/shell-script.md>), [terminal](<https://devfeed.tech/tags/terminal.md>)

### AI overview

This tutorial explains Sass manifest files, which bring partial Sass files together in a main file that compiles into a cumulative CSS output. It also introduces Sass Director, a tool that generates the directories and partial files for a Sass project from one manifest file.

### Source excerpt

I created a tool that lets you architect your Sass project in a single location (your manifest file), and it will build all of the directories and partials for you! This blog explains what a Sass manifest file is, what it does, and why you should use one.

## Jekyll with Sass

DevFeed: [Jekyll with Sass](<https://devfeed.tech/articles/jekyll-with-sass-37790.md>)

Original publisher: [Read original article](<https://carlosbecker.com/posts/jekyll-with-sass/>)

Author: Carlos Alexandro Becker

Published: 2015-01-09T00:00:00Z

Content type: tutorial

Language: en

Sources: [Carlos Becker](<https://devfeed.tech/sources/carlos-becker.md>)

Topics: [Jekyll](<https://devfeed.tech/topics/jekyll.md>), [Sass](<https://devfeed.tech/topics/sass.md>), [GitHub Pages](<https://devfeed.tech/topics/github-pages.md>)

Tags: [article](<https://devfeed.tech/tags/article.md>), [github-pages](<https://devfeed.tech/tags/github-pages.md>), [jekyll](<https://devfeed.tech/tags/jekyll.md>), [sass](<https://devfeed.tech/tags/sass.md>)

### AI overview

A blog post describes applying Sass to a Jekyll site to reduce four CSS requests totaling about 22K to one request of 12.8K. The author also reports that the approach works on GitHub Pages.

### Source excerpt

I followed @mdo's recent article "Using Sass with Jekyll", and wanted to point out the results.

## 2015 Resolutions

DevFeed: [2015 Resolutions](<https://devfeed.tech/articles/2015-resolutions-28725.md>)

Original publisher: [Read original article](<https://una.im/2015-resolutions/>)

Published: 2014-12-31T00:00:00Z

Content type: article

Language: en

Sources: [Una Kravets](<https://devfeed.tech/sources/una-kravets.md>)

Topics: [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Node.js](<https://devfeed.tech/topics/node-js.md>), [Sass](<https://devfeed.tech/topics/sass.md>), [Gulp](<https://devfeed.tech/topics/gulp.md>), [Open Source](<https://devfeed.tech/topics/open-source.md>), [Angular](<https://devfeed.tech/topics/angular.md>), [Command-line interface](<https://devfeed.tech/topics/cli.md>), [Express](<https://devfeed.tech/topics/express.md>), [Meteor](<https://devfeed.tech/topics/meteor.md>), [Testing](<https://devfeed.tech/topics/testing.md>), [Vim](<https://devfeed.tech/topics/vim.md>), [WebGL](<https://devfeed.tech/topics/webgl.md>)

Tags: [3d-graphics](<https://devfeed.tech/tags/3d-graphics.md>), [angular](<https://devfeed.tech/tags/angular.md>), [blog](<https://devfeed.tech/tags/blog.md>), [command-line](<https://devfeed.tech/tags/command-line.md>), [express](<https://devfeed.tech/tags/express.md>), [github](<https://devfeed.tech/tags/github.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [make](<https://devfeed.tech/tags/make.md>), [node-js](<https://devfeed.tech/tags/node-js.md>), [open-source](<https://devfeed.tech/tags/open-source.md>), [personal](<https://devfeed.tech/tags/personal.md>), [post](<https://devfeed.tech/tags/post.md>), [published](<https://devfeed.tech/tags/published.md>), [review](<https://devfeed.tech/tags/review.md>), [sass](<https://devfeed.tech/tags/sass.md>), [testing](<https://devfeed.tech/tags/testing.md>), [vim](<https://devfeed.tech/tags/vim.md>), [webgl](<https://devfeed.tech/tags/webgl.md>)

### AI overview

A personal review of 2014 and a set of goals for 2015. The author describes projects, travel, speaking, open-source contributions, and progress in JavaScript, Sass, Gulp, Meteor.js, Express.js, Angular, Node.js, testing, Vim, WebGL, and 3D graphics.

### Source excerpt

This is a personal post about my 2014 in review (because a lot happened) and my goals for 2015. Happy New Year!

[Next page](<https://devfeed.tech/topics/sass.md?cursor=WyIyMDE0LTEyLTMxVDAwOjAwOjAwKzAwOjAwIiwgImQxY2NlMWY1LTg1ZjMtNDFiOS1iMTNiLTViYjg1YzIyNDA3NCJd>)