Tag

SASS

0 views collected around this technical thread.

Sohu Tech Products
Sohu Tech Products
Sep 25, 2024 · Frontend Development

From Tailwind CSS to SASS: A Frontend Technology Selection Case Study

After initially adopting Tailwind CSS for rapid UI development in a React real‑time chat app, our team reverted to SASS combined with CSS Modules because the growing utility‑class markup hurt readability, increased build times, and bloated the CSS bundle, ultimately delivering a more maintainable codebase and noticeably better performance.

CSS ArchitectureCSS ModulesReact
0 likes · 8 min read
From Tailwind CSS to SASS: A Frontend Technology Selection Case Study
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Mar 25, 2024 · Frontend Development

Using Unocss with Vue and Sass: Installation, Configuration, and Personal Insights

This article introduces Unocss, explains how to install and configure it with Vue and Sass, details common presets, transformers, and usage tips, and shares the author’s personal experiences and recommendations for adopting atomic CSS in frontend projects.

CSSSASSUnoCSS
0 likes · 20 min read
Using Unocss with Vue and Sass: Installation, Configuration, and Personal Insights
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Feb 20, 2024 · Frontend Development

Theme Color Switching Solutions for Frontend Projects: Hard Coding, SASS Variables, CSS Variables, Filters, and Grayscale

This article compares five practical methods for changing theme colors in frontend applications—hard‑coded global replacements, SASS variable configuration, combined CSS‑variable and data‑theme approach, CSS filter hue‑rotate, and grayscale filter—detailing implementation steps, code snippets, advantages, and drawbacks to help teams choose the most suitable solution.

CSS variablesFilterSASS
0 likes · 12 min read
Theme Color Switching Solutions for Frontend Projects: Hard Coding, SASS Variables, CSS Variables, Filters, and Grayscale
Laravel Tech Community
Laravel Tech Community
Jul 27, 2023 · Frontend Development

Bootstrap v5.3.1 Released: New Color Modes, Component Enhancements, and Documentation Updates

Bootstrap v5.3.1 has been released, introducing enhanced dark‑mode color contrast, updated component styles, new Sass variables, keyboard navigation improvements, and documentation upgrades such as homepage search and better responsive examples, along with various bug fixes.

BootstrapCSSJavaScript
0 likes · 3 min read
Bootstrap v5.3.1 Released: New Color Modes, Component Enhancements, and Documentation Updates
Laravel Tech Community
Laravel Tech Community
Apr 13, 2023 · Frontend Development

Bootstrap 5.3.0‑alpha3 Release Highlights and Updates

Bootstrap 5.3.0‑alpha3 introduces a series of fixes and new utilities—including improved Sass variable handling, additional border‑radius support, a new .d-inline‑grid class, tooltip positioning fixes, floating‑label enhancements, and an RFS update—providing developers with refined styling and component options.

BootstrapCSSJavaScript
0 likes · 2 min read
Bootstrap 5.3.0‑alpha3 Release Highlights and Updates
ByteDance Web Infra
ByteDance Web Infra
Apr 11, 2023 · Frontend Development

Migrating Excalidraw from Webpack to Rspack: A Step‑by‑Step Guide

This article demonstrates how to migrate the open‑source Excalidraw drawing application from Webpack to the Rust‑based Rspack bundler, covering repository cloning, dependency installation, Rspack initialization, Sass, HTML plugin, environment variable handling, static asset copying, performance comparison, and the use of react‑scripts‑rspack for automated migration.

Environment VariablesHTML pluginRspack
0 likes · 10 min read
Migrating Excalidraw from Webpack to Rspack: A Step‑by‑Step Guide
JD Retail Technology
JD Retail Technology
Mar 29, 2022 · Frontend Development

NutUI Theme Customization: Component‑Level Styling and Implementation Guide

This article explains how NutUI’s theme customization enables developers to switch skins, edit component‑level styles, and generate theme variables through an online configurator, providing step‑by‑step usage instructions, code examples for Vite, Webpack and Taro, and a detailed overview of the underlying implementation.

Component LibraryNutUISASS
0 likes · 11 min read
NutUI Theme Customization: Component‑Level Styling and Implementation Guide
Qunar Tech Salon
Qunar Tech Salon
Jan 4, 2019 · Frontend Development

Advanced Sass Techniques: Mixins, %placeholder Selectors, and ES6‑like Features

This article explores advanced Sass techniques, comparing mixins and %placeholder selectors, demonstrating best and bad practices, and highlighting ES6‑like features such as interpolation, rest parameters, and @each loops, with code examples to help frontend developers write more efficient and maintainable stylesheets.

CSSMixinPlaceholder
0 likes · 8 min read
Advanced Sass Techniques: Mixins, %placeholder Selectors, and ES6‑like Features
Qunar Tech Salon
Qunar Tech Salon
Oct 11, 2018 · Frontend Development

Ensuring Text Readability with Proper Color Contrast: WCAG Standards, Tools, and Implementation

This article explains why sufficient color contrast between text and background is essential for web readability, outlines WCAG AA/AAA contrast ratios, introduces practical tools and JavaScript/Sass functions for calculating and adjusting contrast, and provides tips for handling semi‑transparent colors and real‑world scenarios.

JavaScriptSASSWCAG
0 likes · 14 min read
Ensuring Text Readability with Proper Color Contrast: WCAG Standards, Tools, and Implementation
Yuewen Frontend Team
Yuewen Frontend Team
May 23, 2018 · Frontend Development

Creating a 3D Book Cover with CSS: Techniques, Code, and Compatibility Fixes

This article walks through the design and implementation of a 3D book‑cover effect for Qidian's homepage using CSS3 perspective and transforms, explains the underlying HTML structure, provides full SASS code, and details cross‑browser compatibility solutions for Firefox, IE9, and Safari.

3DCSS3Compatibility
0 likes · 13 min read
Creating a 3D Book Cover with CSS: Techniques, Code, and Compatibility Fixes
Qunar Tech Salon
Qunar Tech Salon
Jan 16, 2018 · Frontend Development

Analysis of Ant Design Color Palette Generation Algorithms Across Versions 1.x, 2.x, and 3.x

This article examines the evolution of Ant Design's color‑palette generation algorithms from the simple tint/shade approach in 1.x, through the HSL‑based Bézier‑easing method in 2.x, to the HSV‑driven implementation in 3.x, highlighting their principles, code implementations, strengths, and shortcomings.

Ant DesignBézierHSV
0 likes · 15 min read
Analysis of Ant Design Color Palette Generation Algorithms Across Versions 1.x, 2.x, and 3.x
Qunar Tech Salon
Qunar Tech Salon
Feb 22, 2016 · Frontend Development

Challenges and Optimization Practices for Mobile Front-End Development

The article examines the heightened performance, touch experience, and code size challenges faced by mobile front‑end development, presents survey‑based user pain points, and details practical optimization techniques—including server‑side rendering, modular architecture, CSS3 animations, and tooling such as RequireJS, Sass, and HTTP/2—to improve responsiveness and user experience.

CSS3 animationsRequireJSSASS
0 likes · 11 min read
Challenges and Optimization Practices for Mobile Front-End Development