@use 替代 @import 是构建高效 Sass 布局框架的起点，它通过命名空间隔离变量/混入、杜绝隐式覆盖、支持未用代码剔除；layout/ 仅含容器关系类文件（如\_grid、\_container），不含组件语义内容；应禁用 @extend 防止选择器污染，改用 @include 复用布局逻辑。
直接用
替代
，再配合抽象层（
）和布局层（
）分离，是构建高效 Sass 布局框架最实际的起点。老式
会污染全局作用域，导致变量覆盖、样式不可预测，而
强制显式引用，让每个模块的依赖一目了然。
为什么
是布局模块化的前提
传统
下，
被多个文件重复引入，一旦某个组件文件（比如
）意外重定义了
，整个主题就可能崩掉——你根本不知道哪一行改的。
把变量、混入、函数都封装进命名空间，调用必须带前缀：
所有变量/混入必须通过命名空间访问，杜绝隐式覆盖
同一变量在不同模块中可安全复用，比如
在
和
中各自使用，互不干扰
编译时自动剔除未使用的变量和混入，减小 CSS 体积
目录该放什么、不该放什么
很多人把
当成“所有盒子模型”的垃圾桶，结果里面塞了
、
、
，甚至还有
——这已经越界到组件层了。
立即学习
“
前端免费学习笔记（深入）
”；
真正属于
的，只处理「容器关系」和「流式结构」：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
：基于
的响应式栅格系统，含
等基础工具
：定义
、
的宽度、居中与断点逻辑
：封装常用 flex 容器行为，如
、
，不包含具体子项样式
：只声明断点变量（
），不写媒体查询内容
像页头、侧边栏这类有明确视觉语义和交互行为的，应该归入
或
，否则布局层会失去抽象能力。
如何避免
污染布局选择器
有人喜欢用
给
继承
，但这是危险操作——
会在 CSS 输出中把所有引用它的选择器拼成一个长链，比如：
一旦某天
不再需要 flex 列，你就得去翻所有 extend 它的地方。更糟的是，它无法被
隔离。
布局类应保持原子性，只声明自身行为（如
），不继承其他模块
用
替代
：混入生成内联样式，不会跨选择器污染
如果真要复用布局逻辑，抽成
，并在需要的地方显式
真正的难点不在怎么写，而在「谁有权修改
」——这个文件一旦被随意调整，所有布局模块都会连锁响应。建议把它设为团队共识文档，每次变更必须同步更新设计系统规范，而不是只改代码。
@use@importabstracts/layout/@import@use@use@import_variables.scss_cards.scss$primary-color@use@use 'abstracts/variables' as vars;
@use 'abstracts/mixins' as mix;
.card {
border-color: vars.$border-color;
@include mix.flex-center;
}vars.$spacing-sm_buttons.scss_forms.scsslayout/layout/_header.scss_grid.scss_sidebar.scss_modal.scsslayout/_grid.scssdisplay: grid@mixin make-grid-columns()_container.scss.container.container-fluid_flex.scss@mixin flex-row()@mixin flex-col()_breakpoints.scss$bp-md: 768pxcomponents/sections/@extend@extend.layout-main.flex-col@extend.layout-main, .section-hero, .card-grid { display: flex; flex-direction: column; }.section-hero@usedisplay: grid@include@extend@mixin layout-column@includeabstracts/_breakpoints.scss