Mixin SASS qui applique certaines règles lorsque nous l'appelons

Question

Je voudrais créer un mixin SASS / LESS qui demande si une variable est égale à une valeur, puis appliquer certaines règles CSS.

@mixin myTest($myVar: $num) {
    @if ($myVar == $num) {
      /* Apply rules if $myVar is set $num - I DO NOT KNOW WHAT SHOULD BE THERE */
    } @else {
      /* Do nothing */
    }
}

Et puis j'aimerais utiliser mon mix de cette façon:

$num: 1;

@include myTest(1) {
    h1 {
       color: blue;
       background: red;
    }
}

@include myTest(2) {
    h1 {
       color: yellow;
       background: green;
    }
}

Ainsi, seules les règles entre parenthèses de @include myTest(1) { ... } sont appliquées.

Le problème est que je ne sais pas comment faire ça.

css sass

1

BB-8 28 nov. 2017 à 16:49

Answer 1

Vous devez utiliser @content dans votre mixin pour que tout ce qui était dans votre mixin soit poussé à travers

$num: 1;
@mixin myTest($myVar: $num) {

    @if ($myVar == $num) {
      /* Apply rules if $myVar is set $num - I DO NOT KNOW WHAT SHOULD BE THERE */
      @content; // this is how you get it in here
    } @else {
      /* Do nothing */
    }
}

@include myTest(1) {
  h1 {
    background:red;
  }
}

@include myTest(2) {
  h1 {
    background:blue;
  }
}

https://codepen.io/anon/pen/YEJKRm

Espère que cela aide

0

Dirk 28 nov. 2017 à 13:59

Answer 2

myTest vérifie la valeur de la variable $myVar et applique les règles css passées via @content - voir documentation.

@mixin myTest($myVar: $num) {
  @if ($myVar= $num) {
    @content;
  }
}

$num: 1;

@include myTest(1) {
  h1 {
    color: blue;
    background: red;
  }
}

@include myTest(2) {
  h1 {
    color: yellow;
    background: green;
  }
}

1

3rdthemagical 28 nov. 2017 à 14:05

Answer 3

Je ne suis pas tout à fait sûr d'avoir bien compris votre question, mais il semble que ce que vous deviez faire est de déplacer vos règles CSS dans votre mixin:

@mixin myTest($num) {
    @if $num === 1 {
       color: blue;
       background: red;
    } @else {
       color: yellow;
       background: green;
    }
}


$num: 1;
h1 {
  @include myTest($num);
}

0

delinear 28 nov. 2017 à 13:57

Mixin SASS qui applique certaines règles lorsque nous l'appelons

3 réponses

Questions connexes

De nouvelles questions

css