SASS/SCSS с использованием @extend для отдельных файлов (отзывчивый дизайн)

Я использую на своем сайте подход "сначала мобильные" и использую SCSS.

У меня есть 3 таблицы стилей SCSS:

• base.scss(подается всем)
• medium.scss(>= окно 768px)
• large.scss(>= 1024px)

Они обслуживаются следующим образом:

<link rel="stylesheet" href="/css/base.css" type="text/css" />
<link rel="stylesheet" href="/css/medium.css" type="text/css" media="only screen and (min-width: 767px)" />
<link rel="stylesheet" href="/css/large.css" type="text/css" media="only screen and (min-width: 1023px)" />

Другими словами, large.scssне знает CSS в base.scss, но мне нужно расширить класс, который находится в base.css, когда в large.scss.

Как мне это сделать?

Я попытался выделить элементы, которые мне нужно расширить, например кнопки, в отдельную таблицу стилей, а затем использовать @import 'buttons.scss';в medium.scss, но тогда все css в buttons.scssтакже будут отображаться на этом листе.

Есть ли способ сделать так, чтобы классы в base.scss открывались «механизму рендеринга» SASS при компиляции css, чтобы их можно было использовать в medium.scss?