CSS预处理器：概述，选择，应用

当然，所有有经验的布局设计师都使用预处理器。 没有例外。 如果你想在这个活动中取得成功，不要忘记这些程序。 乍一看，他们可能会引起一个初学者安静的恐怖 - 这太像编程了！ 实际上，您可以在一天之内了解CSS预处理程序的所有功能，如果您尝试了几个小时。 未来，他们将大大简化您的生活。

CSS预处理器如何出现

为了更好地了解这项技术的特点，请简要介绍网页视觉表示开发的历史。

当大众互联网应用刚开始时，没有样式表。 文件的设计完全依赖于浏览器。 他们每个人都有自己的风格，用于处理某些标签。 因此，根据您打开它们的浏览器，页面看起来有所不同。 结果是混乱，混乱，开发人员的问题。

1994年，挪威科学家Haakon Lee开发了一种样式表，可用于与HTML文档分开设计页面的外观。 这个想法被邀请到W3C联盟的代表，他们立即开始着手。 几年后，CSS规范的第一个版本被发布了。 然后它不断改进，改进...但是概念保持不变：每种风格都被赋予一定的属性。

使用CSS表格一直造成一些问题。 例如，编码器经常难以对属性进行排序和分组，并且继承不是那么简单。

然后来了二千分之一。 专业的一线开发商开始更频繁地进行标记，对于与样式有关的灵活和动态的工作很重要。 当时存在的CSS需要对新浏览器功能进行前缀和跟踪支持。 然后，JavaScript和Ruby专家下定决心，创建预处理器 - CSS附加组件，为其添加新功能。

初学者CSS：预处理器的功能

他们执行几个功能：

• 统一浏览器前缀和黑客;

• 简化语法;

• 允许使用嵌套选择器没有错误;

• 改善造型的逻辑。

简而言之：预处理器将编程逻辑添加到CSS功能。 现在的样式不是通常的枚举样式，而是借助几个简单的技巧和方法：变量，函数，myxins，循环，条件。 此外，可以使用数学。

看到这种加载项的受欢迎程度，W3C开始逐渐将功能添加到CSS代码中。 例如，calc（）函数出现在规范中，由许多浏览器支持。 预计很快就可以设置变量并创建myxins。 然而，这将在遥远的未来发生，预处理器已经在这里，而且已经正常工作了。

流行的CSS预处理器。 萨斯

它是在2007年开发的。 它最初是哈姆尔的一个组成部分，HTML模板引擎。 用于管理CSS元素的新功能已经开始在Ruby on Rails上开发出来，开始在各处传播。 在Sass中出现了大量的机会，现在包含在任何预处理器中：变量，嵌入选择器，mixins（然而，您不能向它们添加参数）。

在Sass中声明变量

使用$ sign声明变量。 在其中，您可以保存属性及其集合，例如：“$ borderSolid：1px solid red;”。 在这个例子中，我们声明了一个名为borderSolid的变量，并将其中的值保存为1px。 现在，如果在CSS中，我们需要创建一个宽度为1px的红色边框，只需在该属性的名称后面指定该变量即可。 声明后，变量无法更改。 有几个内置功能可用。 例如，声明值为$ FF5050的变量$ redColor。 现在，在CSS中，在元素的属性中，我们使用它来设置字体颜色：p {color：$ redColor; }。 你想尝试颜色吗？ 使用功能变暗或减轻。 这样做是这样的：p {color：darken（$ redColor，20％）; }。 结果，redColor的颜色将会轻20％。

Sass有许多内置的功能。 我们建议您至少熟悉他们，并更好地学习。

嵌套

以前，为了表示嵌套，我们不得不使用长而不方便的设计。 想象一下，我们有一个p在哪里，反过来又是跨越。 对于div，我们需要将字体颜色设置为红色，对于p-yellow，用于span-pink。 在普通的CSS中，这样做是这样的：

Div {

颜色：红色

}

Div p {

颜色：黄色;

}

Div p span {

颜色：粉色;

}

使用CSS预处理器，一切都变得更加容易和更紧凑：

Div {

颜色：红色

P {

颜色：黄色;

.span {

颜色：粉色;

}

}

}

元素在字面上被“放”到另一个中。

预处理指令

使用@import指令，您可以导入文件。 例如，我们有一个名为fonts.sass的文件，其中声明了字体的样式。 我们把它连接到主style.sass文件：@import'fonts'。 完成！ 而不是一个带有样式的大文件，我们有几个可以用来快速，轻松地访问所需的属性。

盲鳗

最有趣的zadumok之一。 它允许在一行中指定一组属性。 工作如下：

@mixin largeFont {

字体：“时代新罗马”;

字体大小：64px;

线高：80px;

Font-weight：bold;

}

要将mixin应用于页面上的元素，请使用@include指令。 例如，我们要将其应用到h1标题。 获得以下结构：h1 {@include：largeFont; }

来自mixin的所有属性将被分配给元素h1。

少预处理器

Sass语法让人联想到编程。 如果您正在寻找一个更适合初学者学习CSS的学生的选项，请查看Less。 成立于2009年。 主要功能是支持本机CSS语法，所以使用不熟悉编码器编程的陌生人更容易学习。

变量用@符号声明。 例如：@fontSize：14px;。 嵌套的工作原理与Sass相同。 Mixin被声明如下：.largeFont（）{font-family：'Times New Roman'; 字体大小：64px; 线高：80px; Font-weight：bold; }。 对于连接，您不需要使用预处理指令 - 只需将新创建的mixin添加到所选元素的属性。 例如：h1 {.largeFont; }。

唱针

另一个预处理器。 创作于2011年的同一作者给世界玉，快递等有用的产品。

变量可以通过两种方式声明 - 显式或隐式。 例如：font ='Times New Roman'; 是一个隐含的选项。 但是$ font ='Times New Roman' - 显式。 混合体被隐含地声明和连接。 语法是：redColor（）颜色为红色。 现在我们可以将它添加到元素中，例如：h1 redColor（）;。

乍看之下，手写笔可能看起来不可理解。 “本地”括号和分号在哪里？ 但是，如果你只是潜入它，一切都变得更加清晰。 但是，请记住，这种预处理器的长期发展可以“断绝”您使用经典的CSS语法。 当您需要使用“干净”样式时，这有时会导致问题。

我应该选择哪个预处理器？

其实呢...没关系。 所有选项提供大致相同的可能性，只是每个的语法是不同的。 我们建议您按照以下步骤进行操作：

• 如果您是程序员，并希望使用样式作为代码，请使用Sass;
• 如果您是布局设计师，并希望与通常的布局一起使用样式，请注意Less;
• 如果您喜欢极简主义，请使用手写笔。

对于所有选项，都有大量有趣的库可以进一步简化开发。 建议Sass的用户注意Compass - 功能强大的工具，具有许多内置功能。 例如，安装完成后，您将不用担心供应商前缀。 更简单的网格工作 有用于处理颜色，精灵的实用程序。 已经有许多已经宣布的毒素可用。 给这个工具几天 - 从而为您节省了大量的时间和精力。