SCSS mixin中if / else条件的语法

条件 CSS

小小MandyGil

2020-03-18

嗨，我正在尝试学习SASS / SCSS，并试图为clearfix重构我自己的mixin

我想要的是mixin基于我是否将mixin传递为宽度。

到目前为止的想法（仅伪代码，因为我将包括其他mixins）

@mixin clearfix($width) {

   @if !$width {

    // if width is not passed, or empty do this

   } @else {

        display: inline-block;
        width: $width;
   }
}

我以为我可以这样称呼它，但是它没有用。

@include clearfix();

要么

@include clearfix(100%)

要么

@include clearfix(960px)

我将以最好或正确的方式为您提供帮助！

第2012篇《SCSS mixin中if / else条件的语法》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共1个回答
Gil番长Stafan 2020.03.18

您可以将参数默认设置为null或false。
这样，测试值是否已作为参数传递将更短。

@mixin clearfix($width: null) {

  @if not ($width) {

    // if width is not passed, or empty do this

  } @else {

    display: inline-block;
    width: $width;

  }
}

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android