了解什么是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中应用它。如果您有任何疑问或意见，请随时将其留在下面。
