Cmd

显示私有类

Fashion

简介

在 Sencha Cmd 6.0 中，我们很高兴推出一个名为“Fashion”的新的快速工具，用于为 Ext JS 6.0 开发主题。将 Fashion 和 sencha app watch 结合使用，为主题开发创建了一种新模式，我们称之为“Live Update”。

Live Update 使用 Fashion 编译最新的 CSS，然后将其注入到您正在运行的页面中。这意味着您不必重新加载即可看到主题更改，而是可以在浏览器中近乎实时地直接看到这些更新。

Sencha Cmd 6 在为 Ext JS 6 应用程序编译主题时也使用 Fashion。由于 Fashion 是用 JavaScript 实现的，因此不再需要 Ruby。

什么是 Fashion？

Fashion 是用于生成 CSS 的 .scss 文件的编译器。Fashion 还添加了一些 Sass 中没有的新功能，这些功能允许 Sencha Inspector 等工具直观地检查和编辑主题（或您的应用程序）定义的变量。

JavaScript 扩展

用户可以通过编写 JavaScript 模块来扩展 Fashion 的功能。一般来说，Ext JS 用户可能更熟悉 JavaScript，因此扩展行为应该比扩展 Compass 简单得多。我们将在下面详细讨论扩展 Fashion。

现在介绍已经结束，让我们来谈谈 Fashion！

兼容性

Fashion 与 CSS3 语法以及 sass-spec 验证套件的大部分兼容。由于 Fashion 确实理解大多数 Sass 代码，因此使用 Fashion 编译现有 .scss 代码应该不困难。

但是，由于稍后讨论的附加功能，将 Fashion 称为“Sass 的实现”或 Fashion 编译的语言“是 Sass”是不正确的。在许多地方，“sass”一词被用作磁盘上配置选项或文件夹的名称。出于兼容性原因，这些配置选项仍然命名为“sass”，即使底层的语言不是严格的“Sass”。

使用 Live Updates

您可以在（现代）浏览器中打开应用程序，并且将加载 Sass 文件而不是生成的 CSS。然后 Fashion 可以对文件更改做出反应，重新编译 Sass 并更新 CSS，而无需重新加载页面。

有两种方法可以启用 Fashion 以在 sencha app watch 中使用。

您可以通过编辑 app.json 中找到的“development”对象来启用 Fashion

...
"development": {
    "tags": [
        "fashion"
    ]
},
...

或者，您可以在加载页面时将“?platformTags=fashion:1”添加到您的 URL 中。

现在我们准备启动

从应用程序的根文件夹执行“sencha app watch”。
将浏览器导航到您的应用程序（例如，https://127.0.0.1:1841/app）。

您现在应该能够修改您的主题变量并几乎立即看到更改。

注意：Live Update 仅在从 Cmd Web 服务器查看页面时有效。在 Ext JS Classic 工具包中，某些 Sass 更改可能需要布局或完整页面重新加载。这在 Modern 工具包中将不再是一个问题，因为它更多地基于 CSS3，并且将重排以适应更积极的更改。

语言扩展

动态变量

动态变量在 Fashion 中起着非常重要的作用。动态变量类似于普通变量，但它们的值包装在“dynamic()”中。动态变量与普通变量的不同之处在于它们彼此之间的交互方式。考虑一下

$bar: dynamic(blue);

$foo: dynamic($bar);  // Notice $foo depends on $bar

$bar: dynamic(red);

@debug $foo;  // red

请注意，$foo 是从 $bar 计算出来的。Fashion 特殊处理了这种依赖关系，并且 $foo 的计算被推迟到 $bar 的最终值已知时。

换句话说，动态变量分两个阶段处理：赋值和求值。

赋值

动态变量，如普通变量一样，以正常的“级联”顺序赋值（与 !default 不同）

$bar: dynamic(blue);

$bar: dynamic(red);

@debug $bar;  // red

这允许工具将自定义值附加到任何代码块并控制其动态变量。

动态变量的赋值只能在文件作用域和任何控制结构之外发生。例如，这是非法的

$bar: dynamic(blue);

@if something {
    $bar: dynamic(red); // ILLEGAL
}

应该使用以下形式代替上述形式

$bar: dynamic(if(something, red, blue));

此要求对于启用下面讨论的求值和提升行为是必要的。

动态变量可以在声明后赋值，无论是否使用 dynamic() 包装器。

$bar: dynamic(blue);

$bar: red;  // reassigns $bar to red

$bar: green !default;  // reassigns $bar to green

@debug $bar;  // green

不存在“默认动态”这样的东西。

求值

动态变量按依赖顺序而不是声明顺序求值。声明顺序仅适用于单个变量赋值的级联。这可以在上面的示例中看到。这种排序也意味着我们甚至可以删除 $bar 的第一个设置，代码也会得到相同的结果。

考虑更详细的示例

$bar: dynamic(mix($colorA, $colorB, 20%));

$bar: dynamic(lighten($colorC, 20%));

$bar 的原始表达式使用了 $colorA 和 $colorB。如果那是对 $bar 的唯一赋值，那么 $bar 将依赖于这两个变量，并在它们之后求值。由于 $bar 被重新赋值，随后仅使用了 $colorC，因此在最终分析中，$bar 仅依赖于 $colorC。对 $bar 的原始赋值可能从未发生过。

提升

为了完成所有这些，Fashion 收集所有动态变量，并在执行任何其他 Sass 代码之前对它们进行求值。换句话说，类似于 JavaScript 变量，动态变量被“提升”到顶部。

提升

当变量用于赋值动态变量时，这些变量会提升为动态变量。

$foo: blue;

$bar: dynamic($foo);

即使 $foo 被声明为普通变量，但由于 $bar 使用了 $foo，Fashion 也会将 $foo 提升为动态变量。

注意： 这意味着 $foo 现在必须遵循动态变量的规则。

支持此行为是为了最大限度地提高从先前版本的 Sencha Cmd 的可移植性。当变量被提升时，将生成警告。在未来的版本中，此警告将变为错误。我们建议更正此代码，以将所需的变量正确声明为 dynamic()。

扩展 - 需要 JavaScript

您可以通过 JavaScript 编写代码来扩展 Fashion。要从需要它的 Sass 代码中需要此代码，请使用 require()。例如

require("my-module");

// or

require("../path/file.js"); // relative to scss file

在内部，Fashion 使用 ECMAScript 6 (ES6) System.import API（或其通过 SystemJS 的 polyfill）来支持加载标准 JavaScript 模块。

模块可以用 pre-ES6 语法编写，如下所示

exports.init = function(runtime) {
    runtime.register({
        magic: function (first, second) {
            // ...
        }
    });
};

使用 SystemJS，您可以启用“转译器”以在任何浏览器中编写 ES6 代码。上面的代码在 ES6 中看起来像这样

module foo {
    export function init (runtime) {
        runtime.register({
            magic: function (first, second) {
                // ...
            }
        });
    }
}

升级

动态变量

升级到 Ext JS 6 时，动态变量的内部使用可能会影响这些变量在应用程序和自定义主题中的赋值方式。虽然不是必需的，但我们建议您更改变量赋值以使用 dynamic()。在大多数情况下，这将机械地将 !default（以前版本中采用的方法）替换为 dynamic()

// before:

$base-color: green !default;

// after:

$base-color: dynamic(green);

如果基于动态变量赋值的更严格性质生成错误，这将使其更加明显。

Compass 扩展

依赖于 Ruby 代码的 Compass 功能将不可用，因为不再使用 Ruby。必须使用 JavaScript 创建等效的功能。在许多情况下，可以使用 require() 在 JavaScript 中实现缺少的功能来提供这一点。但是，Compass 中的 Sass 代码包含在 Fashion 中，因此并非所有 Compass 功能都受到影响。一般来说，如果您没有使用任何自定义或基于 Ruby 的 Compass 功能，您很可能不需要进行任何更改。

结论

我们对 Fashion 感到非常兴奋，希望您也一样！快速主题化您的应用程序从未如此简单，现在可以使用与框架相同的语言扩展 Sass。请务必在论坛上给我们留下任何反馈。

目录

术语、图标和标签

访问级别

成员类型

成员语法

成员标志

类图标

成员图标

导航和功能

类成员快速导航菜单

Getter 和 Setter 方法

历史记录栏

搜索和过滤器

API 文档类元数据

展开和折叠示例和类成员

桌面视图与移动视图

查看类源代码

Cmd

目录

Fashion

简介

什么是 Fashion？

JavaScript 扩展

兼容性

使用 Live Updates

语言扩展

动态变量

赋值

求值

提升

提升

扩展 - 需要 JavaScript

升级

动态变量

Compass 扩展

结论

Cmd