Magento 2中的CSS和更少内容

Magento 2中的CSS和更少内容

2017年10月17日发布 in 发展历程
规范标签:您是否正确在Magento网站上找到了它?
十月9,2017
在Magento 2中创建送货方式
在Magento 2中创建送货方式
2017年11月30日

Magento 2利用CSS预处理的强大功能(通过 ),以使主题自定义变得直观并易于通过变量,混入和导入等功能进行维护。较少的编译是M2的基本组成部分’的静态内容部署和开发工具,简化了主题制定过程,并确保前端开发人员可以专注于自己的代码,而不是编译最终的CSS。

本机Less实现实现所使用的约定和结构被巧妙地设计和设计为允许灵活且毫不干扰的自定义。但是,随之而来的是一个简单的事实,那就是存在许多不同的方法可以解决给定问题,并且某些技术比其他技术更好。如果您花费大量时间为Magento网站主题,’我们绝对希望对核心公约有一个广泛的了解,并由此扩展我们可以借鉴的最佳实践。我们’本文将同时介绍这两个方面。

I’假设您已经基本了解主题,Magento中可用的Less和dev工具的详细信息’s 前端开发人员指南,以及核心Less概念,例如变量和mixin。

鸟’s-eye Overview

让’吸引了Magento如何原生构建Less的广泛亮点。

定义了三种主要的位置样式:

  • 视图/{area}/web/css/source 在扩展中’s root directory
    • 例如。, /app/code/MyCoolVendor/MyCoolApp/view/frontend/web/css/source/_module.less
    • 请注意,您赢了’不能在核心软件包中看到这一点,因为它们的基准样式实际上包含在Magento / blank主题中,如下所述。
  • /lib/web/css/source,尤其是 /lib/web/css/source/lib
    • 例如。, /lib/web/css/source/lib/_buttons.less
    • 这些构成了Magento’的UI库样式。这里没有直接的样式实现,而是打算在主题中使用的可重用组件(主要是mixin)。
  • 在一个主题中,有两个主要背景:
    • 相对于特定扩展名
      • 例如。, /app/design/frontend/MyCoolVendor/my-cool-theme/Magento_Catalog/web/css/source/_extend.less
    • 更多通用文件直接在 web/css
      • 例如。, /app/design/frontend/MyCoolVendor/my-cool-theme/web/css/source/_theme.less

本机主题实现的基本内容在特定于扩展名的文件中。

最后一点,以下内容主要集中于前端结构,并假设一个扩展了Magento /空白的主题。

清单文件

而狮子’主题样式的一部分包含在特定于扩展名的文件中,在导入这些样式之前,我们具有由清单文件(导入其他清单文件,导入其他清单文件)导入的更广泛样式组成的基础。那里’除了这些连续的导入列表,这些内容实际上什么也没有。

让’s look at the primary starting manifest file, web/css/_styles.less relative to the theme root:

As you can see, this vanilla version from Magento/blank 进口s three other manifests. _lib.less will 进口 the UI LIBrary mixins and their associated variables, _sources.less will 进口 core files that 使用 those LIBrary mixins to implement certain baseline theme styles, and _components.less will 进口 styles specific to 在teractive components like (in fact, 只要) modals.

主要编译文件

Zooming our perspective out further, we find the outermost, or top-level, 减 files that correspond directly with the final compiled 的CSS. styles-m.less and styles-l.less are the main event here, though there are email- and print-related top-level files as well. Importing _styles.less is nearly the first thing done here, but there’解压缩还有很多。

It’s easy to see the distinction between styles-m and styles-l by observing the way they’重新包含在布局中:

styles-m contains universal and small screen styles, while styles-l is restricted by a 媒体 query making it specific to large screens. Here are the condensed contents of the Magento/blank version of styles-m.less:

styles-l.less 有一些显着的差异,但看起来几乎相同。最重要的区别如下所示:

这两个Less变量的不同值是确定两个文件输出的关键。

  • Universal styles that should apply at any screen size are wrapped 在 the 的CSS guard & when (@media-common = true) { and thus 只要 output 在 styles-m. (The default value of @media-common is true.)
  • Breakpoint-specific styles are defined using a mixin definition like .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {. The 进口ed file source/lib/_responsive.less outputs the results of such mixins within typical 的CSS 媒体 queries, using the same two variables 在 its conditionals, thus allocating 只要 the approprite styles to each final file.

上面应该清楚说明为什么’重要的是不要包括“naked” styles 在 your 减 files, but rather always wrap them 在 a 媒体-width mixin or the @media-common guard. Otherwise, your styles will be duplicated between both final 的CSS files.

The final structure of 在terest 在 the main compiled files are the 参考s to @magento_import, which you’ll notice are actually preceded by 减 comment characters. This directive is 使用d by Magento 在 its pre-processing and transformed 在to a succession of actual 减 进口s. _module.less, _widgets.less and _extend.less are not expected to be present 在 只要 上e location relative to the theme; many such files may exist relative to specific extensions (whether present 在 the original extension package or 在 the appropriate sub-directory 在 the theme). During pre-processing, this directive is exploded 在to multiple normal 进口 statements –每个找到的路径一个。这对如何处理这些文件名以及您应如何使用它们构成了重要的区别。

重要命名文件

We’我们研究了Magento如何编译其最终CSS文件的一般流程。在我们研究一些实用指南之前,请先’s查看了最常见的Less文件的摘要’重新用于实现您的样式。

  • _module.less: The core styles for a specific extension. Imported from multiple locations via @magento_import.
  • _extend.less: Additional theme-specific styles for a specific extension, or for the theme as a whole. Imported from multiple locations via @magento_import.
  • _extends.less: Styles to be 使用d by extend selectors. Imported by 参考 from the generic web/css location.
  • _theme.less: Theme-specific variable overrides. Imported from the generic web/css location.

当我们赢了’t really be covering it later, _extends.less is worth touching 上, and it’值得注意的是’包括在这里不是因为你’re really likely to 使用 it frequently, but because the name similarity with _extend.less demands some attention, lest you confuse the two. _extends.less is 进口ed with the “(reference)”指令,意味着Less会将其导入供其他文件使用,但实际上不输出其内容。它’s 在tended specifically for the definition of 共同 style blocks that are to be 使用d with the 减 :extend selector to implement them easily 在 various contexts throughout the theme. (As an example, the Magento/blank version implements styles for .abs-block-title, which other selectors 在 the theme 使用 via :extend(.abs-block-title).) This is similar to a mixin but is a simpler construct.

ew!那只鸟真长’s-eye 视图 as we could want. Now that we have a good idea of Magento’减少结构,让’通过可能遇到的一些实际用例,来研究利用这些组件的最佳方法。

我想对大型主题区域进行重大重构

We’从最雄心勃勃的用例开始,因为它还涉及最直接的自定义方法。任何较少的不完整部分都可以由主题中适当路径中的文件直接覆盖。

  • Override /app/code/MyCoolVendor/MyCoolApp/view/frontend/web/css/source/_module.less 在 this location 在 your theme:
    • MyCoolApp/web/css/source/_module.less
  • Override /lib/web/css/source/lib/_buttons.less 在 this location 在 your theme:
    • web/css/source/lib/_buttons.less
  • Override the Magento/blank file web/css/source/components/_breadcrumbs.less 在 the same path 在 your own theme.

当您以这种方式覆盖Less部分时,它将从继承链中的更远位置或扩展或lib源完全替换源文件。这是修改父主题或扩展名的最直接方法,但在大多数情况下也是最不合适的,因为它涉及向前复制整个原始文件。仅当您真正打算进行大修而保留的原件很少时,才应使用此方法。

我想交换调色板或更改一些美学细节

可能是你’只是对通过更改字体和色相来修饰本机主题感兴趣。也许你’ve created an awesome theme and want to 使用 it 上 multiple stores with some 颜色 palette swapping, using themes that 在herit from the first. Such modifications are precisely the 使用 case for web/source/_theme.less.

在整个Magento中使用较少的变量’s core themes (and should be 在 yours as well) for everything from font families and sizes to 颜色s to spacing. 通过 convention, _theme.less is 在tended to be 使用d solely for overriding the values of such variables. This technique is a fairly powerful method for achieving a unique aesthetic without touching a single line of 的CSS, and even if you 在tend to go further with your theme, you’毫无疑问,我会大量使用它。

特别是关于您的调色板,请注意 ’s worthwhile to make 使用 of self-contained 减 variables within _theme.less to keep things well organized. The following shows an example of defining 颜色 values 只要 上ce and then distributing those values to other more meaningful variables:

这是 只要 在变量名称中引用颜色名称的上下文。为您创建的要在其他地方使用的任何新变量使用语义有意义的名称。

我想对现有样式进行重大定制

如果该部分标题看起来有点通用,那’s because we’重新谈论主题的肉和土豆– the areas where you’会花费大部分时间。这是仅更改一些变量以更改外观和完全消除本机主题之间的中间路线’的样式支持您自己的结构。这仍然将父主题用作主干,但是从那里构建您自己的自定义。

As noted above, you could accomplish this with direct overrides of files from the parent theme, but this is 在advisable. Doing so 在volves unnecessary duplication of large portions of code, and it makes it much more difficult to identify the styles that are unique to your theme at a glance. Instead, 使用 _extend.less for add-on styles that make your theme-specific modifications.

We’ve seen that _module.less and _extend.less are 进口ed 在 the same way, and the difference between them is merely 上e of convention. Extensions and the native theme 在clude the former but not the latter; you can think of _extend.less as the empty space that’s left available for your theme-specific styles. As a caveat, though, 上ce _extend.less is implemented 在 a theme, any descendent themes that need to modify it will need to copy it forward like any other file.

Recall that _extend.less is 进口ed not just from a single location 在 your theme, but from multiple possible locations. While you might be tempted to 使用 web/css/source/_extend.less as a catch-all for your theme’s styles, you’我们建议根据与他们互动的区域将其划分为适当的扩展。 (例如,基于’s established 在 the Magento/blank file Magento_Customer/web/css/source/_module.lessMagento_Customer/web/css/source/_extend.less 在 your own theme.) This makes for a better organized and more maintainable theme structure.

在一般主题的主题上,有两个更一般的技巧:首先,利用适当时核心UI库可用的mixin。图标就是一个很好的例子。 Magento本机使用图标字体,通常使用:before和:after伪元素来注入正确的字符。虽然可以在要使用图标的其他区域手动完成此操作,但是您可以’re better off using the .lib-icon-font mixin as the core code does. This ensures better consistency and stability, and the native mixin implements the -webkit-font-smoothing property for proper antialiasing, something that is easy to overlook.

Finally, avoid hard-coded values for things like 颜色s and numerical values 在 your styles. Define variables 在 _theme.less for such values, even if they’是您自己发明的新变量。

我想创建样式来伴随我的扩展

如果你’编写了扩展以添加影响Magento前端的自定义功能,’需要CSS来陪伴它。例如说你’ve created MyCoolVendor_Subcategories, which implements the ability for category pages to show a dynamic list of subcategories. 通过 now, you probably know exactly where the associated styles go: 视图/frontend/web/css/source/_module.less 在 the extension root directory.

但是,在离开主题之前,让我们’在这种情况下谈论更少的变量。您的扩展样式几乎可以肯定应该使用变量,并且它’s likely they’不会是唯一的’t exist 在 the native theme. In our 使用 cases thus far, new variables can be defined 在 _theme.less with impunity, because those 使用 cases were contained within the confines of a single theme, and 减’懒惰的评估意味着可以根据需要定义变量。但是,对于扩展名,我们’ve arrived at a scenario where our 减 should be complete without 参考 to a particular theme. Your new variables should be defined with default values 在 _module.less itself, typically at the very top. This is a gimme if you’重新开发可分配的扩展名,但是’为特定站点编写自定义功能时很容易错过。如果您确实错过了它,并且如果您在未指定主题的情况下编译静态内容,则在处理诸如Magento / blank之类的核心主题时,期望看到较少的关于不存在的变量的编译错误。

我想覆盖一个混音

让’s say you’d想对Magento进行一些调整 ’s native styles, but the styles 在 question are embedded within the body of a mixin. For example, you might want a border radius 上 every element where the .lib-button mixin is 使用d. You could track down every selector where it’s 使用d and implement your style 上 those selectors, but it would be better if you could 在ject it 在to the body of the mixin itself. (A good strategy would be to add a border radius parameter to the mixin definition, establishing a variable to represent a default value, which could then be set 在 _theme.less.)

This could be a legitimate case for simply copying forward the file (web/css/source/lib/_buttons.less) that defines that mixin. Note, though, that many such files group multiple related mixins together, and therefore there is some unnecessary duplication if we want to override 只要 上e. You might try implementing your mixin override 在 a path like web/css/source/custom/lib/_buttons.less.

通过这种策略,我们’ve reached a scenario where we actually have a new 减 partial that Magento will not 进口 by default. This is where the manifest files we reviewed above come 在to play. Since web/css/_styles.less and its subordinates are merely lists of 进口s, it’s not very 在trusive at all to copy them forward and modify them. You could copy _styles.less itself forward and add your new file to the list there; this has the advantage of less duplication of core files if you have multiple new 进口s to add. Or if you want to be very exact about placing your file 在 the exact same place 在 the 进口 order as the original, you could copy forward that particular manifest file (in this case, web/css/source/lib/_lib.less). Either is a fine approach.

最后一点,您可能会想起以这种方式覆盖mixin定义,就像覆盖编程语言中的方法一样。它’真的不是; mixin定义是累积性的(媒体断点mixins清楚地表明了这一点)。但是Less拥有触手可及的魔力,可以避免多次输出相同的样式声明,因此结果仍然大致相同。如果找到你’我想实质性地重构原始的mixin定义’创建一个新的mixin可能更好。

我想定义自己的混音

说到创建自己的mixin,’s our last 使用 case. 让’s say you create a flexbox-based implementation of a tabbed 在terface, which is a great case for encapsulation within a mixin. The best location for this is 在 LIB, like the native mixins: web/css/source/lib/_flextabs.less. And you’我想确保像本地混合一样,您的通过命名变量支持其参数的默认值:

Now, wherever .lib-flextabs is 使用d, @_tab-background-color can be passed 在 if desired. But the variable @flextab__tab-background-color is also available to set universally 在 _theme.less to apply to all 使用s of .lib-flextabs when that parameter is not explicitly passed.

假设你’re defining your custom mixin within a theme, you could just put your 在itial declaration of all such default variables directly 在 _theme.less and call it done. It’s probably better form, though, and will make your 减 structure more 在tuitive for other devs, if you follow the core pattern and pair your mixin file with a variables file that defines default values. (e.g., web/css/source/lib/variables/_flextabs.less)

从这里开始’s just a matter of actually making sure your new 减 partials get 进口ed, which follows the same procedure described above: 复制 forward web/css/_styles.less and add them there, or else copy forward both web/css/source/lib/_lib.less and web/css/source/lib/_variables.less and add them 在 precisely the same spot that other mixins are 进口ed.

如果你’如果将新的mixin定义为自定义扩展的一部分,则过程将大致相同。您’仍然会为您的mixin定义及其可变的默认值定义局部变量,但是您’将它们的导入语句放在扩展中’s _module.less.

结论

我希望在我们的用例清单中,’在日常Magento开发中遇到了一些实际情况。如果你’我们一直在为编写正确的代码而在正确的位置放置正确的代码而苦苦挣扎,现在我们应该拥有更好的信心’我偷看了一下。花点时间检查Magento如何理解和处理您的主题代码对于实现一个主题是非常值得的’从长远来看,它更易于理解,可扩展和可维护。

6 评论

  1. 塞巴斯蒂安 说:

    很棒的帖子!!

  2. 钱德雷什 说:

    如何在自定义扩展名中添加_module.less?我已经在frontend / web / 的CSS / source中以及在部署了此内容之后创建了_module.less文件。但是风格不适用。

    • 克里斯·南宁加 说:

      您列出的路径是“view”扩展根目录?如果是这样’正确的道路,你不应该’不需要做任何额外的工作来进行编译。一世’d尝试确保清除所有可能的临时/缓存位置,包括清除var / view_preprocessed并在部署之前明确清除pub / static / frontend。

  3. 约书亚记 说:

    谢谢你的帖子
    我没有’知道可以为单独的模块指定_extend.less。

  4. 罗恩·粘土巴西 说:

    感谢您的帖子!

发表评论

您的电子邮件地址不会被公开。 必需的地方已做标记 *

该网站使用Akismet减少垃圾邮件。 了解如何处理您的评论数据.

最近的帖子查看全部
2020年10月22日

Covid世界中的假日销售:应对挑战

毫无疑问,2020年是历史性的一年。火灾,全球大流行,暴动,老虎王等’只是冰山一角。如 [â€]
2020年8月7日

涡轮增压ZZPerformance的付费搜索

2020年7月30日

Intermix Beats M1 End of Life with 优雅的骆马Accelerator