S CSS как получить доступ к элементам стиля в другом файле

Question

Я новичок в S CSS и, без сомнения, это тупой вопрос. У меня есть файл .s css, и я хочу получить доступ к элементам стиля в другом файле. css и @extend с ними.

Это работает, но это не то, что мне нужно.

.w3-table {
    border-collapse:collapse;
    border-spacing:0;
    width:100%;
    display:table
}

tr:nth-child(even){
    background-color:#f1f1f1
}

tr{border-bottom:1px solid rgb(221, 221, 221)}

.mxa-records {
    @extend .w3-table;
    @extend tr:nth-child(even);
    @extend tr;
    color:red;
}

Я хочу получить .w3-таблицу от w3. css, поэтому, насколько я понимаю, я хочу @use w3. css следующим образом.

@use 'w3';

tr:nth-child(even){
    background-color:#f1f1f1
}

tr{border-bottom:1px solid rgb(221, 221, 221)}

.mxa-records {
    @extend w3.w3-table;
    @extend tr:nth-child(even);
    @extend tr;
    color:red;
}

Из оператора @use w3 становится моим пространством имен, и я как-то должен иметь возможность ссылаться на .w3-таблицу из файла w3. css. НО я получаю эту ошибку.

Compilation Error
Error: ".mxa-records" failed to @extend "w3.w3-table".
       The selector "w3.w3-table" was not found.
       Use "@extend w3.w3-table !optional" if the extend should be able to fail.
        on line 10 of sass/c:\Users\Mark Kortink\Dropbox\Python\projects\PlayPen\sassy\css\mxa.scss
>>     @extend w3.w3-table;
   ------------^

Я получаю ту же ошибку, если опускаю пространство имен w3.

Я просто заблуждаюсь, что S CSS позволяет мне повторно использовать элементы стиля из других файлов? Я надеюсь, что нет, но как ты это делаешь?

Answer 1

Отвечая на мой вопрос на основе полученных комментариев, спасибо @Arkellys и другим.

Оказывается, VSCode не поддерживает последние изменения в S CSS, поэтому вы не можете использовать @use или @forward или другие новые функции с расширением VSCode S CSS. Обратите внимание, что @import устарела и в конечном итоге исчезнет, ​​но все еще работает в VSCode.

Есть лучший ответ на мой вопрос, который я обнаружил после возврата к @import, и он здесь stackexchange 58974574 .

НО примечание Я также обнаружил еще одну проблему в VSCode оператор @import не будет импортировать файл. css, он будет импортировать только файлы .s css. Это противоречит официальным спецификациям S CSS.

Код на основе @ import, который работал для меня, был ...

@import 'test2';

tr:nth-child(even){
    background-color:#f1f1f1
}

tr{border-bottom:1px solid rgb(221, 221, 221)}

.mxa-records {
    @extend .w3-table;
    @extend tr:nth-child(even);
    @extend tr;
    color: $var;
}

с test2.s css

$var: brown;

.w3-table {
    background-color: $var;
}

Это сгенерировано ...

.w3-table, .mxa-records {
  background-color: brown;
}

tr:nth-child(even), .mxa-records {
  background-color: #f1f1f1;
}

tr, .mxa-records {
  border-bottom: 1px solid #dddddd;
}

.mxa-records {
  color: brown;
}
/*# sourceMappingURL=mxa.css.map */