热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

我可以在Sass中使用多个值吗?-CanIusemultiplevaluesforonepropertyinSass?

Slightlyrelatedtomyquestionhere.这和我的问题有点关系。SayinSass,ifIwishtousemultiplevaluesfo

Slightly related to my question here.

这和我的问题有点关系。

Say in Sass, if I wish to use multiple values for one property, is there a way that I can achieve this using a mixin?

在Sass中,如果我想要为一个属性使用多个值,是否有一种方法可以使用mixin实现它?

NB: I know that my usage of @each is wrong but this helps to illustrate what I'm trying to do.

NB:我知道我使用@each是错误的,但这有助于说明我正在尝试做什么。

So far I have the following

到目前为止,我有如下内容。

@mixin grid-fractions($grid-type, $args) {
  @supports (display:grid) {
    display: grid;    
    #{$grid-type}: @each $args #{$args}fr;
  }
}

It's usage is as follows: @include('grid-template-rows', 2, 1, 1); And I'd like to get the mixin to output something like this:

它的用法如下:@include('grid-template-rows', 2,1,1);我想让mixin输出这样的东西:

@supports (display:grid) {
    display: grid;    
    grid-template-rows: 2fr 1fr 1fr;
  }

I know that $args lets you include multiple values in a mixin but it's obviously not working as I'm probably not using it correctly!

我知道$args让您在mixin中包含多个值,但它显然不能正常工作,因为我可能没有正确地使用它!

1 个解决方案

#1


0  

Why not just @include('grid-template-rows', '2fr 1fr 1fr'); ?

为什么不只是@include('grid-template-rows', '2fr 1fr');吗?

Or

Include a mixin and pass parameters as an arglist. It can be done different ways depending on what you want.

包括一个mixin和传递参数作为一个arglist。它可以通过不同的方式,取决于你想要什么。

  @mixin grid($template-rows:null,$template-cols:null,$template-areas:null){
    @supports (display:grid) {
      display:grid;
      $grid-rows:();
      $grid-cols:();
      $grid-areas:();

      @each $rows in $template-rows{
        $grid-rows: append($grid-rows, #{$rows}fr);
      }
      @each $cols in $template-cols{
        $grid-cols: append($grid-cols, #{$cols}fr);
      }
      @each $areas in $template-areas{
        $grid-areas: append($grid-areas, #{$areas}fr);
      }
      grid-template-rows:#{$grid-rows};
      grid-template-columns:#{$grid-cols};
      grid-template-areas:#{$grid-areas};
    }
  }

 

 

  html{
    @include grid(1 2 3, 4 5 6, 7 8 9 );
  }

 

 

        /*
          // Outputs:
          @supports (display: grid) {
            html {
              display:grid;
              grid-template-rows: 1fr 2fr 3fr;
              grid-template-columns: 4fr 5fr 6fr;
              grid-template-areas: 7fr 8fr 9fr;
            }
          }
        */

推荐阅读
  • TPL实现Task.WhileAll扩展方法
    文章翻译整理自NikolaMalovic两篇博文:Task.WhileAllAwaitabletaskprogressreporting当Task.WhenAll遇见 ... [详细]
  • 判断编码是否可立即解码的程序及电话号码一致性判断程序
    本文介绍了两个编程题目,一个是判断编码是否可立即解码的程序,另一个是判断电话号码一致性的程序。对于第一个题目,给出一组二进制编码,判断是否存在一个编码是另一个编码的前缀,如果不存在则称为可立即解码的编码。对于第二个题目,给出一些电话号码,判断是否存在一个号码是另一个号码的前缀,如果不存在则说明这些号码是一致的。两个题目的解法类似,都使用了树的数据结构来实现。 ... [详细]
  • 如何自行分析定位SAP BSP错误
    The“BSPtag”Imentionedintheblogtitlemeansforexamplethetagchtmlb:configCelleratorbelowwhichi ... [详细]
  • VScode格式化文档换行或不换行的设置方法
    本文介绍了在VScode中设置格式化文档换行或不换行的方法,包括使用插件和修改settings.json文件的内容。详细步骤为:找到settings.json文件,将其中的代码替换为指定的代码。 ... [详细]
  • Nginx使用(server参数配置)
    本文介绍了Nginx的使用,重点讲解了server参数配置,包括端口号、主机名、根目录等内容。同时,还介绍了Nginx的反向代理功能。 ... [详细]
  • 目录实现效果:实现环境实现方法一:基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ... [详细]
  • CF:3D City Model(小思维)问题解析和代码实现
    本文通过解析CF:3D City Model问题,介绍了问题的背景和要求,并给出了相应的代码实现。该问题涉及到在一个矩形的网格上建造城市的情景,每个网格单元可以作为建筑的基础,建筑由多个立方体叠加而成。文章详细讲解了问题的解决思路,并给出了相应的代码实现供读者参考。 ... [详细]
  • 本文介绍了在mac环境下使用nginx配置nodejs代理服务器的步骤,包括安装nginx、创建目录和文件、配置代理的域名和日志记录等。 ... [详细]
  • 本文介绍了Python字典视图对象的示例和用法。通过对示例代码的解释,展示了字典视图对象的基本操作和特点。字典视图对象可以通过迭代或转换为列表来获取字典的键或值。同时,字典视图对象也是动态的,可以反映字典的变化。通过学习字典视图对象的用法,可以更好地理解和处理字典数据。 ... [详细]
  • 前端开发工程师必读书籍有哪些值得推荐?我们直接进入代码复杂版式设置,如下所示,先写些标签,源码在这个链接里面:https://codepen.io/Shadid ... [详细]
  • 浅解XXE与Portswigger Web Sec
    XXE与PortswiggerWebSec​相关链接:​博客园​安全脉搏​FreeBuf​XML的全称为XML外部实体注入,在学习的过程中发现有回显的XXE并不多,而 ... [详细]
  • Nginx使用AWStats日志分析的步骤及注意事项
    本文介绍了在Centos7操作系统上使用Nginx和AWStats进行日志分析的步骤和注意事项。通过AWStats可以统计网站的访问量、IP地址、操作系统、浏览器等信息,并提供精确到每月、每日、每小时的数据。在部署AWStats之前需要确认服务器上已经安装了Perl环境,并进行DNS解析。 ... [详细]
  • 本文分享了一个关于在C#中使用异步代码的问题,作者在控制台中运行时代码正常工作,但在Windows窗体中却无法正常工作。作者尝试搜索局域网上的主机,但在窗体中计数器没有减少。文章提供了相关的代码和解决思路。 ... [详细]
author-avatar
大女人小诺
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有