前端【免费下载链接】compassCompass is no longer actively maintained. Compass is a Stylesheet Authoring Environment that makes your website design simpler to implement and easier to maintain.项目地址https://gitcode.com/gh_mirrors/co/compass点击查看免费下载导读在 Compass 中当你**未指定任何框架framework**创建新项目时脚手架会自动生成一套三文件的基础样式表体系screen.sass、print.sass与ie.sass分别对应屏幕投影媒体、打印媒体与 IE 条件覆盖。本文以 core/templates/project/USAGE.markdown 为核心骨架结合仓库中项目模板core/templates/project、安装器实现cli/lib/compass/installers/manifest_installer.rb与命令行实现cli/lib/compass/commands/create_project.rb系统讲解这套默认结构的生成原理、HTML 引用方式、目录映射规则与 partial局部文件机制帮助你在实际项目中自由定制 Compass 的样式组织方式。一、默认三文件体系从哪里来、长什么样1.1 生成时机与触发条件根据 core/templates/project/USAGE.markdown 的说明当创建项目时没有指定任何框架Compass 会以默认的project模板初始化并生成三个样式表文件screen.sass—— 屏幕与投影显示的主样式表print.sass—— 打印样式表ie.sass—— 面向旧版 IE 的兼容覆盖样式表。这一行为由模板的 manifest 清单驱动。查看 core/templates/project/manifest.rb 可以看到三个文件各自的媒体属性与条件声明description The default project layout. stylesheet screen.sass, :media screen, projection stylesheet print.sass, :media print stylesheet ie.sass, :media screen, projection, :condition IE即screen.sass与ie.sass面向screen, projection媒体print.sass面向print媒体而ie.sass额外带有:condition IE条件标记。1.2 三个模板文件的初始内容模板本身位于 core/templates/project 目录下screen.sass注释中提示在这里编写你的主要样式或集中管理你的 import并且默认已经引入了import compass/reset即 Compass 的 CSS 重置模块作为项目的起点print.sass用于定义打印样式ie.sass用于编写 IE 专属的覆盖样式。1.3 manifest 如何驱动安装器生成 HTML 引用片段这三个文件之所以会在生成后配套一段标准 HTML 引用代码是因为安装器会根据 manifest 自动构造link标签。cli/lib/compass/installers/manifest_installer.rb 中的stylesheet_links方法逐条遍历 manifest 中的样式表条目跳过以下划线开头的 partial局部文件见后文读取每个样式表的:media选项生成media...属性将.sass/.scss后缀替换为.css得到最终 href若条目带:condition选项则用 IE 条件注释包裹该link。这正好解释了为什么ie.sass会被包装进!--[if IE] ... ![endif]--之中条件注释的生成逻辑是安装器根据 manifest 配置自动完成的而不是你在 HTML 里手工维护的。二、在 HTML 中引用默认样式表USAGE 文档给出了标准的 HTML 引用方式这也是 Compass 默认布局的推荐用法。假设编译产物位于/stylesheets/目录下这是 Compass 的默认 css 输出目录见 cli/lib/compass/app_integration/stand_alone/configuration_defaults.rbhead link href/stylesheets/screen.css mediascreen, projection relstylesheet typetext/css / link href/stylesheets/print.css mediaprint relstylesheet typetext/css / !--[if IE] link href/stylesheets/ie.css mediascreen, projection relstylesheet typetext/css / ![endif]-- /head要点拆解screen.css与print.css通过media属性区分使用场景屏幕/投影设备加载前者打印时加载后者ie.css被包在 IE 条件注释中只有旧版 IE 才会真正加载这份覆盖样式其他浏览器会将其视为注释而忽略这套结构把常规样式—打印样式—IE 补丁三类职责彻底分离是 CSS 组织中最经典的分层方式。模板文件头部的注释也贴心地内嵌了对应的引用代码例如 screen.sass 中即写有对应的link示例方便你复制使用。三、三个文件只是建议你可以完全自由定制USAGE 文档明确强调你不必强制使用这三个样式表它们只是推荐。你可以重命名它们如把screen.sass改为main.sass新建更多样式表如mobile.sass、print-landscape.sass删除不需要的文件例如无打印需求的项目可直接删掉print.sass。只要把 Sass 文件放进项目的源目录默认是sass/Compass 都会正常编译它们。这一点在命令层面也有直接印证compass create支持--bare选项不生成任何 Sass 或 CSS 文件见 cli/lib/compass/commands/create_project.rb也就是说你完全可以裸建项目结构后按自己的意愿组织样式文件。四、目录即结构源目录文件夹与编译产物的映射USAGE 文档说明了 Compass 一个重要的约定你在源目录中创建的任何包含 Sass 文件的文件夹编译后都会在输出目录中生成对应的 CSS 文件夹。例如sass/ base/ reset.sass typography.sass modules/ nav.sass footer.sass编译后会自动得到stylesheets/ base/ reset.css typography.css modules/ nav.css footer.css也就是说源目录sass/与输出目录stylesheets/默认值见 cli/lib/compass/app_integration/stand_alone/configuration_defaults.rb保持着逐层对应的镜像关系。你可以利用这一机制按模块、按页面或按组件维度组织样式让目录结构直接反映最终 CSS 的结构无需额外维护映射关系。五、Partial局部文件机制下划线开头的文件不会独立编译5.1 基本规则USAGE 文档介绍了 Compass / Sass 体系中至关重要的 partial 概念以下划线_开头的 Sass 文件称为 partial局部文件partial不会被单独编译成独立的 CSS 文件它们通过import被引入到其他样式表中使用。例如在sass/下创建_base.sass不会产生stylesheets/_base.css而是需要在其他文件中import base或使用 SCSS 语法import base;5.2 为什么这样设计把样式拆成 partial 的价值在于保持样式表小巧、可管理、职责单一每个 partial 只关注一件事变量、混入、某个组件的样式主样式表只负责组装避免重复编译partial 不产生独立输出文件就不会出现同一份代码既被打包又独立输出的冗余便于按需引入不同入口样式表如screen.sass与print.sass可以各自 import 自己需要的那部分 partial。5.3_base.sass惯例USAGE 文档特别提到一个通行做法在样式表目录顶层创建一个_base.sass文件在其中集中定义项目级常量颜色、字号、间距等变量与混入mixins然后在各样式表中 import 它实现全项目共享。// sass/_base.sass —— 项目级基础定义 $base-font-size: 16px $primary-color: #2a6ebb mixin rounded($radius: 3px) -moz-border-radius: $radius -webkit-border-radius: $radius border-radius: $radius// sass/screen.sass —— 主样式表引入基础定义 import base import compass/reset body color: $primary-color font-size: $base-font-size5.4 安装器对 partial 的处理印证partial 不会被单独编译的规则不仅存在于编译器层安装器层也严格遵守在 cli/lib/compass/installers/manifest_installer.rb 的stylesheet_links中生成 HTMLlink时会显式跳过以_开头的样式表文件next if File.basename(stylesheet.from)[0..0] _确保 partial 永远不会出现在页面引用的 CSS 列表中。六、从命令行创建默认项目实操环节6.1 基本命令在未指定框架的情况下创建默认项目直接运行compass create path/to/projectpath/to/project指定项目目录不带参数时默认使用当前目录。该命令同时注册了compass init别名用于向已有项目初始化 Compass见 cli/lib/compass/commands/create_project.rb。命令的完整用法与全部选项可查看 cli/lib/compass/commands/create_project.rb 中的选项解析定义常用参数如下选项说明--using PATTERN指定要使用的框架模式格式为framework/pattern默认框架为compass默认模式为project见 cli/lib/compass/commands/create_project.rb-x, --syntax sass\|scss指定生成样式表所用的语法可选sass或scss默认是scss--prepare只做准备工作仅创建配置文件不生成样式表--bare不生成任何 Sass 或 CSS 文件与指定框架同时使用时会被拒绝见 cli/lib/compass/commands/create_project.rb6.2 生成后的目录结构一个默认的 Compass 独立项目stand-alone默认项目类型见 cli/lib/compass/app_integration/stand_alone/configuration_defaults.rb大致如下project/ ├── config.rb # Compass 配置文件 ├── sass/ # 源码目录默认 │ ├── screen.sass │ ├── print.sass │ └── ie.sass ├── stylesheets/ # 编译输出目录默认 │ ├── screen.css │ ├── print.css │ └── ie.css ├── javascripts/ # 默认 javascripts 目录 └── images/ # 默认 images 目录其中sass、stylesheets、javascripts、images这些目录的默认命名均可在 cli/lib/compass/app_integration/stand_alone/configuration_defaults.rb 中找到sass_dir、css_dir、javascripts_dir、images_dir并可在config.rb中按需覆盖。6.3 安装器执行流程从源码结构看项目生成实际由安装器完成ManifestInstaller继承自Base遵循prepare → install → finalize三步策略见 cli/lib/compass/installers/base.rb。其中init阶段会根据 manifest 中声明的内容创建sass/与stylesheets/目录见 cli/lib/compass/installers/manifest_installer.rbinstall阶段则按 manifest 条目顺序逐一落地文件见 cli/lib/compass/installers/manifest_installer.rb。模板文件在安装时会按配置的preferred_syntax自动转换语法cli/lib/compass/installers/base.rb因此即使模板写的是.sass你指定-x scss时得到的也是.scss文件。七、最佳实践小结综合 USAGE 文档与仓库实现一套稳妥的 Compass 项目起步策略是保留三文件骨架screen.sass承载主体样式、print.sass处理打印、ie.sass兜底旧浏览器职责清晰配套 HTML 引用代码由安装器按 manifest 自动生成开箱即用用 partial 拆分模块所有可复用的变量、混入与组件样式都放进下划线开头的 partial避免生成冗余 CSS 文件建立_base.sass共享层把项目级常量与混入集中于此各入口样式表统一import base善用目录映射按业务模块在sass/下建子目录编译产物自动镜像长期维护成本最低必要时自由裁剪三个默认文件只是建议可以重命名、增删compass create --bare甚至允许你完全不生成任何样式文件从零开始搭建自己的组织方式。以上规则均可在本仓库的以下文件中进一步验证与深入模板与说明core/templates/project/USAGE.markdown、core/templates/project/manifest.rb、core/templates/project/screen.sass安装器实现cli/lib/compass/installers/manifest_installer.rb、cli/lib/compass/installers/manifest.rb、cli/lib/compass/installers/base.rb命令与默认配置cli/lib/compass/commands/create_project.rb、cli/lib/compass/app_integration/stand_alone/configuration_defaults.rb赞分享前端【免费下载链接】compassCompass is no longer actively maintained. Compass is a Stylesheet Authoring Environment that makes your website design simpler to implement and easier to maintain.项目地址https://gitcode.com/gh_mirrors/co/compass点击查看免费下载相关推荐htmx 2.0.0 正式发布不再支持 IE、收紧默认行为与全新模块分发体系htmx 2.0.0 正式发布不再支持 IE、收紧默认行为与全新模块分发体系 本文基于 htmx 官方发布公告《htmx 2.0.0 has been rel前端Web框架Draft.js 块级样式Block Styling完全指南blockStyleFn 原理、默认列表样式与实战扩展Draft.js 块级样式Block Styling完全指南blockStyleFn 原理、默认列表样式与实战扩展 Draft.js 编辑器在渲染时会给部前端UI组件VuePress 目录结构与默认页面路由完全指南VuePress 目录结构与默认页面路由完全指南 本文以 VuePress 官方文档《目录结构》为骨架结合本仓库 gh_mirrors/vu/vuepres前端文档SSR上一篇onetimepass 2.0新特性Python 3.8支持与零依赖架构详解下一篇终极指南如何用Perfect框架快速构建Swift服务端应用创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Compass 默认项目模板与样式表结构：screen / print / ie 三文件体系完全指南
前端【免费下载链接】compassCompass is no longer actively maintained. Compass is a Stylesheet Authoring Environment that makes your website design simpler to implement and easier to maintain.项目地址https://gitcode.com/gh_mirrors/co/compass点击查看免费下载导读在 Compass 中当你**未指定任何框架framework**创建新项目时脚手架会自动生成一套三文件的基础样式表体系screen.sass、print.sass与ie.sass分别对应屏幕投影媒体、打印媒体与 IE 条件覆盖。本文以 core/templates/project/USAGE.markdown 为核心骨架结合仓库中项目模板core/templates/project、安装器实现cli/lib/compass/installers/manifest_installer.rb与命令行实现cli/lib/compass/commands/create_project.rb系统讲解这套默认结构的生成原理、HTML 引用方式、目录映射规则与 partial局部文件机制帮助你在实际项目中自由定制 Compass 的样式组织方式。一、默认三文件体系从哪里来、长什么样1.1 生成时机与触发条件根据 core/templates/project/USAGE.markdown 的说明当创建项目时没有指定任何框架Compass 会以默认的project模板初始化并生成三个样式表文件screen.sass—— 屏幕与投影显示的主样式表print.sass—— 打印样式表ie.sass—— 面向旧版 IE 的兼容覆盖样式表。这一行为由模板的 manifest 清单驱动。查看 core/templates/project/manifest.rb 可以看到三个文件各自的媒体属性与条件声明description The default project layout. stylesheet screen.sass, :media screen, projection stylesheet print.sass, :media print stylesheet ie.sass, :media screen, projection, :condition IE即screen.sass与ie.sass面向screen, projection媒体print.sass面向print媒体而ie.sass额外带有:condition IE条件标记。1.2 三个模板文件的初始内容模板本身位于 core/templates/project 目录下screen.sass注释中提示在这里编写你的主要样式或集中管理你的 import并且默认已经引入了import compass/reset即 Compass 的 CSS 重置模块作为项目的起点print.sass用于定义打印样式ie.sass用于编写 IE 专属的覆盖样式。1.3 manifest 如何驱动安装器生成 HTML 引用片段这三个文件之所以会在生成后配套一段标准 HTML 引用代码是因为安装器会根据 manifest 自动构造link标签。cli/lib/compass/installers/manifest_installer.rb 中的stylesheet_links方法逐条遍历 manifest 中的样式表条目跳过以下划线开头的 partial局部文件见后文读取每个样式表的:media选项生成media...属性将.sass/.scss后缀替换为.css得到最终 href若条目带:condition选项则用 IE 条件注释包裹该link。这正好解释了为什么ie.sass会被包装进!--[if IE] ... ![endif]--之中条件注释的生成逻辑是安装器根据 manifest 配置自动完成的而不是你在 HTML 里手工维护的。二、在 HTML 中引用默认样式表USAGE 文档给出了标准的 HTML 引用方式这也是 Compass 默认布局的推荐用法。假设编译产物位于/stylesheets/目录下这是 Compass 的默认 css 输出目录见 cli/lib/compass/app_integration/stand_alone/configuration_defaults.rbhead link href/stylesheets/screen.css mediascreen, projection relstylesheet typetext/css / link href/stylesheets/print.css mediaprint relstylesheet typetext/css / !--[if IE] link href/stylesheets/ie.css mediascreen, projection relstylesheet typetext/css / ![endif]-- /head要点拆解screen.css与print.css通过media属性区分使用场景屏幕/投影设备加载前者打印时加载后者ie.css被包在 IE 条件注释中只有旧版 IE 才会真正加载这份覆盖样式其他浏览器会将其视为注释而忽略这套结构把常规样式—打印样式—IE 补丁三类职责彻底分离是 CSS 组织中最经典的分层方式。模板文件头部的注释也贴心地内嵌了对应的引用代码例如 screen.sass 中即写有对应的link示例方便你复制使用。三、三个文件只是建议你可以完全自由定制USAGE 文档明确强调你不必强制使用这三个样式表它们只是推荐。你可以重命名它们如把screen.sass改为main.sass新建更多样式表如mobile.sass、print-landscape.sass删除不需要的文件例如无打印需求的项目可直接删掉print.sass。只要把 Sass 文件放进项目的源目录默认是sass/Compass 都会正常编译它们。这一点在命令层面也有直接印证compass create支持--bare选项不生成任何 Sass 或 CSS 文件见 cli/lib/compass/commands/create_project.rb也就是说你完全可以裸建项目结构后按自己的意愿组织样式文件。四、目录即结构源目录文件夹与编译产物的映射USAGE 文档说明了 Compass 一个重要的约定你在源目录中创建的任何包含 Sass 文件的文件夹编译后都会在输出目录中生成对应的 CSS 文件夹。例如sass/ base/ reset.sass typography.sass modules/ nav.sass footer.sass编译后会自动得到stylesheets/ base/ reset.css typography.css modules/ nav.css footer.css也就是说源目录sass/与输出目录stylesheets/默认值见 cli/lib/compass/app_integration/stand_alone/configuration_defaults.rb保持着逐层对应的镜像关系。你可以利用这一机制按模块、按页面或按组件维度组织样式让目录结构直接反映最终 CSS 的结构无需额外维护映射关系。五、Partial局部文件机制下划线开头的文件不会独立编译5.1 基本规则USAGE 文档介绍了 Compass / Sass 体系中至关重要的 partial 概念以下划线_开头的 Sass 文件称为 partial局部文件partial不会被单独编译成独立的 CSS 文件它们通过import被引入到其他样式表中使用。例如在sass/下创建_base.sass不会产生stylesheets/_base.css而是需要在其他文件中import base或使用 SCSS 语法import base;5.2 为什么这样设计把样式拆成 partial 的价值在于保持样式表小巧、可管理、职责单一每个 partial 只关注一件事变量、混入、某个组件的样式主样式表只负责组装避免重复编译partial 不产生独立输出文件就不会出现同一份代码既被打包又独立输出的冗余便于按需引入不同入口样式表如screen.sass与print.sass可以各自 import 自己需要的那部分 partial。5.3_base.sass惯例USAGE 文档特别提到一个通行做法在样式表目录顶层创建一个_base.sass文件在其中集中定义项目级常量颜色、字号、间距等变量与混入mixins然后在各样式表中 import 它实现全项目共享。// sass/_base.sass —— 项目级基础定义 $base-font-size: 16px $primary-color: #2a6ebb mixin rounded($radius: 3px) -moz-border-radius: $radius -webkit-border-radius: $radius border-radius: $radius// sass/screen.sass —— 主样式表引入基础定义 import base import compass/reset body color: $primary-color font-size: $base-font-size5.4 安装器对 partial 的处理印证partial 不会被单独编译的规则不仅存在于编译器层安装器层也严格遵守在 cli/lib/compass/installers/manifest_installer.rb 的stylesheet_links中生成 HTMLlink时会显式跳过以_开头的样式表文件next if File.basename(stylesheet.from)[0..0] _确保 partial 永远不会出现在页面引用的 CSS 列表中。六、从命令行创建默认项目实操环节6.1 基本命令在未指定框架的情况下创建默认项目直接运行compass create path/to/projectpath/to/project指定项目目录不带参数时默认使用当前目录。该命令同时注册了compass init别名用于向已有项目初始化 Compass见 cli/lib/compass/commands/create_project.rb。命令的完整用法与全部选项可查看 cli/lib/compass/commands/create_project.rb 中的选项解析定义常用参数如下选项说明--using PATTERN指定要使用的框架模式格式为framework/pattern默认框架为compass默认模式为project见 cli/lib/compass/commands/create_project.rb-x, --syntax sass\|scss指定生成样式表所用的语法可选sass或scss默认是scss--prepare只做准备工作仅创建配置文件不生成样式表--bare不生成任何 Sass 或 CSS 文件与指定框架同时使用时会被拒绝见 cli/lib/compass/commands/create_project.rb6.2 生成后的目录结构一个默认的 Compass 独立项目stand-alone默认项目类型见 cli/lib/compass/app_integration/stand_alone/configuration_defaults.rb大致如下project/ ├── config.rb # Compass 配置文件 ├── sass/ # 源码目录默认 │ ├── screen.sass │ ├── print.sass │ └── ie.sass ├── stylesheets/ # 编译输出目录默认 │ ├── screen.css │ ├── print.css │ └── ie.css ├── javascripts/ # 默认 javascripts 目录 └── images/ # 默认 images 目录其中sass、stylesheets、javascripts、images这些目录的默认命名均可在 cli/lib/compass/app_integration/stand_alone/configuration_defaults.rb 中找到sass_dir、css_dir、javascripts_dir、images_dir并可在config.rb中按需覆盖。6.3 安装器执行流程从源码结构看项目生成实际由安装器完成ManifestInstaller继承自Base遵循prepare → install → finalize三步策略见 cli/lib/compass/installers/base.rb。其中init阶段会根据 manifest 中声明的内容创建sass/与stylesheets/目录见 cli/lib/compass/installers/manifest_installer.rbinstall阶段则按 manifest 条目顺序逐一落地文件见 cli/lib/compass/installers/manifest_installer.rb。模板文件在安装时会按配置的preferred_syntax自动转换语法cli/lib/compass/installers/base.rb因此即使模板写的是.sass你指定-x scss时得到的也是.scss文件。七、最佳实践小结综合 USAGE 文档与仓库实现一套稳妥的 Compass 项目起步策略是保留三文件骨架screen.sass承载主体样式、print.sass处理打印、ie.sass兜底旧浏览器职责清晰配套 HTML 引用代码由安装器按 manifest 自动生成开箱即用用 partial 拆分模块所有可复用的变量、混入与组件样式都放进下划线开头的 partial避免生成冗余 CSS 文件建立_base.sass共享层把项目级常量与混入集中于此各入口样式表统一import base善用目录映射按业务模块在sass/下建子目录编译产物自动镜像长期维护成本最低必要时自由裁剪三个默认文件只是建议可以重命名、增删compass create --bare甚至允许你完全不生成任何样式文件从零开始搭建自己的组织方式。以上规则均可在本仓库的以下文件中进一步验证与深入模板与说明core/templates/project/USAGE.markdown、core/templates/project/manifest.rb、core/templates/project/screen.sass安装器实现cli/lib/compass/installers/manifest_installer.rb、cli/lib/compass/installers/manifest.rb、cli/lib/compass/installers/base.rb命令与默认配置cli/lib/compass/commands/create_project.rb、cli/lib/compass/app_integration/stand_alone/configuration_defaults.rb赞分享前端【免费下载链接】compassCompass is no longer actively maintained. Compass is a Stylesheet Authoring Environment that makes your website design simpler to implement and easier to maintain.项目地址https://gitcode.com/gh_mirrors/co/compass点击查看免费下载相关推荐htmx 2.0.0 正式发布不再支持 IE、收紧默认行为与全新模块分发体系htmx 2.0.0 正式发布不再支持 IE、收紧默认行为与全新模块分发体系 本文基于 htmx 官方发布公告《htmx 2.0.0 has been rel前端Web框架Draft.js 块级样式Block Styling完全指南blockStyleFn 原理、默认列表样式与实战扩展Draft.js 块级样式Block Styling完全指南blockStyleFn 原理、默认列表样式与实战扩展 Draft.js 编辑器在渲染时会给部前端UI组件VuePress 目录结构与默认页面路由完全指南VuePress 目录结构与默认页面路由完全指南 本文以 VuePress 官方文档《目录结构》为骨架结合本仓库 gh_mirrors/vu/vuepres前端文档SSR上一篇onetimepass 2.0新特性Python 3.8支持与零依赖架构详解下一篇终极指南如何用Perfect框架快速构建Swift服务端应用创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考