为什么我的每个循环在放入 mixin 时都不起作用？答案

【问题标题】：Why does my each loop not work when placed in a mixin?为什么我的每个循环在放入 mixin 时都不起作用？
【发布时间】：2019-06-01 21:03:08
【问题描述】：

所以我是一个初学者，我开始这个项目时首先在 styles.scss 中编写 CSS，然后使用 scss 工具转换其中的代码。我做了一个 each 循环来循环我的颜色图中的一组颜色，放在一个 mixin 中，然后将该 mixin 放在 [class^=btn] 下。

我不知道为什么这不起作用？

这是我的 SCSS：

//colors
$base-grey: #808080;
$base-white: #ffffff;
$base-green: #71eeb8; 
$base-blue: #2dcae6;    //base-success: #33c052;
$base-red: #ff6666;     //red
$base-orange: #ff751a; //warning
$base-purple: #8a54f7; //info

// grid base class
.grid {

  // .grid__row
  &__row {
    padding: 1em 10px;
    display: flex;
    flex-direction: column;

    // NOTE: replace with media query mixin if aiming for exceeds
    @media (min-width: 768px) {
      flex-direction: row;
    }
  }

  // .grid__col
  &__col {

    // create grid columns dynamically
    // loop through each column size
    @for $i from 1 through 12 {

      // concatenate CSS selector, ie when $i = 1,
      // selector would be .grid__col--1
      &--#{$i} {

        // base styles applied to all grid columns 
        // NOTE: could be converted to a placeholder, along with margin
        // from the  media query
        margin-top: 10px;
        flex-basis: 100%;
        border: 1px red solid;

        // NOTE: replace with media query mixin if aiming for exceeds
        @media (min-width: 768px) {

          // base stlyes applied to all grid columns
          margin-top: 0;

          // make column width a percentage of the column number / total columns
          flex-basis: #{$i / 12 * 100 + "%"} ;
        }
      }
    }
  }
}

// targets all elements with classes that begin with grid__col
[class^=grid__col] {
  // grid__col + grid__col, targets two sibling columns
  & + & {

    // NOTE: replace with media query mixin if aiming for exceeds
    @media (min-width: 768px) {

      // add grid gutter
      margin-left: 10px;
    }
  }
}

.grid {
  &__row {
    display: flex;
  }
}

//BASE
.container {
  text-align: left;
  font-family: 'Arial Narrow', Arial,sans-serif;
  color: $base-grey;
  padding: 5px;
  font-weight: 500;
}
p {
  text-align: left;
  line-height: 1.3;
}

a {
  text-decoration: none;
}

//NAVIGATION
.nav {
  list-style-type: none;
  padding: 0;
  text-align: center;
}

.nav__item a {
  display: block;
  color: inherit;
  margin: 8px 0;
  padding: 8px;
}

.nav__item a:hover {
  color: $base-white;
  background-color: $base-green;
}
//TYPOGRAPHY
//link
.link {
  color: $base-blue;
  font-weight: bold;
}

//blockquote
.blockquote {
  border-left: $base-green 8px solid;
  padding-left: 10px;
  font-style: oblique;
  font-size: 1.2em;
}

// headlines
@mixin h2-font-weight {
  font-weight: 100;
}

.headline--primary {
  color: $base-green;
  margin-left: 10px;
}

.headline--secondary {
  text-align: left;
  @include h2-font-weight;
}


//FORM
.form {
  display: flex;
  flex-direction: column;
  &__input {
    border: none;
    border-bottom: 2px solid $base-green;
    margin-bottom: 15px;
  }
  &__label--hidden {
    display: none;
  }
  & .headline--secondary {
    @include h2-font-weight;
  }
}

//BUTTONS
@mixin button-styles {
  display: block;
  width: 100%;
  border: none;
  margin-bottom: 15px;
  padding: 10px;
  color: $base-white;
  text-transform: uppercase;
  font-weight: bold;
}

$button-colors :(
  default:$base-blue,
  success:$base-green,
  error:$base-red,
  warning:$base-orange,
  info:$base-purple
);

@mixin button-colors {
  @each $button, $color in $button-colors {
    .btn--#{$button} {
      background-color: #{$color};
    }
  }
}

[class*=btn] {
  @include button-styles;
}


//IMAGE

@mixin center-images {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  padding: 8px;
}

[class^=img] {
  @include center-images;
}

.img {
  &--frame {
    border: 2px solid $base-grey;
  }

}

这是我的 HTML：

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Circles UI Kit</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/styles.css">
  <link rel="stylesheet" href="css/normalize.css">
</head>
<!-- 
    List of classes used

    Grid:
    .container
    .grid__row
    .grid__col--1 *NOT USED HERE
    .grid__col--2 *
    .grid__col--3
    .grid__col--4
    .grid__col--5
    .grid__col--6
    .grid__col--7
    .grid__col--8
    .grid__col--9
    .grid__col--10 *
    .grid__col--11 *
    .grid__col--12
    .card
    .centered
    .theme__colors
    (.grid__col--1, .grid__col--2, .grid__col--10, and .grid__col--11 are not used here in the HTML but would be good to include in the Sass)

    Typography:
    .container
    .link
    .blockquote
    .headline--primary
    .headline--secondary

    Image:
    .img--logo
    .img--frame
    .img--avatar

    Navigation:
    .nav
    .nav__item

    Buttons:
    .btn--default
    .btn--success
    .btn--error
    .btn--warning
    .btn--info
    .theme__colors

    Forms:
    .form
    .form__label--hidden
    .form__input

  -->

<body class="container">
  <div class="grid__row">
    <div class="grid__col--3">
      <a class="link" href="/">
        <img class="img--logo" alt="circles logo" src="images/logo.png">
      </a>
    </div>
    <div class="grid__col--9">
      <nav role="navigation">
        <ul class="nav">
          <li class="nav__item"><a href="#type">Typography</a></li>
          <li class="nav__item"><a href="#buttons">Buttons</a></li>
          <li class="nav__item"><a href="#forms">Form</a></li>
          <li class="nav__item"><a href="#images">Images</a></li>
          <li class="nav__item"><a href="#grid">Grid</a></li>
        </ul>
      </nav>
    </div>
  </div>

  <div class="grid__row">
    <div class="grid__col--12">
      <div class="card">
        <p>This is what the navigation menu looks like when the screen is at 769px or higher. When the screen is less
          than 769px,
          the menu will be displayed vertically.</p>
      </div>
    </div>
  </div>

  <div class="grid__row">
    <div class="grid__col--8">
      <div class="card">
        <h4 id="type" class="headline--secondary">Typography</h4>
        <h1 class="headline--primary">Take a look at this amazing headline</h1>
        <p>This is a typical paragraph for the UI Kit. <a href="#" class="link">Here is what a link might look like</a>.
          The
          typical font family for this kit is Helvetica Neue. This kit is intended for clean and refreshing web layouts.
          No jazz hands here, just the essentials to make dreams come true, with minimal clean web design. The kit comes
          fully equipped with everything from full responsive media styling to buttons to form fields. <em>I enjoy using
            italics as well from time to time</em>.
          Fell free to create the most amazing designs ever with this kit. I truly hope you enjoy not only the kit but
          this
          amazing paragraph as well. :)</p>
        <blockquote class="blockquote">You know what really gets me going? A really nice set of block quotes. That's
          right, block quotes that say, "Hey,
          I'm an article you want to read and nurture."</blockquote>
      </div>
    </div>
    <div class="grid__col--4">
      <form class="form">
        <legend id="forms" class="headline--secondary">Form Elements</legend>
        <img class="img--avatar" src="images/avatar.png" alt="Avatar">
        <label class="form__label--hidden" for="username">Username:</label>
        <input class="form__input" type="text" id="username" placeholder="Username">
        <label class="form__label--hidden" for="password">Password:</label>
        <input class="form__input" type="password" id="password" placeholder="Password">
        <button class="btn--default theme__colors" type="submit" value="Login">Login</button>
      </form>
    </div>
  </div>

  <h4 id="images" class="headline--secondary">Images</h4>

  <div class="grid__row">
    <div class="grid__col--6">
      <img class="img--frame" src="images/image.png" alt="sample image">
    </div>
    <div class="grid__col--6">
      <img class="img--avatar" src="images/avatar.png" alt="Avatar">
    </div>
  </div>

  <h4 id="buttons" class="headline--secondary">Buttons</h4>

  <div class="grid__row">
    <div class="grid__col--12">
      <button class="btn--default theme__colors">default</button>
      <button class="btn--success theme__colors">success</button>
      <button class="btn--error theme__colors">error</button>
      <button class="btn--warning theme__colors">warning</button>
      <button class="btn--info theme__colors">info</button>
    </div>
  </div>

  <h4 id="grid" class="headline--secondary">Grid System</h4>

  <div class="grid__row">
    <div class="grid__col--12 theme__colors">.grid__col--12</div>
  </div>
  <div class="grid__row">
    <div class="grid__col--6 theme__colors">.grid__col--6</div>
    <div class="grid__col--6 theme__colors">.grid__col--6</div>
  </div>
  <div class="grid__row">
    <div class="grid__col--4 theme__colors">.grid__col--4</div>
    <div class="grid__col--4 theme__colors">.grid__col--4</div>
    <div class="grid__col--4 theme__colors">.grid__col--4</div>
  </div>
  <div class="grid__row">
    <div class="grid__col--3 theme__colors">.grid__col--3</div>
    <div class="grid__col--3 theme__colors">.grid__col--3</div>
    <div class="grid__col--3 theme__colors">.grid__col--3</div>
    <div class="grid__col--3 theme__colors">.grid__col--3</div>
  </div>
  <div class="grid__row">
    <div class="grid__col--5 theme__colors">.grid__col--5</div>
    <div class="grid__col--7 theme__colors">.grid__col--7</div>
  </div>
  <div class="grid__row">
    <div class="grid__col--8 theme__colors">.grid__col--8</div>
    <div class="grid__col--4 theme__colors">.grid__col--4</div>
  </div>
  <div class="grid__row">
    <div class="grid__col--7 theme__colors centered">.centered .grid__col--7</div>
  </div>

</body>

</html>

【问题讨论】：

标签： html css sass mixins scss-mixins

【解决方案1】：

你错过了两件事：

按钮颜色的混合需要：

@mixin button-colors {
  @each $button, $color in $button-colors {
    &.btn--#{$button} {
      background-color: #{$color};
    }
  }
}

& 在 .btn 之前。

你没有调用你的 mixin。你需要写：

[class*=btn] {
  @include button-styles();
  @include button-colors();
}

【讨论】：

您好，谢谢您的回复！顺便说一句，为什么我必须在 btn 前面放一个 & 号？而且当包含mixins时，为什么我必须在最后加上“()”？
() 不是必须的，可以去掉。您必须添加一个＆符号，因为您从按钮类中调用它，所以您不希望“btn”内部的类而是同一级别。现在对你有用吗？
但是本身并没有孤立的 btn，只有一堆带有修饰符的 btn 类。 & 号指的是父选择器，但 btn 没有父选择器？如果你只是写.btn，那还有什么问题？
它取决于你在哪里调用这个 mixin。如果你想写：@each $button, $color in $button-colors { .btn--#{$button} { background-color: #{$color}; } } 没有 mixin 就可以了。