在Magento 2看CSS和更少
在Magento 2看CSS和更少

在Magento 2看CSS和更少

2017年10月17日出版 in 发展
规范标签:您是否在Magento网站上达到它?
2017年10月9日
在Magento 2中创建送货方式2
在Magento 2中创建送货方式2
2017年11月30日

玛托托 2.利用CSS预处理的巨大力量(通过 较少的)通过具有变量,混音和进口等功能,使主题定制直观且易于维护。少编译是M2的基本部分’S静态内容部署和开发工具,简化了主题过程并确保前端开发人员可以专注于他们的代码,而不是编译最终的CSS。

巧妙地架构和旨在允许灵活和不引人注目的自定义,概念性较少的实施使用的惯例和结构。但随着权力来说,简单的事实是,有许多不同的肤色方法给出了给定的问题,一些技术比其他技术更好。如果你花了很多时间主题玛黑伦网站,你’LL绝对希望对核心公约进行广泛了解,并通过延期来,我们可以从中入口的最佳做法。我们’LL在本文中都覆盖。

I’LL假设您对Magento提供了关于主题,更少和Dev工具的详细信息’s 前端开发人员指南,以及核心较少的核心,如变量和混合。

鸟’s-eye Overview

让’S击中了万特本身如何结构的广泛亮点。

定义了三个主要位置样式:

  • 看法/{area}/web/css/source 在 an extension’s root directory
    • 例如。, /app/code/MyCoolVendor/MyCoolApp/view/frontend/web/css/source/_module.less
    • 注意你赢了’T在核心包中看到这一点,因为这些类型的基准样式实际上包含在Magento /空白主题中,如下面参考。
  • /lib/web/css/source,特别是, /lib/web/css/source/lib
    • 例如。, /lib/web/css/source/lib/_buttons.less
    • 这些构成了magento.’S UI图书馆样式。这里没有直接风格实现,而是旨在以主题用于主题的可重复使用的组件(主要是MIXIS)。
  • 在一个主题中,在两个主要背景下:
    • 相对于特定的延期
      • 例如。, /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的主题样式包含在特定于扩展文件中,在导入之前,我们有一个由由清单文件导入的更广泛风格组成的基础(导入导入其他清单文件的其他清单文件)。那里’真的没有任何东西,而是连续的进口清单。

让’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 imports three other manifests. _lib.less will import the UI library mixins and their associated variables, _sources.less will import core files that 采用 those library mixins to implement certain baseline theme styles, and _components.less will import styles specific to interactive components like (in fact, only) modals.

主要编译的文件

Zooming our perspective out further, we find the outermost, or top-level, Less 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 media query making it specific to large screens. Here are the condensed contents of the Magento/blank version of styles-m.less:

styles-l.less 有一些值得注意的差异,但它看起来很差不多。最重要的区别看起来像这样:

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

  • Universal styles that should apply at any screen size are wrapped in the CSS guard & when (@media-common = true) { and thus only output in 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 imported file source/lib/_responsive.less outputs the results of such mixins within typical CSS media queries, using the same two variables in its conditionals, thus allocating only the approprite styles to each final file.

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

The final structure of interest in the main compiled files are the references to @magento_import, which you’ll notice are actually preceded by Less comment characters. This directive is used by Magento in its pre-processing and transformed into a succession of actual Less imports. _module.less, _widgets.less and _extend.less are not expected to be present in only one location relative to the theme; many such files may exist relative to specific extensions (whether present in the original extension package or in the appropriate sub-directory in the theme). During pre-processing, this directive is exploded into multiple normal import statements –每个发现的路径一个。这构成了如何对待这些超级名员的处理以及如何使用它们的重要差异。

重要的命名文件

We’查看了Magento如何编译最终CSS文件的一般流程。在我们进入一些实用的指导方针之前,让’s看到最常见的档案越来越少’重新使用来实现您的风格。

  • _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 used by extend selectors. Imported by reference 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 on, and it’值得注意的是’包括在这里不是因为你’re really likely to use it frequently, but because the name similarity with _extend.less demands some attention, lest you confuse the two. _extends.less is imported with the “(reference)”指令,意味着较少将导入其用于其他文件但实际上不会输出内容。它’s intended specifically for the definition of common style blocks that are to be used with the Less :extend selector to implement them easily in various contexts throughout the theme. (As an example, the Magento/blank version implements styles for .abs-block-title, which other selectors in the theme use via :extend(.abs-block-title).) This is similar to a mixin but is a simpler construct.

哇!这是一只燕子的漫长’我们想要的眼睛视图。现在我们有一个好主意的magento’结构较少,让’S看看最好的方法来利用这些组件,通过您可能遇到的一些实际用途案例。

我希望大大重新定为大型主题区域

We’从最雄心勃勃的用例开始,因为它还涉及最直接的定制方法。可以在主题中适当的路径中的文件直接覆盖任何更少的部分。

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

通过这种方式覆盖不太偏移,它完全替换在继承链中的源文件或从扩展名或lib源替换源文件。这是修改父主题或扩展的最直接方式,但对于大多数情况而言,它也是最不适合的,因为它涉及复制整个原始文件的全部。只有在真正打算保留原件的批发大修时才应该使用此方法。

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

可能是你’刚刚有兴趣涌现本机主题,并在字体和色调中的一些变化。或许你’ve created an awesome theme and want to use it on multiple stores with some color palette swapping, using themes that inherit from the first. Such modifications are precisely the use case for web/source/_theme.less.

在整个麦片普遍使用较少的变量’s core themes (and should be in yours as well) for everything from font families and sizes to colors to spacing. By convention, _theme.less is intended to be used 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 intend to go further with your theme, you’毫无疑问,大量使用它。

特别是关于你的调色板,注意它 ’s worthwhile to make use of self-contained Less variables within _theme.less to keep things well organized. The following shows an example of defining color values only once and then distributing those values to other more meaningful variables:

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

我想为现有风格进行主要定制

如果部分标题似乎有点通用,那’s because we’谈论主题的肉和土豆– the areas where you’我大部分时间都花了。这是刚改变一些变量之间的中间道路来改变外观和完全吹走本地主题’S样式支持您自己的结构。这仍然使用父主题作为骨干,但从那里建立自己的自定义。

As noted above, you could accomplish this with direct overrides of files from the parent theme, but this is inadvisable. Doing so involves 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, use _extend.less for add-on styles that make your theme-specific modifications.

We’ve seen that _module.less and _extend.less are imported in the same way, and the difference between them is merely one of convention. Extensions and the native theme include 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, once _extend.less is implemented in 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 imported not just from a single location in your theme, but from multiple possible locations. While you might be tempted to use web/css/source/_extend.less as a catch-all for your theme’s styles, you’我们鼓励将它们分成适当的扩展,基于他们与之互动的领域。 (例如,建立在什么’s established in the Magento/blank file 玛托托_Customer/web/css/source/_module.less玛托托_Customer/web/css/source/_extend.less 在 your own theme.) This makes for a better organized and more maintainable theme structure.

虽然在一般主题的主题的同时,更多的一般提示:首先,利用核心UI库的Mixins在适当时提供。图标是一个很好的例子。 magento本身使用图标字体,通常使用:之前和:伪元素后注入正确的字符。虽然有可能在您想要使用图标的其他地区手动完成此操作’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 colors and numerical values in your styles. Define variables in _theme.less for such values, even if they’重新您自己的新var。

我想创建样式来陪伴我的扩展名

在你的情况下’ve写了一个扩展以添加影响Magento Frontend的自定义功能,您’重新需要CSS陪同它。例如,说你’ve created MyCoolVendor_Subcategories, which implements the ability for category pages to show a dynamic list of subcategories. By now, you probably know exactly where the associated styles go: 看法/frontend/web/css/source/_module.less 在 the extension root directory.

但是,在我们离开这个话题之前,让’在此上下文中讨论较少的变量。您的扩展风格几乎肯定应该使用变量,以及它’s likely they’ll是独一无二的var’t exist in the native theme. In our use cases thus far, new variables can be defined in _theme.less with impunity, because those use cases were contained within the confines of a single theme, and Less’S懒人评估意味着变量可以如我们所愿的那样定义。然而,在延期的情况下,我们’ve arrived at a scenario where our Less should be complete without reference to a particular theme. Your new variables should be defined with default values in _module.less itself, typically at the very top. This is a gimme if you’重新开发分配器扩展,但它’在为特定站点编写自定义功能时,S易于想出。如果您错误地想念它,如果您在不指定主题的情况下编译静态内容,则期望在处理Magento /空白等核心主题时会看到关于不存在变量的较少编译错误。

我想覆盖mixin

让’s say you’d想给magento带来一些调整 ’s native styles, but the styles in question are embedded within the body of a mixin. For example, you might want a border radius on every element where the .lib-button mixin is used. You could track down every selector where it’s used and implement your style on those selectors, but it would be better if you could inject it into 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 in _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 only one. You might try implementing your mixin override in a path like web/css/source/custom/lib/_buttons.less.

通过这种策略,我们’ve reached a scenario where we actually have a new Less partial that Magento will not import by default. This is where the manifest files we reviewed above come into play. Since web/css/_styles.less and its subordinates are merely lists of imports, it’s not very intrusive 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 imports to add. Or if you want to be very exact about placing your file in the exact same place in the import 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定义是累积(媒体断点混合的清晰显示的东西)。但较少的魔法也有足够的魔法,以避免多次输出相同的样式声明,因此结果仍然是相同的。如果你找到你’虽然,重新推荐原始Mixin定义,但是,您’重新开始创造一个新的mixin。

我想定义自己的mixin

说到创造自己的mixin,即’我们的最后用例。让’s say you create a flexbox-based implementation of a tabbed interface, which is a great case for encapsulation within a mixin. The best location for this is in lib, like the native mixins: web/css/source/lib/_flextabs.less. And you’LL希望确保与本机Mixins一样,您的参数支持默认值通过命名变量:

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

推测你’re defining your custom mixin within a theme, you could just put your initial declaration of all such default variables directly in _theme.less and call it done. It’s probably better form, though, and will make your Less structure more intuitive 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 Less partials get imported, which follows the same procedure described above: Copy 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 in precisely the same spot that other mixins are imported.

在你的情况下’RE将新的Mixin定义为自定义扩展的一部分,该过程将相同。你’LL仍然为Mixin定义和其变量默认值定义部分,但是您’LL将其中的导入语句放入扩展名中’s _module.less.

结论

我希望在我们的用例中我们’在您的日常洋养坞发展中击中了一些实际情况。如果你’努力努力写下正确的代码,写作和正确的地方,你现在应该有更好的信心’在引擎盖下偷看了。花点时间审视玛托多法如何理解和处理你的主题代码,这是值得的,可以获得一个主题’从长远来看,更具可理解,更可观,更可观,更可维护。

6 Comments

  1. 感谢您的共享ðÿ™,

  2. 塞巴斯蒂安 说:

    伟大的帖子!!

  3. Chandresh. 说:

    如何在自定义扩展中添加_module.less.我在Frontend / Web / CSS / Source和此内容部署后创建了_Module.Less文件。但风格没有申请。

    • 克里斯纳尼亚 说:

      是你列入的路径“view”扩展根中的目录?如果是这样,那’正确的道路,你应该’需要做任何额外的事情来编译。一世’d尝试确保清除每个可能的临时/缓存位置,包括在部署之前清除var / diew_prepossed和显式清除Pub /静态/前端。

  4. 约书亚 说:

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

  5. Rone Clay Brasil. 说:

    谢谢你的帖子!

发表评论

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

本网站使用AkisMet减少垃圾邮件。 了解如何处理评论数据.

最近的帖子查看全部
3月1日,2021年

Covid的巨大加速要求再次欺诈和消费者虐待警惕

2月3日,2021年

社交媒体在科迪德自然时期的增长’s One

1月5日,2021年

替代社交媒体

你注意到你的Facebook和Instagram内容似乎越来越少,每次过去的一天都会越来越关注?曾经达到的帖子 […]