Возможно ли @ расширить класс, определенный в файле .css, в файл .scss?

Question

Например:

app.scss

@import url('orange.css'); 
@import 'navel.scss'; 

orange.css

.orange { 
    color: orange; 
} 

navel.scss

.navel { 
    @extend .orange; 
} 

Answer 1

В SASS если добавить

@import "test.css"; 

или

@import url("test.css"); 

компилируется в чистом CSS @import директивы. Поскольку файл с .css расширением SASS препроцессора вещи, что это чистый CSS и код внутри не участвует в языке SASS операций. В вашем примере, если вы пытаетесь расширить .orange вы получите:

The selector ".orange" was not found. 

Коротко: вытянутая возможно только при использовании Sass файлов.

Answer 2

@extend невозможен, импортировав файл CSS. Вы должны

1. конвертировать CSS в SCSS частичного (или файл)
2. @import это частичное
3. @extend CSS классов

Недостаток это вы остались бы с дублирования. Предположим, что этот импорт является файлом CSS длиной 7000 строк (например, bootstrap), тогда у вас будут проблемы