css - @extend 的 SASS 函数

Question

我想要实现的只是@extendsass 中函数的较短版本。

我有一堆类，我在整个网站上都使用它们进行布局。

例子：

.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}");
}

显然这不起作用，有什么想法吗？

Answer 1

@functions在 SASS 中是用来操作值的。所以这不起作用的原因是你试图返回选择器和声明块。这是mixins为了什么。

一种方法是：

$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%"; }