文章/答案/技术大牛

发布

社区首页 >问答首页 >@extend的SASS函数

问@extend的SASS函数
EN

Stack Overflow用户

提问于 2013-06-27 06:03:32

回答 1查看 314关注 0票数 1

我想要实现的只是sass中@extend函数的一个更短的版本。

我有一堆的类，我用在我的网站上的布局。

示例：

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

我知道您可以使用extend函数在整个站点中删除重复的css，包括：

.class {@extend .grid1}

它的输出

.class {width:40px}

我想要的是一些更简单的东西。

.class{grid(1)};

以下是我尝试过的：

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

很明显这不管用，有什么想法吗？

css

function

sass

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-06-27 06:24:02

SASS中的@functions用于操作值。因此，这将不能工作的原因是，您正在尝试返回选择器和声明块。这就是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%"; }

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/17335623

复制

相似问题

问@extend的SASS函数
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问@extend的SASS函数EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问@extend的SASS函数
EN