如何在SASS中将整数转换为十六进制

2023-12-31

代替类似的东西地图数据结构 http://chriseppstein.github.ioChris Eppstein 提到 SASS 正在进行的工作,我正在尝试实现类似的目标 - 将字符串映射到相应的十六进制值,该值将用于指定 CSS 的 unicode 字符content财产。 (我正在尝试重构一些字体图标 SASS 代码。)

目前我有一些基本的东西,例如:

/*icon1  -->  \F000
  icon2  -->  \F001
  icon3  -->  \F002*/

@function u-char($name) {
    @if $name == icon1 {
        @return "000";
    } @else if $name == icon2 {
        @return "001";
    } @else if $name == icon3 {
        @return "001";
    }
}

@mixin icon-class($name) {
    ...
    content: "\f#{u-char($name)}";
    ...
}

但我实际上正在尝试映射大量字符,因此这种方法很困难。我希望能够做类似的事情:

@function u-char($name) {
    $i: 0;
    $itemList: item1, item2, item3;

    @each $currItem in $itemList {
        @if $name == item1 {
            @return i-to-hex-str($i);
        }
        $i: $i + 1;
    }
}

SASS 中有什么可以将整数转换为十六进制字符串吗?还有另一种优雅的方法吗?


要回答您帖子中的最后一个问题, “是否有任何东西可以在 SASS 中进行整数到十六进制字符串的转换?”。嗯……不是内置的,但我认为这相当清楚地实现了这一点,并且代码行相对较少:

/** Returns an at least one byte hex value */
@function dec-to-hex($d) {
    $hexVals: "A" "B" "C" "D" "E" "F";
    $base: 16;
    $quotient: $d;
    $result: "";
    @if $d == 0 {
        $result: "00";
    }
    @while $quotient != 0 {
        $mod: $quotient % $base;
        $quotient: floor($quotient / $base);
        @if $mod > 9 {
            $mod: nth($hexVals, $mod - 9);
        }
        @if $d < $base {
            $result: "0" + $mod;
        } @else {
            $result: $mod + $result;
        }
    }
    @return $result;
}

这不会在字符串前面添加十六进制限定符(例如“0x”或“#”),但您可以将其硬编码到最后一行(@return "#" + $result;),或者在调用该函数时就地应用它。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在SASS中将整数转换为十六进制 的相关文章

  • 粘性背景图像/使用 CSS

    我目前正在创建我的第一个网站 并且即将完成 我在标题下为主体使用背景图像 我发现每个页面都有一个问题 因为它们的高度都不同 这使得我背景图像的当前设置放大图片以适合整个页面 我想做的是将背景图像设置为 粘性 我的想法是 背景图像将直接位于标
  • 在什么情况下,使用 HTTP/2 单独加载图像会比使用 HTTP/1.1 中的精灵一次加载所有图像慢?

    HTTP 2 使多路复用连接成为可能 从而消除了与服务器的多个连接的需要 通过单个连接 可以将许多单独的图像发送到客户端 这避免了将多个图像组合成一个并使用 CSS 将其分开的旧图像精灵模式 我很好奇精灵在 HTTP 2 世界中是否仍然会更
  • Radiobutton-带有纯 html/css 的按钮

    是否可以创建像这样的单选按钮JQuery http jqueryui com demos button radio那些 用纯html css thanks 试试这个小提琴 http jsfiddle net mcXm7 1 http jsf
  • 在线 CSS 压缩不会消除 IE 黑客攻击

    是否有在线 CSS 压缩器不能消除任何 CSS 浏览器黑客攻击 例如 使用 cleancss com http www cleancss com 我设置的选项没有区别 它总是会删除 display用于 IE 显示内联块 hack a bor
  • 更改 Jumbotron 不透明度并使其全宽,而不影响字体和按钮

    想问一下如何更改 Jumbotron 不透明度并使其全宽而不影响字体和按钮的不透明度 jumbotron special text align center background attachment scroll background i
  • 使文本背景透明但不使文本本身透明

    所以我遇到了问题 我环顾四周 但没有运气 我想让我的身体背景透明 但让文本不透明 就像现在一样 我继续使两者保持相同的不透明度 这是我的代码 charset utf 8 body font 100 1 4 Verdana Arial Hel
  • 在 html 中显示表单时使用 table 标签是不是不好的设计?

    我一直听到这样的话div标签应该用于布局目的 而不是table标签 那么这也适用于表单布局吗 我知道表单布局仍然是一个布局 但似乎使用以下命令创建表单布局divs 需要更多html and css 因此 考虑到这一点 表单布局应该使用div
  • 整个页面都是玻璃板

    有没有一种简单的方法可以在整个 HTML 页面上拥有一个 玻璃窗格 而不管缩放 幻灯片事件 平台 浏览器 移动 桌面 我所说的 简单 是指纯 CSS 支持 而不是插件 后备 插件建议也可能有用 Thanks 如果您只是指所有内容之上的一层
  • jQuery Masonry 和 CSS3

    如何在保持砖石布局的同时将 CSS3 过渡与当前图像结合起来 这是我的html div img class bottom src images div
  • 如何使用 Angular CLI 添加应用程序范围的 CSS 文件?

    我想向我的 Angular 2 应用程序添加一些分片样式 例如字体和配色方案等将在任何地方使用的东西 过去 我总是通过在索引页面添加这样的标签来完成此操作 这不适用于 CLI 用于为应用程序提供服务的任何内容 我尝试在构建后手动将 css
  • onClick 事件适用于触摸屏设备上的触摸吗?

    我用过onclick我的网站上的活动 但是 当我在谷歌浏览器的开发人员模式移动视图中打开它时 触摸使用鼠标单击的元素没有任何反应 所以我的问题是 我还必须添加吗ontouch事件连同onclick事件或 onClick 事件适用于所有触摸屏
  • 使用仅 CSS 菜单正确显示第三层子菜单

    我正在开发一个新网站 并且 css 菜单遇到问题 通过示例更容易解释 这是该网站的链接 http www webau net CSFF index asp http www webau net CSFF index asp 在 Home 父
  • CSS 关键帧动画的随机“起点”

    我有一个带有垂直滚动背景图像的框列表 keyframes movie 0 background position 50 5 50 background position 50 95 0 background position 50 5 mo
  • CSS 中“!important”的反义词是什么?

    我正在构建一个 jQuery 插件 它使用 CSS 样式向嵌套 DIV 标签添加颜色和边距 由于我宁愿将插件保留为单个文件 因此我的代码使用 jQuery 将这些颜色和边距作为 CSS 属性直接添加到 DIV 中 css 方法 这些属性的值
  • 图像上的文本和背景颜色叠加

    我正在尝试创建一个与图像大小完全匹配的纯色叠加层 并在该叠加层上显示文本 如果可能的话 我想仅使用 HTML 和 CSS 来完成此操作 图像可以是任何大小 并且将调整大小以适合其父容器并居中 像这样的东西 不起作用 HTML div cla
  • 如何将内部 div 与外部 div 的底部对齐?

    我需要将内部 div 与外部 div 的底部对齐 我的代码如下所示 div class myOuterDiv div class div1 floatLeft Variable content here div div class div2
  • .addClass 仅添加到无序列表中单击的项目符号

    我有一个简短的无序列表 其中有两个项目符号 我添加了一些 Javascript 这样当我单击项目符号时 它会向其中添加一个类 问题是 它将该类添加到所有现有的 li 中 而不仅仅是我单击的那个 这是 JSFiddle http jsfidd
  • 在CSS中重置Margins/Padding时使用*是错误的吗?

    应该避免以下内容 还是应该因其简单性而受到赞扬 作为记录 我在我构建的每个站点中都使用它 但我注意到它并不存在于许多主流 CSS 重置框架中 他们是否也不使用它 margin 0 padding 0 最好不要使用它 因为它会导致表单元素出现
  • 电子邮件通讯未正确呈现

    我是 CSS 和 HTML 新手 我有一个包含 HTML 和 CSS 代码的电子邮件模板 我在新闻通讯模板的右上角放置了一个粉色圆圈框 http www pedersenshotell se newsletter http www pede
  • CSS 动画在 Internet Explorer 10 和 11 中不起作用

    以下 css 动画在 Chrome Mozilla Opera 浏览器中完美运行 但在 Internet Exporer 10 和 11 中不起作用 出了什么问题 请参见http jsfiddle net bm72w3n3 http jsf

随机推荐