css :: :_如何使用神话：“ CSS的想象方式”

最新推荐文章于 2024-11-08 21:55:19 发布

翻译最新推荐文章于 2024-11-08 21:55:19 发布 · 196 阅读

文章标签：

#java #python #javascript #linux #css #ViewUI

css :: :

在本教程中，我将引导您完成一个名为Myth的工具。神话是替代CSS预处理器，与Sass或LESS不同，它不使用专有语法。相反，神话采用了工作草案中指定的“未来” CSS语法。将“神话”想象为“ 图片填充” ，它使我们可以使用HTML5 <picture>元素，即使在浏览器中仍未完全支持<picture>元素；有了Myth，我们今天就可以编写未来CSS。

“ CSS就像想象中的那样。

在使用神话之前，我们首先必须设置一些条件。让我们开始吧！

进行设定

神话是一个Node.js包，它允许它在不同平台上工作。因此，您需要确保在系统中安装了Node.js和NPM （节点程序包管理器）。要进行验证，请启动“终端”或“命令提示符”，然后键入node -v && npm -v ，如下所示：

该命令应返回如上所示的Node.js和NPM的版本，否则您将必须先安装它们。 NPM提供了一个简短的截屏视频，以指导您完成整个过程。您还可以按照我们以前的系列文章和课程来探究Node.js的全部含义。

安装神话

现在，假设您已经设置了Node.js和NPM，则可以使用以下命令开始安装Myth：

npm install -g myth

我们添加的-g参数将全局安装Myth库，该库允许Myth在系统上任何目录中的任何位置均可访问。

完成后，您将可以访问myth命令。例如，运行myth --version将向您显示系统上安装的Myth的当前版本。

神话适用于任何基于文本的文件扩展名。样式表可以设置为.txt ， .css甚至.myth 。在这里，我只是使用.css因此不必配置代码编辑器即可使用适当的语法突出显示颜色来呈现代码。

运行以下命令myth --watch build/app.css app.css以监视/build文件夹中样式表中的更改，并将其编译为相应的文件。

我们已经准备好使用神话！

使用神话

神话本质上是一个CSS预处理程序，它使我们能够编写新CSS语法（我们可能希望将来将其标准化），然后将其编译为当今的浏览器兼容CSS格式。神话支持包括CSS变量的使用，CSS颜色操作以及目前部分或不统一支持的几种CSS技术，例如::placeholder伪类和calc() 。

变数

变量的使用极大地帮助我们维护了样式表，并且可能是CSS预处理器一开始被如此广泛采用的主要原因。但是，变量将作为CSS的本机功能出现在CSS上。根据最新的工作草案，我们将使用双破折号--来定义变量，而不是之前的草案中所述的var-前缀：

:root {
    /** [early version and deprecated] */
	var-color-primary: #000;
	var-color-secondary: #fff;

	/** [latest version] */
	--color-primary: #000;
	--color-secondary: #fff;
}

:root伪类选择器引用标记文档的根元素。在HTML的情况下，这将引用<html>元素，在SVG中将是<svg> 。由于root元素是文档的最高级别，因此将我们的变量放入:root可以在样式表中的任何样式规则中对其进行访问。您可以通过在更具体的选择器中进行声明来限制变量的范围。

我们使用新的var()函数在样式规则中应用变量，例如：

:root {
  --color-primary: #000;
  --color-secondary: #fff;
}
h1, 
h2,
h3 {
  color: var(--color-secondary);
}
.panel {
  background-color: var(--color-primary);
  color: var(--color-secondary);
}

此示例将为我们提供以下输出（如您所预期的那样）：

h1,
h2,
h3 {
  color: #fff;
}
.panel {
  background-color: #000;
  color: #fff;
}

变量中的值可以是任何值-颜色，字符串，长度，甚至可以使用CSS calc()函数进行数学运算。变量中的值也可以根据CSS级联规则重用或继承。例如，在下面，我们根据前面的变量确定line-height值。

:root {
  --font-size-base: 16px;
  --line-height-base: calc(16px + 10);
}
p {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}

这给我们：

p {
     font-size: 16px;
  line-height: 26px;
}

Firefox当前是本机支持CSS变量的浏览器（请在CanIUse.com上找到完整列表）。

色彩处理

颜色操纵功能使我们能够更直观地更改颜色；无需记住或挑选颜色选择器就可以选择正确的颜色。这是CSS预处理程序的常见做法，但是color() （属于CSS Color mod Level 4）是允许我们更改纯CSS的颜色的方法。此新功能通过指定颜色以及所谓的颜色调整器来工作 ：

element {
    background-color: color(<color> <color-adjuster>);
}

Myth支持的色彩调节器包括：

lightness() ，修改给定颜色的亮度。
whiteness() ，用于修改给定颜色的白色强度。
blackness()类似于whiteness() ，除了它修改黑色强度。
saturation() ，以修改颜色饱和度
tint(<percentage>) ，通过将给定颜色与白色混合来产生较浅的颜色。
shade(<percentage>) ，通过将给定颜色与黑色混合来产生较暗的颜色。

以下示例将#ccc （深灰色） #ccc亮20％。

p {
  color: color(#ccc lightness(20%));
}

...编译成：

p {
  color: rgb(51, 51, 51);
}

另外，您也可以像这样通过一个变量传递颜色，这将为我们提供相同的输出：

:root {
	--color-primary: #ccc;
}
p {
  color: color(var(--color-primary) lightness(20%));
}

color()这个函数与CSS3 linear-gradient一起使用以确定渐变颜色时，将非常有用，例如：

.button {
	background: linear-gradient(to bottom, var(--color-primary), color(var(--color-primary) shade(10%))); ;
}

字体变体

我们可以在Myth中使用font-variant属性。自CSS1以来， font-variant实际上已经存在于CSS中，只有两个可接受的值： normal和small-caps 。在CSS字体模块的一部分CSS3中， font-variant属性已扩展为具有更多可接受的值，并添加了一些特殊属性，例如font-variant-east-asian ，这使我们可以选择中文字形的变体， simplified或traditional 。

让我们尝试将标题中的所有字母变成小写：

h1 {
	font-variant: all-small-caps;
}

神话将这段代码编译为：

p { 
  -webkit-font-feature-settings: "smcp", "c2sc";
  -moz-font-feature-settings: "smcp", "c2sc";
  font-feature-settings: "smcp", "c2sc";
  font-variant: all-small-caps;
}

all-small-caps值将强制所有字符（包括小写和大写）变成小写字母。但是，请记住， all-small-caps只会在提供每个字形的小写版本的特定字体家族中起作用，例如Helvetica，Arial和Lucida Grande。如果不支持小写字母，则字形将返回“未知”：

目前，Firefox是唯一对font-variant属性提供不错支持的浏览器。除了small-caps （自CSS1起出现）之外的许多值都将在其他浏览器（包括Chrome和Safari）中失败。（请参阅CanIUse.com中的完整兼容性列表）。