金阳新区企业网站建设:初学者少学指南-极简慕枫

金阳新区企业网站建设:初学者少学指南

2019-01-15

金阳新区企业网站建设

既然我们已经谈完了Sass,现在我们来谈谈少学点东西吧。如果您还没有看过我的Sass教程,我建议您在这里检查一下。在前面的教程中,我们讨论了CSS的缺点以及预处理方法如何改进您的工作流程。

我们还讨论了如何使用变量、嵌套、混合、函数等实现SAS。因此,我们准备用另一种预处理方法进行另一种学习曲线,这是比较少的。

一言为定

Less是一种扩展CSS的动态样式表语言,就像Sass一样,它具有动态行为,如变量、混合、操作和函数。

在客户端(IE、Firefox等)上运行的次数较少。和服务器端使用Node.js。在本教程中,我们将使用客户端。因此,坐下来放松,享受这个教程。

完成本教程所需的资源:

  • 减图书馆
  • SimpLessforMac/Windows(客户端编译器)
  • Text editor
  • 时间和耐心

安装SimpleLess

对于较少的客户端编译器,金阳新区企业网站建设我们将使用SimpleLess,因为它简单易用,而且是免费的,所以继续下载并运行它。

当您第一次运行SimpleLess时,您将看到下面的图像。请注意,如果您没有在顶部栏上看到当前版本,这意味着它不能正常工作,所以您需要再次下载它。

variables

准备标记和减少Javascript

在我们探索更少的功能之前,我们需要准备我们的标记和更少的文件。因此,继续创建新文件夹,然后将其命名为“较少”或任何您喜欢的名称。接下来,在less文件夹中创建一个HTML文件,并将其命名为index.html,并复制和粘贴下面的代码。注意,我们已经在较少的样式表下面包含了较少的库。

        	
	

Heading 1

Heading 2

Paragraph No. 1 Paragraph No. 2 Paragraph No. 3
  • Item 1
  • Item 2
  • Item 3
  • Item 4

This is a cool footer

接下来,创建一个新文件并将其命名为style.less。为了向您展示如何少编译一些代码,让我们将一些较少的示例代码放在这个文件中。继续,复制并粘贴下面的代码到style.less文件。

@myColor: #00000;
@myFontSize: 23px;
@myBorder: 4px solid red;

因此,到目前为止,预计您将具有类似于此的文件结构。

operators

编译LessUsingSimpless

要将较少的文件编译到CSS中,请运行SimpLess应用程序,并拖放上面我们在应用程序中创建的更少的文件夹。

variables

如果文件夹出现在应用程序列表中,则可以看到该文件夹已成功添加到应用程序中。请注意,如果文件已编译或未编译,则可以看到通知您的文本。在这个例子中,正如你在右边看到的,它写着“永不编译”,这意味着我们的更少的文件夹从来没有被编译过。

混入

该应用程序还提供了不同的功能,即:前缀,缩小,爱。您可以在状态通知的右角看到这些。请注意,所有这些功能都可以单独打开或关闭。考虑以下这些特性的使用。

  • Prefix – allows you to attain cross-browser compatibility using vendor prefixes.
  • Minify– compress your CSS document that’s integrated CSS-minification.
  • Love– these will comment or state SimpLess to your document.

    其他功能

    现在,让我们继续将较少的文件编译到CSS中。要编译它,只需单击SimpLess应用程序左侧的刷新图标即可。

    compile

    在成功执行编译过程时,可以在应用程序的右侧看到通知。请注意,只要此应用程序正在运行,它将监视您正在对较少文件夹中的较少文件进行的更新。

    success

    因此,如果再次打开“较少金阳新区企业网站建设”文件夹,则可以看到向该文件夹添加了一个CSS文件。确保将已编译的CSS文件(style.css)链接到index.html,以将添加到您的较少文件中的样式添加到您的文件中。

    run

    减变量

    就像Sass一样,LESS也使用变量。如果您以前编写过代码,那么您就知道变量如何使每个进程更容易。对于像LASTER这样的预处理器,变量被用作在整个文件中使用的样式的每个值的占位符。LESS使用@符号来定义变量。让我们把这个付诸实践,知道它是如何工作的。

    打开你的较少的文件并放入下面的代码。对于这段代码,我为颜色、字体大小和边框创建了3个变量。我在H1标签上添加了MyColor和myFentSize变量,而我用myList的ID将my边界变量添加到列金阳新区企业网站建设表中。

@myColor: #1f7eff;
@myFontSize: 30px;
@myBorder: 1px solid #1f7eff;

h1 {
color: @myColor;
font-size: @myFontSize;
}

#myList {
border: @myBorder;
}

因此,如果要打开style.css文件,可以看到代码已经更新。继续在浏览器中运行这段代码,您可以看到类似于下面的图像。

添加CSS文件

减Mixins

有时,我们希望创建可以在整个样式表中重复的样式。好消息是混合食品在这里有帮助。就像Sass一样,它还具有相同的特性,您可以在每个元素上重复添加,但不使用@include指令。相反,只要一个简单的类样式指令就足够了。要向您展示如何使用更少的混合操作,请查看下面的代码。

.
sample-mixin {
border: 1px solid red;
color: # ff871f;
margin: 30px;
}

h1 {
font-family: Arial;
.sample-mixin;
}

#myParagraph {
background: green;
.sample-mixin;
}

正如您所看到的,我创建了一个混合名称示例-Mixin,这是在我们的h1和我们的段落中添加的ID myParag茶点。因此,如果您在浏览器中运行此操作,则类似的输出将与下面的图像类似。

文件结构

较少嵌套规则

ID和类的嵌套规则也可以应用在更少的地方,就像在Sass中一样。这将保持代码的整洁和组织。

为了看到这一点,我在下面设置了一个CSS示例,后面是它的较少版本。

长度单位

#container {
margin: 0px auto;
width: 600px;
border: 1px solid black;
}
#container header{
color: red;
}
#container #myList {
color: green;
padding: 30px;
}

#container  footer {
color: blue;
}

减版

@myMargin: 0px auto;
@myWidth: 600px;
@myColor1: red;
@myColor2: green;
@myColor3: blue;
@myPadding: 30px;
@myBorder: 1px solid black;

#container {
margin: @myMargin;
width: @myWidth;
border: @myBorder;

h1, h2{
color: @myColor1;
}

#myList {
color: @myColor2;
padding: 30px;
}

footer {
color: @myColor3;
}

}

正如您所看到的,我们已经用更少的方式组织了我们的样式,并且我们没有多次重复我们的ID容器。如果要在浏览器中检查这一点,您可以看到类似的结果。

减运算符

较少的一个最好的特点是执行数学运算的能力。使用样式固定值金阳新区企业网站建设,您可以添加,减法,乘,甚至除法。让我们来看看这个动作。

请查看下面的代码:

@myBorderWidth: 5px;
@myBorderColor: green solid;
@myPadding: 90px;

#myList {
border: @myBorderWidth + 5px @myBorderColor;
padding: @myPadding / 3px;
}

从我们的基本边框宽度5px中可以看到,我添加了额外的5px,然后将边框颜色放上去。对于填充,我们有我们的基础填充90 px,并将它分为3,因此,我们将有30 px填充。因此,如果在浏览器中运行这段代码,您会看到类似的结果,如下所示。

减函数

LESS提供了一组函数来操作元素和样式。在本教程中,我们将重点介绍颜色函数,如果您想了解更多关于更少功能的内容,可以单击此处了解更多内容。

请查看下面的一系列颜色功能。

  • 深色(颜色,数量)
  • 淡(颜色,量)
  • 饱和(颜色、数量)
  • de饱和(颜色、数量)
  • 阿尔法(颜色)

让我们来试试这个颜色函数。继续打开你的style.less文件并复制以下代码。

@myColor: #f58220;
@myBackground: #dedede;

body {
     background: darken(@myBackground, 40%);
}

h1, h2 {
     color: lighten(@myColor, 10%);
}

p
{
    color: lighten(@myColor, 20%);
}

正如你所看到的,背景颜色被变暗了60%,然后H1和H2标签被减轻了10%,段落标签的颜色也减少了20%。因此,当您在浏览器中运行此操作时,您可以得到类似于下面的图像的结果。

最后的思考

Less库为设计人员和开发人员提供了许多非常棒的功能。本教程为更少的用户提供了基本教程。你可以自由地玩这些代码,我很想听听你的结果,看看你的实验结果。建议,纠正和提示永远是欢迎的。希望你喜欢这个教程,下次见。

联系电话 400-6065-301

微信咨询 寒总监