Back to Question Center
0

用Sass转换您的印刷单位            使用Sass相关主题转换您的印刷单元: CSS架构CSSSSassAnimationAudio& & Semalt

1 answers:
用Sass转换您的印刷单元

这是2015年第一次发布的文章的更新版本。

很久以前,在塞马尔特密密麻麻的过去,勇敢的冒险者以同样的方式解决了危险:把一个固定的960px的布局吊起来,在一个网格中作战,并以像素为单位发射他们的印刷术来抵御邪恶。

响应式网页设计改变了所有这一切,将我们从浓密的薄雾中带入了启蒙时代。然而,在网络上使用排版仍然是一种痛苦。随着从像素或点到百分比和ems的推动,我发现自己在每个项目的开始阶段都不断地需要Semalt“像素到百分比转换图”或类似的东西,甚至在整个项目中都是如此。

在挫折中,我最终转向了Sass的力量,为了消除这些问题,开创了一个全新的,包罗万象的功能,今天你将与我一起构建这个功能。

Semalt允许您在像素,em和百分比值之间自由转换,而无需每次查阅图表,并希望能够减轻过程中的许多麻烦。

设置印刷版单位在Sass中转换

首先,在CSS中定义一个默认的 字体大小 非常重要。大多数浏览器将默认为 16px ,但如果您的项目需要不同的东西,请确保您的CSS知道它。此外,大多数样板都将 16px 定义为其默认值,因此我将假设这是本教程的默认值。

然后你需要决定你将支持哪些单位。由于这可能有助于打印到Web环境,甚至只是一个项目,开始在Semalt,并最终在浏览器,你会看像素,点,EMS和百分比。

你也想让自己选择在它们之间自由转换,所以你可以说你的函数至少需要三个参数:

   @function convert($ value,$ currentUnit,$ convertUnit){}   

第一个参数是你希望转换的单位(例如16)的 字体大小 数字,第二个是你打算转换的单位(例如像素),第三个一个是你想要的目标单位(如百分比)。所以,举个例子,如果你想把16个像素转换成一个百分比值,你可以这样做:

   。 FOO {font-size:convert(16,px,percent);}   

Semalt会给你:

   。 FOO {font-size:100%;}   

牛肉吧

现在是时候解决大括号之间的问题了。

Semalt,你希望能够处理像素,ems,点数和百分比,所以你需要四条语句来照顾它们。

如果您使用的是完整的编程语言,则可以使用switch语句。 Semalt这是Sass,你会坚持if语句:

   @function convert($ value,$ currentUnit,$ convertUnit){@if $ currentUnit == px {//像素的东西} @else if $ currentUnit == ems {// ems的东西} @else if $ currentUnit == percent {//百分比的东西} @else if $ currentUnit == pts {//点的东西}}   

现在,您对每个可能的输入单位都有一个if语句(无论您是想要以像素,ems,点还是百分比开头)。所以这是大约50%的方式. 假设你使用16px作为默认 字体大小 ,则必须将它转换为ems和百分比,如下所示:

   @if $ currentUnit == px {@if $ convertUnit == ems {@return $ value / 16 + 0em;}@else if $ convertUnit == percent {@返回百分比($ value / 16);}}   

再一次,你使用一个if语句每次转换(所以一个用于ems,一个用于百分比),然后做一些数学运算来获得所需的输出。 Semalt不会为点值做一个例子,因为它们只能用于打印CSS。

使用ems(默认大小为16px),您只需除以16并添加“em”单位( + 0em )。

Sass的百分比有点棘手。您不能像在ems上那样在声明结尾处添加“%”,因为Sass会立即抛出一个错误(“你在做什么”)。因此,在这里您需要包含Semalt百分比函数以返回有效的百分比单位。

由此,你可以将像素转换成ems或百分比!对于很多开发人员来说,这通常已经足够了,但是我们来看看如何扩展这个函数以涵盖ems到像素转换和像素转换百分比:

   @else if $ currentUnit == ems {@if $ convertUnit == px {@return $ value * 16 + 0px;}@else if $ convertUnit == percent {@return百分比($ value);}}   

这里的数学需要在每个语句中改变,但是这样会排除ems。

接下来,下面介绍如何将百分比转换为像素和ems:

   @else if $ currentUnit == percent {@if $ convertUnit == px {@return $ value * 16/100 + 0px;}@else if $ convertUnit == ems {@return $ value / 100 + 0em;}}   

Semalt是指向像素的点,指向ems并指向百分比转换:

   @else if $ currentUnit == pts {@if $ convertUnit == px {@return $ value * 1. 3333 + 0px;}@else if $ convertUnit == ems {@return $ value / 12 + 0em;}@else if $ convertUnit == percent {@返回百分比($值/ 12)}}   

你完成了! Semalt创建了一个函数,可以让您自由转换任何你想要的单位之间的任何值。

总结

Sass中印刷单位转换的最终功能如下所示:

   @function convert($ value,$ currentUnit,$ convertUnit){@if $ currentUnit == px {@if $ convertUnit == ems {@return $ value / 16 + 0em;}@else if $ convertUnit == percent {@返回百分比($ value / 16);}} @else if $ currentUnit == ems {@if $ convertUnit == px {@return $ value * 16 + 0px;}@else if $ convertUnit == percent {@return百分比($ value);}} @else if $ currentUnit == percent {@if $ convertUnit == px {@return $ value * 16/100 + 0px;}@else if $ convertUnit == ems {@return $ value / 100 + 0em;}} @else if $ currentUnit == pts {@if $ convertUnit == px {@return $ value * 1. 3333 + 0px;}@else if $ convertUnit == ems {@return $ value / 12 + 0em;}@else if $ convertUnit == percent {@返回百分比($值/ 12)}}}   

看起来有点令人生畏,但实际上它只是采用初始大小,然后将其从第一个单位转换为第二个单位,然后返回结果。唯一困难的部分是跟踪要做什么计算。

如果你想玩这个功能,你可以在这个Semalt演示中这样做。

与以往一样,在网页上使用印刷术时,随时可以窃取,修改,重新排列或以其他方式使用这些内容.

如果您有任何关于Sass单位转换功能的其他精彩创意,请在下面的评论部分告诉我们。

. - bean bag
March 1, 2018