メディアクエリを用いてsassの変数を画面幅ごとに変更してレイアウトを制御したい

メディアクエリを用いてsassの変数を画面幅ごとに変更してレイアウトを制御したいです。
下記の図のように、画面幅ごとに、下記を変更します。

*1行に表示されるアイテムの数
*アイテム間の幅

上記を実現するため、２点質問があります。

①メディアクエリを用いてsassの変数を、画面幅ごとに変更したいです。
下記のようにやってみたのですが、うまくいきません。
（※メディアクエリにはmixinを使用しています。全体的なソースは下にあります。）
メディアクエリを用いてsassの変数を、画面幅ごとに変更する方法はありますか？

　　&__item {
        //item同士のmargin横の幅
        $mw-item: 30px;

        //1行当たりのitemの個数
        $item-num: 3;

        //①メディアクエリによって上記の変数の値を変更したい-------------------

        @include tab {
            $mw-item: 15px;
            $item-num: 2;
        }

        @include sp {
            $mw-item: 10px;
            $item-num: 1;
        }

        //calc(100%/1行当たりの個数 - (item同士margin幅 * 1行当たりの個数-1) / 1行当たりの個数 
        flex-basis: calc(100% / #{$item-num} - #{$mw-item} * (#{$item-num} - 1) / #{$item-num});
        margin: 0 $mw-item 20px 0;

②また、nth-child()の括弧内にも変数を用いて、下記のようにしたいです
$item-num=3なら、3n
$item-num=2なら、2n
nth-child($item-num*n)は試したのですが、出来ませんでした。

        //② 下記のように直接書くのではなく、$item-num(1行当たりのitemの個数)を用いて記述したい-------------------
        // $item-num * n...のような感じ。。。
        &:nth-child(3n) {
            margin-right: 0;
        }
        // ----------------------------------------------------------------------------

全体的なソースは下記の通りとなります。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>The Company</title>
    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>
    <div class="wrapper">
        <section class="card section" id="card">
            <div class="card__inner inner">
                <ul class="card__lists">
                    <li class="card__item">
                        <img src="img/card_img01.jpg" alt="" class="card__item-img">
                        <p class="card__item-ttl">タイトルタイトル</p>
                        <p class="card__item-txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                    </li>
                    <li class="card__item">
                        <img src="img/card_img01.jpg" alt="" class="card__item-img">
                        <p class="card__item-ttl">タイトルタイトル</p>
                        <p class="card__item-txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                    </li>
                    <li class="card__item">
                        <img src="img/card_img01.jpg" alt="" class="card__item-img">
                        <p class="card__item-ttl">タイトルタイトル</p>
                        <p class="card__item-txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                    </li>
                    <li class="card__item">
                        <img src="img/card_img01.jpg" alt="" class="card__item-img">
                        <p class="card__item-ttl">タイトルタイトル</p>
                        <p class="card__item-txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                    </li>
                    <li class="card__item">
                        <img src="img/card_img01.jpg" alt="" class="card__item-img">
                        <p class="card__item-ttl">タイトルタイトル</p>
                        <p class="card__item-txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                    </li>
                    <li class="card__item">
                        <img src="img/card_img01.jpg" alt="" class="card__item-img">
                        <p class="card__item-ttl">タイトルタイトル</p>
                        <p class="card__item-txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                    </li><!-- card__item  -->
                </ul><!-- card__lists  -->
            </div><!-- card__inner  -->
        </section><!-- card  -->

    </div><!-- wrapper  -->
</body>

</html>

CSSについては、2種類貼っておきます。
（※ソースは長くなってしまいましたが、見ていただきたい部分は「card」の部分のみとなります。）

★標題の通りsassの変数を使用しようと試みたversion（うまくいってません）

//-----------------------------------------------------
// 変数
//-----------------------------------------------------
$c-section: #efefef;

$w-pc: 1086px; // PC
$w-tab: $w-pc - 1; // タブレット
$w-sp: 767px; // スマホ

//-----------------------------------------------------
// mixin
//-----------------------------------------------------
@mixin pc {

    @media (min-width: ($w-pc)) {
        @content;
    }
}

@mixin tab {

    @media (max-width: ($w-tab)) {
        @content;
    }
}

@mixin sp {

    @media (max-width: ($w-sp)) {
        @content;
    }
}

//-----------------------------------------------------
// 共通
//-----------------------------------------------------
html {
    font-size: 62.5%;
}

body {
    font-size: 1.4rem;
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    background-color: $c-section;
    color: #333333;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

.wrapper {
    overflow: hidden;
}

.inner {
    margin: 0 auto;
    max-width: 100%;
    padding: 0 15px;
    width: $w-pc;

    @include pc {
        padding: 0;
    }

}

//-----------------------------------------------------
// ★  card (！質問該当セクションはここです！)  ★
//-----------------------------------------------------

.card {
    &__lists {
        display: flex;
        flex-wrap: wrap;
    }

    &__item {

        //item同士のmargin横の幅
        $mw-item: 30px;

        //1行当たりのitemの個数
        $item-num: 3;

        //①メディアクエリによって上記の変数の値を変更したい-------------------

        @include tab {
            $mw-item: 15px;
            $item-num: 2;
        }

        @include sp {
            $mw-item: 10px;
            $item-num: 1;
        }

        //calc(100%/1行当たりの個数 - (item同士margin幅 * 1行当たりの個数-1) / 1行当たりの個数 
        flex-basis: calc(100% / #{$item-num} - #{$mw-item} * (#{$item-num} - 1) / #{$item-num});
        margin: 0 $mw-item 20px 0;

        // ----------------------------------------------------------------

        padding: 16px 16px 28px;
        background-color: white;
        border-radius: 4px;


        //② 下記のように直接書くのではなく、$item-num(1行当たりのitemの個数)を用いて記述したい-------------------
        // $item-num * n...のような感じ。。。
        &:nth-child(3n) {
            margin-right: 0;
        }
        // ----------------------------------------------------------------------------

        &-img {
            width: 100%;
        }

        &-ttl {
            font-size: 2rem;
            font-weight: bold;
            margin: 26px 0 20px;
        }

        &-txt {
            font-size: 1.6rem;
            font-weight: bold;
            line-height: 1.5;
        }
    }

}

★sassの変数を使用しなかったversion（正常に動きます）

//-----------------------------------------------------
// 変数
//-----------------------------------------------------
$c-section: #efefef;

$w-pc: 1086px; // PC
$w-tab: $w-pc - 1; // タブレット
$w-sp: 767px; // スマホ

//-----------------------------------------------------
// mixin
//-----------------------------------------------------
@mixin pc {

    @media (min-width: ($w-pc)) {
        @content;
    }
}

@mixin tab {

    @media (max-width: ($w-tab)) {
        @content;
    }
}

@mixin sp {

    @media (max-width: ($w-sp)) {
        @content;
    }
}

//-----------------------------------------------------
// 共通
//-----------------------------------------------------
html {
    font-size: 62.5%;
}

body {
    font-size: 1.4rem;
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    background-color: $c-section;
    color: #333333;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

.wrapper {
    overflow: hidden;
}

.inner {
    margin: 0 auto;
    max-width: 100%;
    padding: 0 15px;
    width: $w-pc;

    @include pc {
        padding: 0;
    }

}

//-----------------------------------------------------
// ★  card (！質問該当セクションはここです！)  ★
//-----------------------------------------------------

.card {
    &__lists {
        display: flex;
        flex-wrap: wrap;
    }

    &__item {

        // ①の部分----------------------------------------------
        flex-basis: calc(100% / 3 - 30px * (3 - 1) / 3);
        margin: 0 30px 20px 0;

        @include tab {
            flex-basis: calc(100% / 2 - 20px * (2 - 1) / 2);
            margin: 0 20px 20px 0;
        }

        @include sp {
            flex-basis: calc(100% / 1 - 20px * (1 - 1) / 1);
            margin: 0 0 40px 0;
        }

        // ----------------------------------------------------------------



        padding: 16px 16px 28px;
        background-color: white;
        border-radius: 4px;


        // ②の部分----------------------------------------------------------------
        @include pc {
            &:nth-child(3n) {
                margin-right: 0;
            }
        }

        @include tab {
            &:nth-child(2n) {
                margin-right: 0;
            }
        }

        // ----------------------------------------------------------------




        &-img {
            width: 100%;
        }

        &-ttl {
            font-size: 2rem;
            font-weight: bold;
            margin: 26px 0 20px;
        }

        &-txt {
            font-size: 1.6rem;
            font-weight: bold;
            line-height: 1.5;
        }


    }

}

長くなって申し訳ありませんが、よろしくお願いいたします。

x_x

2019/09/26 09:12

Sass が CSS を書き出すための仕組みに過ぎず、端末がアクセスする前に完了していることは理解しているでしょうか？

Silky

2019/09/26 11:18

コメントありがとうございます！正直あまり理解できていないです。。。 SASSがコンパイルされてCSSとして書き出された時点は、「端末がアクセスする前」ということですか？今回の件で、画面幅に応じて変数の値を変えるのはうまくいかないっていう事象はなんとなくわかった（理由は理解していない）んですが、もし、「端末がアクセスする前」にSASSがCSSに変換されているのであれば、そもそも変数がどうこうというより、メディアクエリ自体が成り立たないのではないでしょうか？例えばpcサイズだとwidth:100px、スマホサイズだとwidth:50pxとしても、 SASSがCSSに変換される時点は「端末がアクセスする前」なので、まだ画面幅がわかっていない状態なのではないでしょうか？