How to properly include an if statement inside a for loop in SCSS?

I'm a beginner with sass, so sorry if this might seem stupid.

Essentially, I'm trying to isolate grid__col--12 and give it specific properties within the if statement, and give the rest of the columns the properties contained in the else branch. However, it's not working out for me. How can I accomplish what I am trying to do?

Here is my styles.scss code:

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

//font
$base-grey: #808080;
$base-white: #ffffff;
$sheadline-weight: 100;

@mixin flexy($dis: flex, $dir: null, $justify: null) {
  display: $dis;
  flex-direction: $dir;
  justify-content: $justify;
  @content
}

@mixin size($size) {
  @if $size=='tabletup' {
    @media (min-width: 768px) {
      @content;
    }
  }
  @else if $size=='desktopup' {
    @media (min-width: 1024px) {
      @content;
    }
  }
}

// **********************************************
// _grid.scss
// styles related to the grid system and
// main container.
// major grid styles have been added here for you
// but additional styling may be needed
// **********************************************


//grid base class
.grid {
  &__row {
    @include flexy($dir: column) { 
      padding: 1em 10px;
      border: 1px red solid;
    }
    @include size(tabletup) {
      flex-direction: row;
    }
  }
  &__col {
    @for $i from 1 through 12 {
      &--#{$i} {
        @if $i==12 {
          border: 2px black solid;
          flex-direction: column;
          justify-content: space-evenly;
          border: 2px black solid;
        }
        @else {
          margin-top: 10px;
          flex-basis: 100%;
          border: 2px black solid;
          @include size(tabletup) {
            margin-top: 0;
            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
    @include size(tabletup) {

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

//gridsystem colors
$col-3: lighten($base-purple, 20%);
$col-4: lighten($base-blue, 10%);
$col-5: darken($base-green, 20%);
$col-6: darken($base-blue, 20%);
$col-7: lighten($base-red, 10%);
$col-8: lighten($base-orange, 20%);
$col-12: darken($base-green, 5%);

$grid-system: (
  3: $col-3,
  4: $col-4,
  5: $col-5,
  6: $col-6,
  7: $col-7,
  8: $col-8,
  12: $col-12
);

%grid {
  padding: 8px 0;
  font-weight: bold;
  color: grey;
}

@each $number,$color in $grid-system {
   .grid__col--#{$number}.theme__colors {
     @extend %grid;
     background-color: $color;
     @include size(tabletup) {
       @extend %grid;
       text-align: center;
     }
  }
}

//BUTTONS

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

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

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

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

.card {
  text-align: left;
}

@mixin links($text-dec: none, $color, $font-weight: null) {
  text-decoration: $text-dec;
  color: $color;
  font-weight: $font-weight;
  @content
}

//NAVIGATION
.nav {
  list-style-type: none;
  padding: 0;
  text-align: center;
  @include size (tabletup) {
    @include flexy($justify: flex-end) {
      position: relative;
      right: 5%;
    }
  }
  &__item {
    & a {
      @include links($color: inherit) {
        display: block;
        margin: 8px 0;
        padding: 8px 20px;
        &:hover {
          color: $base-white;
          background-color: $base-green;
        }
      }
    }
    @include size (tabletup) {
      margin-right: 20px;
    }
  }  
}

//TYPOGRAPHY

//link
.link {
  @include links($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
.headline--primary {
  color: $base-green;
  margin-left: 10px;
}
[class*=secondary] {
  font-weight: $sheadline-weight
}

.headline--secondary {
  text-align: left;
}


//FORM
.form {
  @include flexy($dir: column);
  &__input {
    border: none;
    border-bottom: 2px solid $base-green;
    margin-bottom: 15px;
  }
  &__label--hidden {
    display: none;
  }
}



//IMAGE

%image-styles {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  padding: 8px;
}

[class^=img] {
  @extend %image-styles;
}

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

Here is my index.html code:

<!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>

So as you can tell, my code wasn't working because that black line around the flex items shows its a row! I'm trying to make it a column, along with other properties in the if statement. How can I fix this? I thought this way of doing it was a pretty good idea if I could pull it off.

enter image description here