Breaking News: Grepper is joining You.com. Read the official announcement!

scss mixin with parameters

Add Answer

Salih Zorer answered on February 7, 2023 Popularity 7/10 Helpfulness 2/10

answer scss mixin with parameters

related mixin in scss

related scss sass mixin example

scss mixin with parameters

Comment

/*
In this mixin $image is a required parameter but x & y are optional because they
have default values.
*/
@mixin replace-text($image, $x: 50%, $y: 50%) {
  text-indent: -99999em;
  overflow: hidden;
  text-align: left;

  background: {
    image: $image;
    repeat: no-repeat;
    position: $x $y;
  }
}

.mail-icon {
  @include replace-text(url("/images/mail.svg"), 0);
}

Popularity 7/10 Helpfulness 2/10 Language css

Source: sass-lang.com

Tags: css parameters

Link to this answer
Share Copy Link

Contributed on Mar 25 2023

Salih Zorer

0 Answers Avg Quality 2/10

Closely Related Answers

mixin in scss

Comment

@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin horizontal-list {
  @include reset-list;

  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: 2em;
    }
  }
}

nav ul {
  @include horizontal-list;
}

Popularity 9/10 Helpfulness 3/10 Language css

Source: sass-lang.com

Tags: css

Link to this answer
Share Copy Link

Contributed on Feb 07 2023

Ashraf Uzzaman

0 Answers Avg Quality 2/10

scss sass mixin example

Comment

scss sass mixin example

// Set a default value
$default-padding: 10px;
@mixin pad($n: $default-padding) {
  padding: $n;
}
body {
  @include pad(15px);
}

Popularity 9/10 Helpfulness 2/10 Language css

Source: devhints.io

Tags: css

Link to this answer
Share Copy Link

Contributed on Apr 18 2023

Dark Dogfish

0 Answers Avg Quality 2/10

scss mixin with parameters

Contents

More Related Answers

scss mixin with parameters

Closely Related Answers

mixin in scss

scss sass mixin example

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.