README

什么是LSCSS？

LSCSS是一个SASS/SCSS框架，其目标是标准化LS项目中通常使用的通用工作流程。因此，LSCSS负责处理Bootstrap和Font Awesome集成，并作为所有样式用途的中心环节，其他LS组件（例如Merconis、LSJS等）可以依赖。

入门

安装LSCSS后，LSCSS框架位于assets/lscss。

请注意：此目录中的文件不得修改。

相反，您应创建自己的自定义SCSS文件，包含LSCSS框架，并将所有工作都放在这里。

自定义SCSS文件应创建在files/lscss中，为了使文件目的明显，应将其命名为lscss-project.scss

在Contao中，必须安装扩展“leadingsystems/contao-lscss4c”，才能轻松加载LSCSS样式表。安装此扩展后，您将在布局设置中找到一些新的字段，标题为“LSCSS”。要加载LSCSS样式表，请将其选择为“要加载的SCSS文件”。

lscss-project.scss文件应只包含几个导入

@import "_variables.scss";

@import "../../assets/lscss/lscss.scss";

@import "_fonts.scss";

@import "_custom.scss";

文件lscss.scss包含LSCSS框架本身。其他导入是特定于项目的文件，技术上不是必需的，但当然使用它们是有意义的。因此，在lscss-project.scss所在的同一目录中创建“_variables.scss”、“_fonts.scss”和“_custom.scss”文件。

_variables.scss是文件，其中您可以覆盖LSCSS框架中定义的变量（如果需要）。当然，您也可以定义新变量。

重要：为了覆盖默认的LSCSS或Bootstrap变量，在导入lscss之前导入自定义变量文件是强制性的！

_fonts.scss包含加载字体的@font-face规则

_custom.scss包含所有特定于项目的样式，可能分为多个导入。

同时使用LSCSS和LSJS

如果您使用LSJS框架，您必须像这样包含LSJS样式表

[...]
@import "../../assets/lsjs/core/styles_core.scss";
[...]

同时使用LSCSS和Merconis

如果您使用Merconis，您必须像这样包含Merconis样式表

[...]
@import "../../vendor/leadingsystems/contao-merconis/src/Resources/contao/lscss/_merconis.scss";
[...]

如何使用Font Awesome图标

LSCSS已经包含Font Awesome，并准备好使用。

可以通过放置具有特定类的<i></i>元素来使用Font Awesome，如下所示

<i class="fas fa-caret-up"></i>

还可以使用mixins和图标变量，如下所示

.some-element::before {
    @extend .fas;
    content: fa-content($fa-var-window-close);
}

如何使用LSCSS图标

LSCSS还包含其自己的图标集，并且可以非常容易地使用IcoMoon添加自己的图标。

使用内置的LSCSS图标基本上与使用Font Awesome类似，但具有不同的类名和mixin/变量名

<i class="lsi lsi-payment-01"></i>

任何HTML元素都可以通过添加类“lsi”并指定要使用的确切图标（使用其中一个命名图标类（lsi-*））来成为图标

LSCSS图标也可以在SCSS文件中使用。以下示例显示了如何使用SCSS中的lsi mixins和变量将图标样式应用于HTML元素。

<h2>Lorem Ipsum</h2>

h2::before {
    @extend .lsi;
    content: $lsi-telescope-01;
}

更新LSCSS核心中的图标集

当然，更新LSCSS核心中的图标集并不是常规用户会做的事情，但此文档应该涵盖这一点。

我们使用icomoon.io创建了图标集，这是一个非常出色的工具。当使用自己的矢量图时，IcoMoon应用程序可以在没有任何许可要求的情况下使用。然而，使用IcoMoon库提供的图标包需要满足特定的许可要求。

向图标集中添加新图标

为了向图标集中添加新图标，首先要将现有的图标集导入到IcoMoon应用程序中。该应用程序具有导入选项，允许导入selection.json文件。此文件在之前的导出过程中自动创建，因此应包含在LSCSS中现有的lscss-icons文件夹中。通过将此文件导入应用程序，所有元数据都将自动导入，这非常重要，因为只有使用与之前完全相同的元数据，我们才能确保在LSCSS中使用的所有变量名和类名等仍然可以与更新的图标集一起使用。警告：IcoMoon允许导入svg文件，并且svg文件中也存在一些元数据，但重要的元数据缺失，因此不能使用svg文件来导入当前的图标集。

当在IcoMoon应用程序中将新图标添加到图标集中后，必须使用“生成字体”选项导出图标集。在下载生成的字体之前，有一个设置对话框，它应该已经具有所有正确的设置，因为这些设置也已经与settings.json文件一起导入。

为了完整性，以下是一些重要的导出设置

• 字体名称：lscss-icons
• 类前缀：lsi-
• 在字体中包含元数据：勾选
• 为Sass生成预处理器变量
• CSS选择器 - 使用类：.lsi
• 版本应相应增加

导出的文件将是一个名为lscss-icons-v1.0的zip文件。解压缩zip文件，并将提取的文件夹重命名为“lscss-icons”（移除版本信息）。

然后将包含所有内容的“lscss-icons”文件夹复制到LSCSS中先前版本此文件夹所在的位置。

在不需要更新LSCSS核心的情况下在项目级别使用自己的图标

普通用户在需要新图标或修改图标时不会更新LSCSS核心中的图标集，而是将图标集的副本添加到他们项目级别的lscss文件夹中。

1. 打开IcoMoon应用程序，并从目录../lscss-icons-custom导入selection.json，或创建一个新的图标集/选择
2. 使用“生成字体”选项导出图标集
3. 确保使用以下导出设置
   • 字体名称：lscss-icons-custom
   • 类前缀：lsi-custom-
   • 在字体中包含元数据：勾选
   • 为Sass生成预处理器变量
   • CSS选择器 - 使用类：.lsi-custom
4. 下载并解压缩图标集，并将其复制到您的项目级别lscss文件夹中（例如files/merconisfiles/themes/theme10/lscss/lscss-icons-custom）

如果现有的图标集lscss-icons-custom只被更新或扩展，那么这就结束了，以下点不需要考虑。
然而，如果图标集是新增的，那么请注意以下点。

1. 在lscss-project.scss中导入图标集样式表，使用@import "lscss-icons-custom/style.scss";直接位于LSCSS核心导入语句下方
2. 打开文件_variables.scss，并添加以下行，如果它不存在的话
   • $icomoon-font-path: "/files/your-path-to/your-custom-icons-folder/fonts" !default;
     这覆盖了文件your-custom-icons-folder/variables.scss中字体默认路径
     （如果使用Merconis主题，路径看起来像这样：$icomoon-font-path: "/files/merconisfiles/themes/theme10/lscss/lscss-icons-custom/fonts" !default;）

现在您可以使用您项目特定的自定义图标如下

<i class="lsi-custom lsi-custom-happy"></i>

h2::before {
    @extend .lsi-custom;
    content: $lsi-custom-happy;
}