知识大全 LESS 助您事半功倍

Posted 2022-07-21 文件

篇首语：古之立大事者，不惟有超世之才，亦必有坚忍不拔之志。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 LESS 助您事半功倍相关的知识，希望对你有一定的参考价值。

CSS 编程：LESS 助您事半功倍 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

　　在本文中我将介绍使用 LESS Framework 动态生成 CSS 内容的 Web 开发

　　毫无疑问 CSS 代表一大飞跃它有望将内容与网页显示完全分离而且在很大程度上实现了这一点尽管 CSS 属于（或应该属于?）设计人员关注的范畴它率先提出了关注点分离原则几乎每个开发人员都对此非常敏感因此 CSS 很快获得采用它在 Web 开发过程中如此根深蒂固以致于有时难于满足最新网站的需求

　　问题并不是 CSS 不足以满足样式最新图形丰富并且外观吸引人的网站需求而是纯粹的声明语言并非始终适合表现复杂的互联样式声明好在只要编写正确 CSS 对于浏览器仍然合理但对人来说也是如此吗？

　　Web 开发中一个相对较新的方向是围绕 CSS 构建基础结构使开发人员和设计人员能够以可持续性更高的方式生成相同的 CSS 最终的浏览器样式表并无变化但其生成方式应有所不同更易读也更容易管理

　　这一 Web 开发领域出现于几年前现在日渐成熟有几个可用的框架可以帮助您进行动态 CSS 内容生成我将提供其中一个框架也就是 LESS Framework 的执行概要并演示它如何与 ASP NET MVC 解决方案集成

为何采用 LESS？

　　开发人员借助 LESS 解决的最大问题之一是信息的重复作为软件开发人员您可能了解切勿重复 (DRY) 原则并且每天都在应用 DRY 的主要优点在于它减少了相同信息的存储位置因而减少了应更新该信息的位置的数量

　　对于普通 CSS 您根本不会遇到 DRY 问题例如在某些其他情况下如果多个类中使用某种颜色而您需要对其进行更改可能除了逐一更新之外没有更好的办法了使用 CSS 类可以定义特定元素的外观并针对样式相关的元素以相同的方式跨页面重复使用尽管 CSS 类确实可以减少重复但有时在其他方面显得不足

　　CSS 类的一个问题是它们在语义 HTML 元素的级别运行在构建各种 CSS 类时经常需要重复颜色或宽度等细节信息对这些可重复细节中的每一个使用同一个类并不方便即使设法用一个 CSS 类表示几乎所有可重复样式如颜色和宽度当开始对语义元素（如容器）应用样式时还是应该连用多个 CSS 类以便实现所需的效果

　　如果您曾用 Bootstrap 等框架设计过网页就会明白我的意思例如

　　首先将锚点设置为一个按钮（类 btn）然后设置为特定风格的按钮（类 btn primary）这种方法有效但可能需要进行大量工作提前计划所需的类这会增加 Web 项目的工作量而项目往往时间紧迫

　　LESS 这样的动态样式表语言表示一种横向思维您不必花时间尝试使普通 CSS 变得更加智能只需使用不同的工具（一般是语言）进行生成即可因此 LESS 是一种框架它向 CSS 编码添加了编程人员友好的概念如变量块和函数

　　与动态 CSS 生成严格相关的是将其处理为普通 CSS 供浏览器使用的问题客户端可以通过临时 JavaScript 代码处理 LESS 代码也可以在服务器上对其进行预处理使浏览器只接收最终的 CSS

在 ASP NET MVC 中设置 LESS

　　我将演示从 ASP NET MVC 应用程序中使用 LESS 所需的操作首先我将重点介绍 LESS 代码的客户端处理在布局文件的 HEAD 部分添加以下内容

　　这里假设您已在项目中创建了 Content/Less 文件夹以包含所有 LESS 文件您需要一个 JavaScript 文件以便在浏览器中进行实际的 LESS 到 CSS 处理您可以从获取该脚本文件我将回顾一些可证明 LESS 有用的场景

运行中的 LESS 变量

　　观察 CSS 渐变是了解 LESS 变量作用的好方法多年以来设计人员使用小的 GIF 文件绘制 HTML 容器的渐变背景最近浏览器增加了 CSS 渐变支持这也是官方 CSS 标准的一部分通过线性渐变语法及其变体实现很遗憾如果要确保尽量多的浏览器采用这种渐变必须借助一些东西如图中的代码

　　图中的代码几乎不可读更糟的是在需要渐变的任何地方都必须重复使用这些代码此外如果要稍微更改一下渐变颜色（或只更改饱和度或淡化效果）唯一的办法是在所有位置进行手动编辑直截了当地说这非常困难但是这是对于普通 CSS 唯一可行的方法

　　图在多种浏览器中显示渐变的综合代码

　　/* Old browsers fallback */ background color: #ff ; background: url(images/red_gradient png); background repeat: repeat x; /* Browser specific syntax */ background: moz linear gradient( left #fceabb % #fccd d % #f b % #fbdf %); background: Webkit linear gradient( left #fceabb % #fccd d % #f b % #fbdf %); background: o linear gradient( left #fceabb % #fccd d % #f b % #fbdf %); background: ms linear gradient( left #fceabb % #fccd d % #f b % #fbdf %); /* Standard syntax */ background: linear gradient( to right #fceabb % #fccd d % #f b % #fbdf %);

　　为找到更好的解决方案您需要跳出 CSS 试试 LESS 在 LESS 中您只需定义一次渐变 CSS 然后在适当的位置按名称引用即可例如

　　 background gradient orange background: #fceabb; &ntainer background gradient orange;

　　名为 background gradient orange 的类按名称在适当的位置嵌入到类容器和任意其他类中而渐变定义保存在一个位置

　　从开发人员的角度来看这并不是什么革命性的改变不过它使用了变量功能这是 CSS 中没有的事实上如果将文件保存为普通样式表并引用的话前面的语法并不可行需要一些代码将扩展语法转换为普通 CSS 这正是 LESS JavaScript 分析器的功能它将变量扩展为其实际 CSS 内容

　　变量还适用于颜色或大小等标量值请考虑以下 LESS 代码

　　@black: # ; #main color: @black; header background color: @black;

　　分析器将 @black 变量扩展为分配的值并进行全文件替换最终效果是在一处更改实际颜色整个文件中的相应内容会自动更改运行中的 LESS Imports

　　如果需要您可以将 LESS 代码拆分到多个文件引用文件和包含的类中例如假设您创建一个 gradients less 文件内容如下

　　 background gradient orange background: #fceabb;

　　在另一个 LESS 文件中如 main less 您可以通过导入该文件引用任何渐变

　　@import "gradients"; &ntainer background gradient orange;

　　如果 gradients less（扩展名不是严格必需的）位于其他文件夹中则应在调用中指示路径信息以便导入 LESS Mixin

　　我调用该 LESS 项目进行变量渐变严格来说这并不完全正确在 LESS 中一个变量包含一个单一值一个 CSS 类容器被称为一个 mixin 这类似于函数但不包含任何自定义逻辑就像函数一样 LESS 可以接受和处理参数请看看图中演示 mixin 的代码

　　在图中一个名为 shadow 的 mixin 定义了框阴影样式并将颜色作为外部参数公开与之类似 text box mixin 定义输入字段的基本外观它导入阴影定义并保持宽度为参数化形式通过这种方式为不同大小（mini normal 和 large）的输入字段定义三个类就非常简单了更重要的是它只需进行少量编辑工作更新也非常简单（请参阅图）

　　图 LESS Framework 中的 Mixin

　　/* Mixins */ shadow(@color) box shadow: px px px @color; text box(@width) shadow(# ); border: solid px # ; background color: #dddd ; padding: px; width: @width; /* CSS classes */ text box mini text box( px); text box normal text box( px); text box large text box( px);

　　图运行中的 LESS Mixin

　　Mixin 可以接受多个参数或可变数量的参数此外每个参数都支持默认值

　　 mixin(@color: #ff )

　　LESS 并不是富编程语言表示它的设计缺少命令来指示条件或循环但 mixin 的行为仍然可以根据所传递的值发生变化假设您要对一个较大的按钮使用较粗的边框和字体您定义一个名为 button 的参数化 mixin 使用关键字 when 将设置与条件绑定条件必须基于一个参数

　　 button (@size) when (@size < px) padding: px; font size: em; width: @size * ; button (@size) when (@size >= px) padding: px; font size: em; font weight: ; background color: red; width: @size * ;

　　您应用不同的设置但也可以使用基本操作通过一个系数将大小扩大为数倍然后在实际 CSS 类中使用 mixin

　　 push button large button( px); push button small button( px);

　　运行此代码的结果如图所示

　　图在 CSS 类中使用 LESS Mixin 的效果

　　LESS 附带很多可操作颜色的预定义函数您可以使用函数按百分比调整颜色亮度和饱和度也可以按百分比设置颜色淡入和淡出如下所示

　　 push button background color: fade(red %);

　　有关 LESS 支持的函数的完整文档请参阅嵌套类

　　我个人觉得需要重复 CSS 块指示同级样式非常讨厌下面是一个典型示例

　　#container h #container p #container p a #container img

　　在编写得很好的普通 CSS 中实际上可以避免很多重复但使用平面列表布局样式的方式并不是最好的在这种情况下最好使用一些层次结构在 LESS 中可以像这样嵌套样式规则

　　&ntainer h font size: em; color: fade(# %); a color: # ; &:hover color: red;

　　经过处理后前面的 LESS 代码会产生下面的样式

　　&ntainer h &ntainer h a &ntainer h a:hover

　　服务器端处理

　　您可以原样下载 LESS 代码在客户端通过 JavaScript 代码对其进行处理也可以在服务器上进行预处理然后将它作为普通 CSS 下载到客户端在前一种情况下完全像使用普通 CSS 文件一样服务器端更改在下一次页面刷新时应用到客户端

　　如果您注重性能处理的是大型复杂 CSS 文件则服务器端预处理可能是更好的选择服务器端预处理发生在您每次修改服务器上的 CSS 时您可以在生成过程结束时手动完成额外的步骤使用 LESS 编译器从命令行将 LESS 代码预处理为 CSS 此编译器是为服务器端工作安装的 less NuGet 软件包的一部分

　　不过在 ASP NET MVC 中可以将 LESS Framework 与捆绑机制集成有关捆绑机制请参阅我在年月的专栏 CSS 编程捆绑和缩小 (msd/magazine/dn ) 这确保只要请求 LESS 文件就会执行 LESS 到 CSS 的转换还确保通过 If Modified Since 标头正确管理缓存最后您可以将分析和缩小混合起来要在 ASP NET MVC 中集成 LESS 首先需要下载并安装 less NuGet 软件包然后将以下代码添加到 BundleConfig 类

　　var lessBundle = new Bundle("~/myless") IncludeDirectory("~/content/less" "* less"); lessBundle Transforms Add(new LessTransform()); lessBundle Transforms Add(new CssMinify()); bundles Add(lessBundle);

　　捆绑将打包在指定文件夹中找到的所有 less 文件 LessTransform 类负责 LESS 到 CSS 的转换该类使用 less API 分析 LESS 脚本 LessTransform 的代码非常简单

　　public class LessTransform : IBundleTransform public void Process(BundleContext context BundleResponse response) response Content = dotless Core Less Parse(response Content); response ContentType = "text/css";

　　更多智能工具

cha138/Article/program/Web/201404/30643