sass css 在线转换_使用Sass转换印刷单位

不念不忘少年蓝@ 2022-12-03 09:10 156阅读 0赞

sass css 在线转换

![Typography Units Conversion with Sass][]

*This is the updated version of an article first published on March 5, 2015.*

*这是2015年3月5日首次发布的文章的更新版本。*

Long ago, in the dense mists of the Internet’s past, intrepid adventurers tackled danger in much the same way: sling a fixed 960px layout, fight in a set grid and fire their typography in pixels to ward off evil.

很久以前，在过去的互联网迷雾笼罩中，无畏的冒险家们以几乎相同的方式来应对危险：悬吊固定的960px布局，在固定的网格中战斗并以像素为单位射击他们的版式以避开邪恶。

[Responsive web design][] has since changed all that by bringing us out of that dense mist and into an age of enlightenment. And yet, using typography on the web is still a pain at times. With the push from pixels or points to percentages and ems, I find myself continuously having to Google “pixel to percentange conversion chart” or something similar at the beginning of every project, and often even throughout.

从那时起， [响应式网页设计][Responsive web design]就使我们摆脱了浓雾，进入了一个启蒙时代，从而改变了一切。 但是，有时在网络上使用排版仍然很痛苦。 从像素或点到百分比和em的推动力，我发现自己在每个项目的开始甚至整个过程中，都不断需要Google“像素到百分比转换表”或类似的东西。

In frustration, I finally turned to the power of [Sass][] to forge a new, all-encompassing function in my quest to vanquish these problems, and today you’re going to build that function with me.

沮丧的是，我最终转向[Sass][]的力量来打造一个新的，包罗万象的功能，以解决这些问题，今天您将与我一起构建该功能。

It’ll allow you to convert freely between pixels, em, and percentage values without having to consult a chart every time and, hopefully, alleviate a lot of your headaches in the process.

它使您可以在像素，em和百分比值之间自由转换，而不必每次都查阅图表，希望可以减轻您在此过程中的许多麻烦。

## 为Sass中的印刷单位转换做好准备 **(**Setting Things Up for Typographic Units Conversion in Sass**)** ##

Firstly, it’s extremely important to have a default `font-size` defined in your CSS. Most browsers will default to `16px`, but if your project requires something different, make sure that your CSS knows about it. Also, most boilerplates come with `16px` defined as their default value, therefore I’m going to assume this as the default for this tutorial, too.

首先，在CSS中定义默认`font-size`非常重要。 大多数浏览器将默认设置为`16px` ，但是如果您的项目需要其他设置，请确保CSS对此有所了解。 另外，大多数样板都将`16px`定义为其默认值，因此，我也将其假定为本教程的默认值。

You then need to decide which units you’re going to support. Since this is likely to be helpful in a print to web environment, or even just a project which starts in Photoshop and ends up in the browser, you’ll be looking at pixels, points, ems and percentage.

然后，您需要确定要支持的单元。 由于这可能对从Web打印的环境，甚至只是在Photoshop中启动并在浏览器中结束的项目很有帮助，因此您将查看像素，点，ems和百分比。

You also want to give yourself the option of converting freely between them, so you can already say that your function needs at least three arguments:

您还希望为自己提供在它们之间自由转换的选项，因此您已经可以说您的函数至少需要三个参数：

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

The first argument is the `font-size` number whose unit you wish to convert (for example 16), the second is the unit you’re planning to convert (for example pixels), and the third one is the desired unit you’re aiming for (like percentage). So, as an example, if you want to convert 16 pixels into a percentage value, you would do this:

第一个参数是`font-size`数字，您要转换的单位(例如16)，第二个参数是您计划转换的单位(例如，像素)，第三个参数是您想要的目标单位为(如百分比)。 因此，作为示例，如果要将16个像素转换为百分比值，则可以执行以下操作：

.foo{
      font-size: convert(16, px, percent);
    }

Which will give you:

这会给你：

.foo{
      font-size: 100%;
    }

## 让我们牛肉吧 **(**Let’s Beef It**)** ##

Now, it’s time to tackle the bit that goes in between the braces.

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

Firstly, you want to be able to tackle pixels, ems, points and percentages, so you’ll need four statements to take care of them all.

首先，您希望能够处理像素，em，点和百分比，因此您需要四个语句来处理它们。

If you were using a full-fledged programming language, you might use a [switch statement][]. Since this is Sass, you’ll stick with [if statements][]:

如果您使用的是成熟的编程语言，则可以使用[switch语句][switch statement] 。 由于这是Sass，因此您将坚持使用[if语句][if statements] ：

@function convert($value, $currentUnit, $convertUnit){
      @if $currentUnit == px{
    
        // stuff for pixels
    
      }@else if $currentUnit == ems{
    
        // stuff for ems
    
      }@else if $currentUnit == percent{
    
        // stuff for percentage
    
      }@else if $currentUnit == pts{
    
        // stuff for points
    
      }
    }

You now have an if statement for each possible input unit (whether you want pixels, ems, points or percentages to start with). So this is about 50% of the way there. All you have to do now is throw some awesome stuff into those if statements!

现在，对于每个可能的输入单位都有一个if语句(是否要以像素，em，点或百分比开头)。 所以这大约是那里的50％。 您现在要做的就是将一些很棒的东西放到那些if语句中！

## Sass印刷单位转换的数学运算 **(**Throwing in the Maths for the Sass Typographic Units Conversion**)** ##

Okay, so things get pretty mathematical at this point. Assuming you’re working with 16px as the default `font-size`, you’ll have to convert it into ems and percentage like so:

好的，在这一点上，事情变得很数学了。 假设您使用16px作为默认`font-size` ，则必须将其转换为ems和百分比，如下所示：

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

Again, you’re using one if statement per conversion (so one for ems, one for percentage) and then doing a little math to get the desired output. I’m not going to do a case for point values, since these only work with print CSS anyway.

同样，您在每次转换中使用一个if语句(因此，一个用于ems，一个用于百分比)，然后做一点数学运算以获得所需的输出。 我不会处理点值，因为它们无论如何都只能用于打印CSS。

With ems (and a default size of 16px), you just divide by 16 and add the “em” unit (`+ 0em`).

使用ems(默认大小为16px)时，只需除以16，然后添加“ em”单位( `+ 0em` )。

Percentages with Sass are a little trickier. You can’t just throw a “%” at the end of the statement like you did with ems, as Sass will throw an error right back (something to the effect of “what are you doing putting that there!”). So here you need to incorporate [Sass’s percentage function][Sass_s percentage function] in order to return a valid percentage unit.

使用Sass的百分比有些棘手。 您不能像在ems上那样在语句末尾抛出“％”，因为Sass会立即抛出错误(某种意义是“您在做什么把它放在那里！”)。 因此，在这里您需要合并[Sass的百分比功能][Sass_s percentage function] ，以便返回有效的百分比单位。

And with that, you have a function that converts pixels into ems or percentages! This is usually enough for a lot of developers, but let’s see how you can extend this function to cover ems to pixel conversion and percentage to pixel conversion:

有了这个，您就可以将像素转换为em或百分比！ 对于许多开发人员来说，这通常就足够了，但是让我们看看如何扩展此功能以涵盖ems到像素的转换以及百分比到像素的转换：

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

The math needs to change here for each statement, but that will sort out ems.

每个语句的数学都需要在此处更改，但是这会整理出ems。

Next, here’s how you can convert percentages into pixels and into ems:

接下来，这是将百分比转换为像素和em的方法：

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

Finally it’s the turn of points to pixels, points to ems, and points to percentage conversions:

最后是将点转换为像素，将转换为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{
        @return percentage($value / 12)
      }
    }

And you’re done! You’ve created a function that lets you freely convert any value between any unit you want.

大功告成！ 您已经创建了一个函数，可让您在所需的任何单位之间自由转换任何值。

## 总结一下 **(**To Sum Up**)** ##

The final function for typographic units conversion in Sass looks like this:

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

@function convert($value, $currentUnit, $convertUnit){
      @if $currentUnit == px{
    
        @if $convertUnit == ems{
          @return $value / 16 + 0em;
        }
        @else if $convertUnit == percent{
          @return percentage($value / 16);
        }
    
      }@else if $currentUnit == ems{
    
        @if $convertUnit == px{
          @return $value * 16 + 0px;
        }
        @else if $convertUnit == percent{
          @return percentage($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{
          @return percentage($value / 12)
        }
      }
    }

It looks a little daunting, but all it really does is take the initial size, then convert it from the first unit into the second unit, and return the result. The only tough part is keeping track of what calculations to make.

它看起来有些令人生畏，但实际上所做的只是获取初始大小，然后将其从第一个单位转换为第二个单位，然后返回结果。 唯一困难的部分是跟踪进行哪些计算。

If you want to play around with this function, you can do so in this [Sassmeister demo][].

如果您想使用此功能，可以在此[Sassmeister演示中进行操作][Sassmeister demo] 。

As always, feel free to steal, mangle, rearrange and otherwise use this in whatever helps you the most when working with typography on the web.

与往常一样，在使用网络排版时，可以随意窃取，篡改，重新排列和以其他方式使用，以最大程度地帮助您。

You could easily expand on the existing function, maybe including something like rem unit conversion, error handling for inputs that won’t work, or setting default units that you use all the time.

您可以轻松扩展现有功能，可能包括rem单位转换，无法使用输入的错误处理或设置您一直使用的默认单位之类的功能。

If you have any other awesome ideas for this Sass units conversion function, let us know in the comments section below.

如果您对该Sass单位转换功能还有其他很棒的想法，请在下面的评论部分中告诉我们。

> 翻译自: [https://www.sitepoint.com/converting-typographic-units-sass/][https_www.sitepoint.com_converting-typographic-units-sass]

sass css 在线转换

[Typography Units Conversion with Sass]: /images/20221123/36a5bc14cbe54a02b2471ab9e1601db7.png
[Responsive web design]: https://www.sitepoint.com/the-meaning-and-purpose-of-responsive-web-design/
[Sass]: http://sass-lang.com/
[switch statement]: https://www.sitepoint.com/jquery-switch-statement/
[if statements]: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#_if
[Sass_s percentage function]: http://sass-lang.com/documentation/Sass/Script/Functions.html#percentage-instance_method
[Sassmeister demo]: http://sassmeister.com/gist/19e7b3c68c326ccde263
[https_www.sitepoint.com_converting-typographic-units-sass]: https://www.sitepoint.com/converting-typographic-units-sass/