在GitHub上编辑此页面

LESS入门

什么是LESS？

Less是一个CSS预处理器，这意味着它扩展了CSS语言，添加了允许变量、混合、函数和许多其他技术的功能，使CSS更易于维护、主题化和扩展。

-网址：www.lesscss.org-

在Shopware 5中，我们包含了一个用于LESS的PHP解析器。它使设计者能够在Shopware主题中使用它作为CSS预处理器，这带来了一些有趣的特性，如变量或混合。我们不想在本文中解释LESS的每个细节，而是向您展示如何在Shopware主题中使用它。官方文档为您提供了有关LESS功能的所有信息。

为什么更少？

我们经常被问及为什么我们决定使用LESS而不是SASS或其他东西。在不展开关于CSS预处理器的讨论的情况下，我们想为您提供一些理由，说明为什么我们决定在Shopware中使用LESS。

  • LESS非常轻量级，对于从未使用过CSS预处理器的第三方开发人员来说很容易学习
  • LESS有一个稳定的PHP解析器
  • 不依赖于其他语言，如Ruby等。

SASS-lovers，没有理由难过。请记住，LESS只是我们的建议，编译器是我们想为第三方开发人员提供的工具。您可以随时使用您选择的预处理器。可以使用其他工具编译文件，并将编译后的CSS添加到主题中。

在主题中使用LESS

在您自己的定制Shopware主题中使用LESS非常容易。只需在公共资源中创建相应的目录：前端/public/src/less/。在更少/您必须创建一个全部缺失将自动添加到Shopware编译器中的文件。当然，您可以将所有代码放在一个文件中，但为了获得更好的结构，我们建议为主题的每个部分创建单独的文件，并使用@导入中的方法全部缺失.

Shopware中的响应

我们将LESS用于一些特殊目的，这在创建完全响应主题时非常有用。

.unitize（）混合

在完全响应的模板中，不能依赖固定的像素值。网站必须动态缩放以适应屏幕大小、像素密度和浏览器字体大小。因此，我们决定构建一个中心测量混合器，它可以将像素值转换为其他测量单位。这有利于在LESS文件中使用可读的像素值，但编译后的CSS将具有动态测量单位，并且可以在中心点更改单位类型。在Shopware Responsive主题中，我们决定转换为雷姆值，因此所有度量都可以通过基本字体大小进行缩放。

例子： 使用unitize mixin


.my--类{.unitize（字体大小，16）；//单一属性.单位宽度（200）；//宽度和高度帮助.组合衬垫（20，20）；//填充接受四值语法的帮助器.unitize-margin（10，0，0，O）；//边距接受四值语法的帮助程序// ...}

断点变量

对于响应主题，我们使用CSS媒体查询创建不同的设备断点，因此可以调整模板以适应相应的设备类型。为了更加灵活，我们创建了用于所有媒体查询的配置变量。


@电话风景视角宽度：30em；//480像素@tabletViewportWidth:48em；//768像素@tabletLandscapeViewportWidth:64em；//1024像素@桌面视点宽度：78.75em；//1260像素

例子： 在媒体查询中使用断点变量


.my--类{.单元加载（10，0）；}@媒体屏幕和（最小宽度：@tabletViewportWidth）{.my--类{.单元输送（20，0）；}}

遵循移动第一的概念，您开始为移动视口创建样式，并使用最小宽度以给定的最小屏幕大小启动新断点的媒体查询。

预定义的mixin和组件

我们已经为CSS3跨浏览器支持和其他一些有用的功能创建了几个mixin。此外，当从Shopware Responsive主题扩展时，您可以访问所有标准组件，如按钮、警报等。它们都遵循一个简单的CSS类语法，您可能从其他框架中知道。例如，创建一个基本按钮，只需添加类英国电信公司到你的元素。要使其成为突出显示的主按钮，可以通过添加其他配置类来扩展样式，如是--主要。我们在Shopware UI组件概述.

所有Shopware混音器

  • 外观.无
  • 背面可视性.less
  • 无边界半径
  • 无阴影长方体
  • 无盒尺寸
  • clearfix.less（清除修复.less）
  • 无线性粒度
  • 无图标元素
  • 不透明度低
  • 无旋转
  • 无标度
  • 无触点分配
  • 无变换样式
  • 无变压器
  • 无过渡
  • 无翻译
  • 无单位
  • 用户选择.less
  • 无变压器
  • 点击-高亮度-无色
  • 关键帧.less
  • 动画.less
  • 无列计数
  • 无连字符
  • 无光标

Shopware中的LESS变量

在这里，您可以概括了解Shopware Responsive主题中定义的所有LESS变量。

//断点@电话风景视角宽度：30em；//480像素@tabletViewportWidth:48em；//768像素@tabletLandscapeViewportWidth:64em；//1024像素@桌面视点宽度：78.75em；//1260像素//基本颜色定义@主要品牌：#d9400b；@brand-primary-light：饱和（light（@brand-pritmary，12%），5%）；@第二品牌：#5f7285；@brand-secondary-dark：变暗（@brand-ssecondary，15%）；//灰色色调@灰色：#f5f5f8；@gray-light:变亮（@gray，1%）；@灰色-暗：暗（@gray-light，10%）；@border-color:@gray-dark；//突出显示颜色@亮点成功：#2ecc71；@高光错误：#e74c3c；@highlight注意事项：#f1c40f；@highlight信息：#4aa3df；//脚手架@body-bg：变暗（灰白，5%）；@覆盖bg：#555555；@text-color:@brand-secondary；@text-color-dark:@brand-secondary-dark；@link-color:@brand-primary；@链接颜色：深色（@brand-primary，10%）；@分级标准颜色：@highlight-notice；//基本配置@字体大小：14；@字体底重：500；@font-light-weight:300；@font-bold-weight:600；@font-base-stack:“Open Sans”，“Helvetica Neue”，Helvetica，Arial，“Lucida Grande”，Sans-serif；@font-headline-stack:@font-base-stack；//标题字体大小@字体大小-h1:26；@字体大小h2:21；@字体大小h3:18；@字体大小h4:16；@font-size-h5:@font-sizebase；@字体大小h6:12；//Shopware字体目录@font-directory:“../../fonts/”；//打开Sans字体目录@OpenSansPath:“../../fonts/open-sans-fontface”；//按钮文本大小@btn-font-size:14；@btn-icon大小：10；//默认按钮@btn-default-top-bg:#FFFFFF；@btn-default-bottom-bg:@gray-light；@btn-default-hover-bg:#FFFFFF；@btn默认文本颜色：@text color；@btn默认悬停文本颜色：@brand-primary；@btn-default-border-color:@border-color；@btn-default-hover-border-color:@brand-primary；//主按钮@btn-primary-top-bg:@brand-primary-light；@btn-primary-bottom-bg:@brand-primary；@btn-primary-hover-bg:@brand-primary；@btn-primary-text-color:#FFFFFF；@btn-primary-hover-text-color:@btn-primery-text-color；//辅助按钮@btn-secondary-top-bg:@brand-secondary；@btn-secondary-bottom-bg:@brand-secondary-dark；@btn-secondary-hover-bg:@brand-secondary-dark；@btn-secondary-text-color:#FFFFFF；@btn-secondary-hover-text-color:@btn-secundary-text-color；//面板@panel-header-bg:@gray-light；@面板页眉字体大小：14；@panel-header-color:@text-color；@panel-border:@border-color；@面板bg:#FFFFFF；//标签@标签尺寸：12；@标签颜色：@text-color；//表单基础@输入规模：16；@input-bg:@gray-light；@输入颜色：@brand-secondary；@input-placeholder-color：浅色（@text-color，15%）；@输入-顺序：@border-color；//窗体状态@输入-焦点-bg:#FFFFFF；@input-focus-border:@brand-primary；@input-focus-color:@brand-secondary；@输入误差-bg：去饱和（light（@highlight error，38%），20%）；@输入错误边界：@highlight-error；@输入错误颜色：@highlight-error；@输入成功bg:#FFFFFF；@输入成功边界：@highlight success；@输入成功颜色：@brand-secondary-dark；//表格@panel-table-header-bg:@brand-secondary-dark；@面板表格标题颜色：#FFFFFF；@table-row-bg:#FFFFFF；@table-row-color:@brand-secondary；@table-row-highlight-bg：变暗（@table-row-bg，4%）；@table-header-bg:@brand-secondary；@表格标题颜色：#FFFFFF；//徽章、提示@徽章折扣-bg:@highlight-error；@徽章折扣颜色：#FFFFFF；@徽章-新人-bg:@highlight-notice；@徽章-新来者-颜色：#FFFFFF；@徽章推荐-bg:@highlight-success；@徽章推荐颜色：#FFFFFF；@徽章下载-bg:@highlight-info；@徽章下载颜色：#FFFFFF；

创建CSS源映射

为了让设计师在使用LESS时更轻松，我们增加了自动创建CSS源映射的可能性。这在调试现有样式时非常有用。

主题设置

要启用CSS源映射，请转到配置->主题管理器->设置->创建CSS源映射.

清除主题缓存后，您可以在开发人员控制台中看到到LESS文件的映射。

使用源映射调试样式

顶部