使用LESS创建更快的流体布局

这篇文章首次出现在问题225.net杂志 - 世界上最畅销的网页设计师和开发者杂志。

响应式网页设计很热门。比拍打晒伤更热。尽管在冬天,它仍然谨慎对待风,并在当地穿着上一季的Speedos。每隔一分钟就有一个关于这个主题的新博客帖子或推特辩论 - 我们应该采用它的方法并掌控目前向网络设计师开放的新选项。

每一种新的网络技术或思想流派都有一个学习曲线,但响应式网页设计基于熟悉的领域 - CSS。对我们来说幸运的是,镇上有一些新的孩子带着一些新玩具来帮助我们。

像LESS和SASS这样的CSS预处理器占据了一席之地,并表明存在更多动态样式表语言的空间。变量,混合和功能现在可供我们使用,随着网络变得更加流畅和与设备无关,我们无法与更好的公司合作。

Where it all began. Ethan Marcotte’s article ‘Fluid Grids’ is a primer in understanding and using fluid layouts. Check it out here

一切都开始了。 Ethan Marcotte的文章“流体网格”是理解和使用流体布局的入门读物。在这里查看

在本教程中,我将向您展示LESS动态样式表语言的一些基础知识,最后,我们如何利用它的一些更大的潜力来加速流体布局的创建。我们将通过在样式表中使用一些标准的数学运算符来实现这一点,并让LESS努力为我们提供解决方案。毕竟,没有人愿意用计算器妥协他们的咖啡手,对吧?

配置

我们将在本教程中不吃早餐并直接吃甜点 - 毕竟,我们来这里是为了少一点。为了让我们做好准备,我已经编写了一个简单的HTML页面,其中包含一个标准的CSS样式表。在文件中,您还可以找到相关的图像和字体。

首先,我们需要在HTML页面中包含LESS JavaScript文件。最新版本(撰写本文时)包含在教程文件中,但请务必检查Lesscss.org更新。我们之所以选择这种方法是因为它最简单,但还有一些其他更强大的选项值得考虑。

要包含该文件,请将以下代码行添加到HTML中标签:

我们还需要更新我们样式表的链接,以表明我们现在将使用。减文件。因此,确保反映您的文件结构,继续并使用以下内容编辑样式表链接:

现在,显然这是一个死链接。我们需要创造我们的Styles.less文件。要做到这一点,只需复制并重命名我们的Styles.css的相应地归档。嘿presto,我们的页面应该打开并呈现与之前完全相同的内容。

混入

让我们坚持使用一些LESS添加使我们的代码更有趣。首先,可能是最重要的LESS资产,是mixins。为了解释,让我们看看以下两个CSS声明。

.meta {width:130px;填充:10px 10px 15px 10px;保证金:0 20px 10px 0;清楚:左; float:left;} .profile {width:150px;保证金:0 20px 10px 0;清楚:左;向左飘浮;}

很明显,这些元素共享一些相同的属性,谁说我们不会在布局中创建更多这些元素?我不了解你,但我想让自己成为一个很好的混合包装。让我们给它一个语义明显的名字。

.float-box {margin:0 20px 10px 0px;清楚:左;向左飘浮;}

当当!那么我们如何使用这种花哨的新混合?让我们重新审视我们之前的两种风格,我会告诉你。

.meta {... .float-box;} .profile {... .float-box}

我们所要做的就是删除现在包含在mixin中的那些属性并添加选择器,即.float盒在他们的位置。简单。

For an extensive rundown on all LESS has to offer, be sure to check out the site for documentation and updates

对于所有LESS提供的广泛纲要,请务必查看网站以获取文档和更新

变量

这种情况越来越好,但你需要更多的力量,对吗?这里有很棒的东西:LESS使我们能够在样式表中使用变量。他们是一块蛋糕,所以让我们做一两个。其实我感觉好色。我们来三点吧。

@ fonts-serif:'Times New Roman',Georgia,serif; @ fonts-sans:'BebasNeueRegular',Helvetica,Arial,sans-serif; @ thick-black:3px solid#000;

顺便说一句,我已经定义了:一个用于我的serif字体堆栈的变量,一个用于我的sansserif字体,最后一个用于整个布局中使用的边框样式。正如您所看到的,我们为定义变量而必须做的就是用前面的@符号命名它,并用冒号和我们想要赋值的值来跟随它。我们现在可以用我们的变量替换任何匹配的长格式声明。

.story h1 {... font-family:@ fonts-serif; border-bottom:@ thick-black;}

参数混合

坚持你的帽子,现在终于把我们学到的所有东西组合成一种叫做“参数混合”的东西了。如果你之前在JavaScript,ActionScript或PHP中创建了函数,那么这里的前提将不是外来的。有什么不寻常的是能够在CSS中创建这些可重复使用的动态魔法。很少,你真的很棒!

我们通过简单地提到LESS可以帮助创建流畅布局的数学来开始本教程。 Ethan Marcotte的作品读者会认识到这个等式Width÷context = Result。这一小块数学使我们能够将基于像素的宽度转换为流体网页所需的基于百分比的测量。这是一些HTML及其CSS的简短示例,我们将应用数学使其流畅:

.parent {width:200px;}。child {width:110px;}

为了简单起见,我们将告诉我们的父节填充其中包含的内容,如下所示:

.parent {width:100%;}

那么我们的孩子文章怎么样?为此,我们需要引入我们的花哨方程,我们需要建立的第一个值是我们的子元素上下文。我们追逐的是我们的儿童文章所在元素的宽度 - 或者实际上是它的父元素。这是部分.parent并且值(在我们将其更改为百分比之前)是200px。接下来,我们需要我们的儿童文章所具有的像素值,如果它是一个固定的布局 - 根据我们的CSS 110px。这是数学:

110px÷200px = 0.55

非常好,但我们需要采取最后一步将其用作CSS中的百分比,并将其乘以100:

0.55 X 100 = 55

让我们将它插入我们的样式表,看看我们得到了什么:

.parent {width:100%;}。child {width:55%;}

太好了,这将是一种享受。但是,我们使用的是LESS,计算器适用于极客,对吧?那么,让我们来看看如何制作一个很好的参数化mixin来为我们排序。我只是先将它扔出去,然后我们将逐步解释它。

.width(@context,@ target){@ percent:(@ target / @ context)* 100; width:`@ {percent} +“%”`;}

让我们从顶部开始吧。首先,我们需要定义我们的mixin名称。我们选择了。宽度因为它是语义的,并扩展了标准宽度CSS中的属性。然后,作为参数,我们已经根据我们的等式声明了两个熟悉的变量。在我们的mixin中,我们做的第一件事是声明另一个变量 -@百分- 然后将完整的等式指定为其值。每当编译LESS文件时,方程式都将得到解决 - 这是使用我们传递给mixin的变量来完成的。该@百分变量将被替换,无论它在mixin的以下行中使用的是数学的答案,在这种情况下,根据我们的参数计算的百分比。

SASS is another dynamic stylesheet language that shares a similar syntax and functionality to LESS. See sass-lang.com for more information

SASS是另一种动态样式表语言,与LESS共享类似的语法和功能。有关更多信息,请访问sass-lang.com


我们做的最后一件事是宣布标准宽度CSS属性后跟一小段代码,这些代码将以正确的格式“打印”出我们的百分比值,并带有附加的'%'符号。这个最后一行的语法,即在波形符号之前,围绕变量名称的后面标记和花括号,很重要,因为它们允许将变量正确地解析为CSS中的文本字符串。

现在,深呼吸,我们需要做的就是使用我们的花哨代码,就像我们使用mixins一样在另一个CSS类中声明它。我们将使用前一个示例的宽度值来完成。

.parent {width:100%;}。child {.width(200,110);}

现在,当我们加载我们的HTML并编译页面时,生成的CSS(将放在我们的文件)将类似于:

.parent {width:100%;}。child {width:55%;}

太棒了。为了看到这一点,我们将它应用于我们项目的某个地方。我们需要做的第一件事是拿走。宽度Mixin并把它放在安全的地方。由于它是一个高度可重复使用的代码片段,让我们与其他代码一起创建一个新的LESS文件,并为其命名。我在叫我的Responsive_mixins.less。要在我的其他LESS项目样式表中使用它,我所要做的就是使用以下代码行:

@import“responsive_mixins.less”;

将它粘贴在此项目的LESS文件的顶部,您将会很高兴。现在让我们在我们的一个元素上使用它。我的投票是个人资料图片。一切顺利?好。我们的图像元素的像素宽度是150像素,其上下文是元素,宽度为600px,因此我们的代码看起来像这样:

.profile {.width(600,150); ...}

这很简单,我们可以在标记中的其他元素上推广它,但是边距呢?我想我们也希望他们用我们的布局来展示,所以让我们为它做一个混合。

.margin(@ context,@ top,@ right,@ bottom,@ left){@ top-percent:(@ top / @ context)* 100; @ right-percent:(@ right / @ context)* 100; @ bottom-percent:(@ bottom / @ context)* 100; @ left-percent:(@ left / @ context)* 100;保证金:`@ {top-percent} +“%”+ @ {right-percent} +“%”+ @ {bottompercent} +“%”+ @ {left-percent} +“%”`;}

在这里看一下,但是考虑到我们之前的mixin,它应该是有意义的。这次我们传递元素每一边的边距值。我们使用相同的方程式来计算数学,然后用结果吐出标准的CSS属性。让我们通过计算在我们中声明的边距来尝试它.float盒混入。这是正确的,混合中的混合物。开始:

.float-box {.margin(600,0,20,10,0); ...}

干得好!现在,最后,填充。这很容易;我们只需要使用我们的边距mixin,并用填充字代替。任务完成!这里还有更多内容,因为我们知道标准的vanilla CSS使我们能够将边距和填充声明为元素每一面的单独属性。我会让你解决这个问题 - 或者你可以查看已完成的项目文件并在那里找到解决方案。无论哪种方式,您现在都可以通过LESS实现更快的流体布局。



翻译字数超限