SCSS mixin中if / else条件的语法 [英] Syntax for if/else condition in SCSS mixin

问题描述

您好我正在尝试学习SASS / SCSS并试图重构我自己的mixin for clearfix

Hi I'm trying to learn SASS/SCSS and am trying to refactor my own mixin for clearfix

我想要的是mixin基于什么我是否通过了一个宽度的混合。

what I'd like is for the mixin to be based on whether I pass the mixin a width.

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

thoughts so far (pseudo code only as I will be including other mixins)

@mixin clearfix($width) {

   @if !$width {

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

   } @else {

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

这是我以为我可以称之为它的方式，但它是不工作。

here's how I thought I might call it, but it's not working.

@include clearfix（）;

或

@include clearfix（100％）

或

@include clearfix（960px）

我很感谢你在最佳或正确的方式上提供任何帮助！

I'd appreciate any help on the best or right way to do this!

推荐答案

你可以试试这个：

$width:auto;
@mixin clearfix($width) {

   @if $width == 'auto' {

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

   } @else {
        display: inline-block;
        width: $width;
   }
}

我不确定你的预期结果，但是设置默认值应该返回false。

I'm not sure of your intended result, but setting a default value should return false.

这篇关于SCSS mixin中if / else条件的语法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！