Magento 2中的CSS是什么?

了解什么是CSS和LESS以及如何使用它们来改善您的在线商店。
我们将说明如何在管理面板中编辑CSS,以及您在Magento 1和Magento 2中可以在CSS中观察到哪些区别

Magento 2中的CSS是什么?

CSS的主要优点是,它可以创建网站的多个页面甚至所有页面的统一外观。开发人员无需在每个CSS元素中手动定义样式,而是在一个CSS文档中指定所有视觉配置。这样可以节省大量时间和精力。而且,样式中的任何更改都会自动应用于使用该样式的所有页面。此外,CSS与多种设备和浏览器兼容,这意味着不需要复杂的优化。

由于所有这些好处,CSS已成为Magento前端开发的重要方面。如果您努力成为一名出色的Magento开发人员,则必须具备CSS知识和技能。

Magento 2中的LESS是什么?

Magento电子商务平台本身就包含一个名为LESS的预处理器。LESS简化了使用CSS的过程并扩展了其功能。它提供对各种变量,函数,嵌套规则,操作和混合的访问,从而使样式编写的过程更上一层楼。而且,LESS可以立即更改输入文件。此外,LESS支持延迟加载或动态函数加载,这使开发人员可以随时随地定义和使用变量。

LESS是Magento功能的相对较新的介绍–它于2015年引入Magento 2版本。在此之前,Magento 1默认使用其他CSS预处理器– SaSS。如果需要,您仍然可以将其用作预处理器。从语法到功能,这两种解决方案都有许多相似之处。那么,为什么不使用SaSS?LESS更可靠。Magento开发人员希望使用具有稳定PHP实现的技术,而LESS拥有它。LESS仍然是本地Magento处理器,证明它可以有效地完成其工作。

LESS和CSS有什么区别?

档案结构

LESS文件具有.less扩展名。浏览器无法识别带有.less扩展名的文件,并且无法将其样式应用于网站页面。因此,必须将所有.less文件预编译为熟悉的.css文件。为此,我们使用所谓的编译器。例如,Magento为此目的提供了内置的编译器,使您可以在服务器端和客户端将LESS文件编译为CSS文件(有关更多信息,请参见此处)。Magento还允许使用Grunt将LESS编译为CSS。怎么做,你可以在这里找到。

语法

LESS是CSS插件。因此,.css文件中的所有规则和语法都在.less文件中工作。换句话说,如果我们在.less文件中编写CSS代码,那么在将LESS编译为CSS之后,它将可以正常工作。同时,LESS具有CSS缺少的其他功能,例如变量,逻辑,计算操作,可重用的代码段等。这些附加功能具有自己的语法,与CSS语法不同。

CSS中有一个代码示例:


.example-1 a {
	color: green;
}
.example-1 p {
	background: grey;
}
.example-1 .error span {
	color: red;
	border: 1px solid red;
}

您可以在LESS文件中更紧凑地编写它(称为嵌套代码格式):

.example-1 {
        a {
               color: green;
           }
           p {
               background: grey;
           }
           .error {
                   span {
                          color: red;
                          border: 1px solid red;
                  }
          }
}

将.less文件编译成.css文件后,该代码将类似于CSS代码。

这是另一个例子。LESS有一件有趣的事情– &(Ampersand)。它用于引用当前选择器。这对于设置各种元素状态,其伪元素,行中的下一个元素等的样式很有用。让我们在示例中查看它:

.example-1 {
       color: red;
 
       &:hover{
              color: green;
       }
       &:before {
                content: "!!!";
                display: inline-block;
       }
       & + * {
                background: grey;
       }
       &.disabled {
                opacity: 0.5;
       }
       &_modify {
                font-size: 2rem;
       }
}

结果,将.less文件编译成.css文件后,我们得到以下信息:

.example-1 {
          color: red;
}
.example-1:hover {
          color: green;
}
.example-1:before {
          content: "!!!";
          display: inline-block;
}
.example-1 + * {
          background: grey;
}
.example-1.disabled {
          opacity: 0.5;
}
.example-1_modify {
          font-size: 2rem;
}

我们仅提供了一些有关LESS中新语法的示例。您可以在此处找到有关语法的更多信息。

LESS provides an opportunity to use variables, functions and mixins

让我们详细考虑以下其他LESS功能,例如变量,mixin和函数。

Variables

LESS中的变量具有与编程中相似的功能。它们用于保留某些价值,并在以后将其应用于其他地方。

变量名称以@图标开头,例如:

@ example-variable

如何使用变量,例如:

@color-example: #222222;
a {
       color:@color-example;
}

在上面的示例中,我们将#222222值设置为变量@ color-example。将.less文件编译成.css文件后,将存在以下规则:


a {
      color:#222222;
}

您需要了解的下一件事是变量作用域

在上面的示例中,您看到了全局声明的变量–它们在.less文件中的任何位置都可用。但是,如果在CSS规则内声明变量,则该变量仅在此CSS规则内可见。当您尝试在此规则之外访问此变量时,会出现编译错误。

例如:


.example-1 {
  @color-example: yellow;
  color:@color-example;
}
.example-2 {
  color:@color-example;
}

结果,该文件未编译。

您可以在CSS规则内更改全局变量值。这不会影响此规则之外的变量值。

您还可以为变量分配另一个变量的值,如下所示:


@color-example-1: yellow;
@color-example-2: @color-example-1;

当您更改变量@ color-example-1的值时,变量@ color-example-2的值会自动更改。

您可以在此处找到有关变量的更多信息。

Mixins

需要使用Mixin来重用代码段。

例如,页面上的许多元素将具有相似的动画。因此,您可以创建具有一组动画属性的.animation-1 mixin:

.animation-1() {
       transition: 300ms ease-in-out;
       -moz-transition: 300ms ease-in-out;
       -webkit-transition: 300ms ease-in-out;
       -o-transition: 300ms ease-in-out;
}

然后,您可以在需要的任何地方使用mixin:

.example-1 {
       .animation-1;
       width: 100%;
}

结果,在将.less文件编译成.css文件之后,.example-1元素具有以下内容:


.animation-1 {
          transition: 300ms ease-in-out;
          -moz-transition: 300ms ease-in-out;
          -webkit-transition: 300ms ease-in-out;
          -o-transition: 300ms ease-in-out;
}
.example-1 {
          transition: 300ms ease-in-out;
          -moz-transition: 300ms ease-in-out;
          -webkit-transition: 300ms ease-in-out;
          -o-transition: 300ms ease-in-out;
          width: 100%;
}
.animation-1 {
          transition: 300ms ease-in-out;
          -moz-transition: 300ms ease-in-out;
          -webkit-transition: 300ms ease-in-out;
          -o-transition: 300ms ease-in-out;
}
.example-1 {
          transition: 300ms ease-in-out;
          -moz-transition: 300ms ease-in-out;
          -webkit-transition: 300ms ease-in-out;
          -o-transition: 300ms ease-in-out;
          width: 100%;
}

也有带有参数的mixin。当调用这些mixin时,我们将参数值传递给它们。创建此类混合时,建议设置默认参数值(否则,在不指定参数值的情况下调用混合时可能会出现问题)。让我们使用上面示例中的参数进行混合,看看如何调用它:


.animation-1 (
        @animation-speed: 300ms,
        @animation-type: ease-in-out
) {
        transition: @animation-speed @animation-type;
        -moz-transition: @animation-speed @animation-type;
        -webkit-transition: @animation-speed @animation-type;
        -o-transition: @animation-speed @animation-type;
}
.example-1 {
      .animation-1(
            @animation-speed: 1500ms
       );
}

我们在带有默认值的括号(可以有一个或多个)中设置混合参数(默认值在冒号之后设置)。

当在括号中调用mixin时,我们将指示与默认参数不同的那些mixin参数的值。如果我们不指定单个参数来添加混合-–animation-1,则将向混合添加标准参数值。

结果,在将.less文件编译成.css文件之后,.example-1元素如下所示:

.example-1 {
        transition: 1500ms ease-in-out;
        -moz-transition: 1500ms ease-in-out;
        -webkit-transition: 1500ms ease-in-out;
        -o-transition: 1500ms ease-in-out;
}

Magento要求使用@_而不是@来命名mixin参数。因此,上例中的@ animation-speed参数将被命名为@ _animation-speed

有关mixin的更多信息,请参见此处

Functions

LESS具有带有属性的算术运算(加法,减法等)。

例如:

.example-1 {
       @unit: 3px;
       border:@unit solid #ddd;
       padding: @unit * 3;
       margin: 20px + 30px;
}

结果,将.less文件编译成.css文件后,我们得到以下信息:

.example-1 {
        border: 3px solid #dddddd;
        padding: 9px;
        margin: 50px;
}

LESS还具有其他数学函数,例如round(),ceil(),floor()和percent()。

LESS使操作颜色更容易

LESS还提供了进行各种颜色操作的机会。

例如,我们可以组合或减去2种颜色以获得新的一种。

.example-1 {
	color: #222 + #333;
}

编译后的结果:

.example-1 {
	color: #555;
}

还有颜色功能可以使颜色更浅,更暗,更亮,更暗。因此,我们需要以下函数:lighten(),darken(),desaturate()等。

如果要使颜色变深(例如,变深20%),请执行以下操作:

.example-1 {
	color: darken(#ccc, 20%);
}

您可以在这里找到有关颜色操作的更多信息。

Magento 2中的CSS文件在哪里?

编译之后,所有生成的CSS文件将位于以下路径:

pub/static/frontend/<Vendor_Name>/<Theme_name>/<locale>

where

  • <Vendor_Name> –包含您的主题的供应商文件夹的名称,
  • <Theme_name> –您的主题名称,
  • <locale> –当前站点位置的名称(例如,en_US)。

这些文件是基于Magento中各个位置的LESS和CSS原始文件形成的。为了完全理解该系统,让我们看一下核心的Magento样式文件:

样式文件具有以下结构:

  • /<Namespace>_<Module>/web/css 是不同模块的样式文件的位置;
  • / web / css  是核心样式文件的位置。

核心主题文件的列表,位于/ web / css主题文件夹中:

  • styles-m.less  包含核心网站和移动设备样式。该文件包含其他文件,例如_styles.less。
  • styles-l.less   包含桌面设备的样式。它还包含其他文件,例如_styles.less。
  • _styles.less  是包含其他样式文件的复合文件。根据Magento文件命名标准,下划线符号(“ _”)表示该文件未单独使用,而是其他文件的一部分。
  • / source  是包含调用Magento UI库mixins的配置文件的文件夹。
  • /source/_theme.less  是包含标准变量的新值的文件。
  • print.less –打印的网站版本的样式。
  • /source/_variables.less  是通常放置用户变量的文件。

除了核心样式文件,您还可以将其他文件连接到主题。通常,它们将位于/ web / css路径中的主题文件夹中。

如果要更改样式文件,建议在源文件中进行更改。我们也强烈建议您不要更改生成的文件。如果进一步编译,这些更改将被覆盖。

什么是Magento父主题和子主题CSS?

通常,自定义主题将从另一个主题继承。在这种情况下,自定义主题是一个子主题,而该主题是从父主题继承而来的。

默认情况下,子主题的样式与父主题的样式相同。如果某个网站元素具有来自父主题的CSS规则值,则它将不同于子主题(例如,文本颜色),并且子主题具有优先级。另外,如果子主题包含与父主题名称和路径相同的CSS文件,则在最终CSS编译期间,子主题文件将完全覆盖相应的父主题文件。

如何在Magento 2中添加自定义CSS文件

Magento 2在哪里更改样式?您可以在添加的LESS或CSS文件中或在Magento模块文件中更改它们。如果要为特定模块添加自己的样式,则可以在主题的模块文件夹中使用2个文件:

 _module.less包含其所在模块的基本样式。通常,当我们要显着更改此模块的样式时,将在主题中创建此文件。

_extend.less包含其所在模块的其他样式。通常,我们创建此文件是为了对模块或样式进行小的更改,以用于以前在当前模块中尚未样式化的新元素。如果我们不想重写现有的模块样式,则创建此类文件将是最好的方法。

如何在Magento 2中添加自定义LESS文件

除了本机文件,您还可以使用自定义样式文件,例如,第三方库文件,自定义样式文件等。

通常,将这些文件连接到以下文件中:

<your_theme_dir>/Magento_Theme/layout/default_head_blocks.xml

对于连接,将<css />或<link />添加到default_head_blocks.xml文件的<head />标记中。第一个标记专门用于样式文件,而第二个标记可以连接样式文件和JavaScript。由于这些标签的语法相似,因此我们以<css />标签为例:

<css src=”<path>/<file>” media=”print|<option>”/>

Where

  • <path>是相对于<your_theme_dir> / web的文件的路径。如果要向位于主题的模块文件夹中的文件添加链接,请使用<Namespace> _ <Module> :: <path_to_file>(例如,如果添加Magento_Theme ::,则路径将相对于<your_theme_dir开始> Magento_Theme / web /)。
  • <file>是.css格式的已连接文件的名称。
  • media是用于确定文件附件的其他参数的属性。例如,具有media =“ print”参数的文件将用于网页的打印版本,而具有media =“ screen和(min-width:768px)”文件的文件仅适用于具有屏幕尺寸的设备786像素及更多。
  • src_type =“ url”是一个附加属性,它表示文件是从另一台服务器连接的,并且“ src”路径将是绝对指定的,而不是相对于主题。因此,使用此属性可以连接其他网站的样式。
<head>
<link src="Magento_Catalog::css/source/lib/test.less" />
</head>

结果,将添加以下文件:

<your_theme_dir> Magento_Catalog / web / css / source / lib / test.css

如何在Magento 2的管理面板中编辑CSS

让我们考虑如何在Magento 2中将CSS添加到CMS页面和CMS块。CMS页面具有一个选项,可以在“ 设计”选项卡的“ 布局更新XML”字段中包括样式文件。您可以在上面找到如何在XML文件中添加样式文件。

Magento 1与Magento 2中的CSS比较

通常,与Magento 1相比,Magento 2在处理CSS文件方面有改进的过程。除此之外,Magento 2不仅具有标准CSS文件,还具有以下各项:

  • 内置的LESS编译器允许您通过将LESS文件编译为最终的CSS文件来使用它们。使用LESS大大简化并加快了网站样式的创建过程,因为我们获得了其他的LESS功能(简而言之,这些是变量,mixin,嵌套代码格式等)。
  • UI库使用LESS预处理器,并由LESS文件组成,该文件使用Mixins和变量集来设置所有主要站点元素(如按钮,表单,导航等)的样式。您可以在此处找到可用于样式设置的元素的完整列表。UI库使您可以大大简化网站样式的过程。例如,您可以更改几个UI库变量,并获得一个经过重大转换的网站。

另一个区别是CSS主题文件的位置。在Magento 1中,它们位于以下路径:
/ skin / frontend / <Vendor_Name> / <Theme_name> / css。

虽然Magento 2中的主题样式文件更加结构化并分为常见样式文件(<Theme_folder> / web / css)和模块样式文件(<Theme_folder> / <Namespace> _ <Module> / web / css),它们应用。

最后

我们希望您在Magento 2中获得CSS的全面指南,并了解如何在您的网站中使用它。此外,我们试图分享我们所有的LESS知识,并说明如何在Magento中应用它。如果您有任何疑问或意见,请随时将其留在下面。

版权属于: sbboke版权所有。

转载时必须以链接形式注明作者和原始出处及本声明。

张贴在magento2教程标签:

相关文章

0 0 投票数
文章评分
订阅评论
提醒
0 评论
内联反馈
查看所有评论