Css @extend的SASS函数

我试图实现的只是sass中

@extend

函数的一个较短版本

我有一堆的类，我在我的网站上使用它们来进行布局

示例：

.grid1 {width:40px;}
.grid2 {width:80px;}
.grid3 {width:120px;}
.grid4 {width:160px;}
.grid5 {width:200px;}

我知道您可以使用扩展功能删除站点上所有重复的css，包括：

.class{@extend.grid1}

哪个会输出

.class{width:40px}

我想要的是更简单一点的东西

.class{grid（1）}

以下是我尝试过的：

@function grid($n){
  @extend unquote(".grid#{$n}");
}

显然这是行不通的，有什么想法吗？
@SASS中的函数
是用来操作值的。因此，这不起作用的原因是，您试图返回选择器和声明块。这就是
mixin
的用途

一种方法是：

$grids: ((5, 40), (10, 80), (15, 120), (20, 160));

@mixin grid($n, $fluid: false) {
    @if($fluid) {
        width: nth(nth($grids, $n), 1) + "%";
    } @else {
        width: nth(nth($grids, $n), 2) + "px";
    }
}

.foo {
  @include grid(3);
}

.bar {
   @include grid(4, true);
}

产生：

.foo {
  width: "120px"; }

.bar {
  width: "20%"; }

SASS中的
@函数
用于操作值。因此，这不起作用的原因是，您试图返回选择器和声明块。这就是
mixin
的用途

一种方法是：

$grids: ((5, 40), (10, 80), (15, 120), (20, 160));

@mixin grid($n, $fluid: false) {
    @if($fluid) {
        width: nth(nth($grids, $n), 1) + "%";
    } @else {
        width: nth(nth($grids, $n), 2) + "px";
    }
}

.foo {
  @include grid(3);
}

.bar {
   @include grid(4, true);
}

产生：

.foo {
  width: "120px"; }

.bar {
  width: "20%"; }

我想我可能是想得太多了，我已经有了一个生成网格css的函数，我应该重新使用它，但是你的解决方案是有效的，所以我会让它成为正确的：）谢谢你，伙计！好的，谢谢，没问题。：）但也许我误解了你的问题？也许你误解了：）鉴于这确实是一个全新的问题，我确实在这里发布了我的新问题：你介意看一看吗？Sass的函数不需要在Ruby中完成。Sass有自己的
@function
构造来创建函数。在Ruby中创建函数通常只有在Sass缺少创建它所需的功能时才能完成（例如，搜索和替换功能，或检查文件系统的功能）。我想我可能是想得太多了，我已经有了一个生成网格css的函数，我应该重新使用它，但是你的解决方案是有效的，所以我会让它成为正确的：）谢谢你，老兄！好的，谢谢，没问题。：）但也许我误解了你的问题？也许你误解了：）鉴于这确实是一个全新的问题，我确实在这里发布了我的新问题：你介意看一看吗？Sass的函数不需要在Ruby中完成。Sass有自己的
@function
构造来创建函数。在Ruby中创建函数通常只在Sass缺少创建函数所需的功能（例如，搜索和替换函数，或检查文件系统的函数）时才完成。