Jak @extend z innego pliku sass lub jak osiągnąć OOSASS?

Question

Moje pytanie jest szersze niż tytuł. Właśnie w tym momencie wpadam na pomysł, ale jestem otwarty na wszelkie rozwiązania. Pozwól mi wyjaśnić mój ogólny cel.

Podoba mi się, co potrafią preprocesory CSS. Lubię pomysły OOCSS i SMACSS. Jestem nowy w tym wszystkim. Próbuję ulepszyć moje metody projektowania, aby jakoś uwzględnić najlepsze ze wszystkich światów. Mam metody teoretyczne, które działa tak:

• Stosować tylko w nazwach semantyczne klasy lub identyfikatora lub cokolwiek
• określić moduły lub wzorów w jakimś arkuszu wspólny styl
• mają za stronę arkuszy stylów, które @extend modułów z wspólny arkusz stylów na semantycznych selektorów odnoszących się do danej strony

Więc tak:

/* modules.scss */ 
.ruddy {color: red} 
.fullwidth {width: 100%; display: block;} 

Plus to:

/* homepage.scss */ 
@import modules.sass 

#intro {@extend ruddy; @extend fullwidth} 
aside {@extend ruddy;} 
.thing {@extend fullwidth;} 

staje się w ten sposób:

/* homepage.css */ 
#intro, aside {color: red} 
#intro, .thing {width: 100%; display: block;} 

Nie koniecznie widział ktoś inny to zrobić, ale wydawało się dobrym pomysłem dla mnie. Problem, który napotykam w moim wielkim schemacie, polega na tym, że @extend nie działa z importowanego pliku. Ktoś gdzieś indziej na SO powiedział, że nie jest to możliwe. Czy to prawda? Mam do roboty mixiny, ale problem z nimi polega na tym, że duplikują każdy atrybut w wyjściowym pliku css, co nie wydaje się idealne.

W rzeczywistości jestem bardziej częściowy dla LESS (składnia), ale to nie ma nawet przedłużenia w tej chwili. Czy nie powinienem się martwić o nieskuteczność miksów lub czy jest jakiś sposób osiągnięcia tego, o co proszę?

Uwaga: Automatycznie kompiluję mój sass za pomocą narzędzia o nazwie Prepros. Kiedy próbuję skompilować kod taki jak powyżej, otrzymuję błąd podobny.

OSTRZEŻENIE w linii 11 ... \ sass \ home.scss: "#intro" nie udało się @zmienić "ruddy". Nie znaleziono selektora "ruddy".

Jeśli po prostu skopiuję kod z module.scss na stronę główną.scss, problem zniknie.

Answer 1

Problemem jest tutaj:

#intro {@extend ruddy; @extend fullwidth} 
aside {@extend ruddy;} 
.thing {@extend fullwidth;} 

ruddy i fullwidth nie są selektorów. Jeśli rozszerzasz klasę .ruddy, musisz uwzględnić kropkę, ponieważ jest ona częścią selektora.

#intro {@extend .ruddy; @extend .fullwidth} 
aside {@extend .ruddy;} 
.thing {@extend .fullwidth;} 

Answer 2

To nieprawda.

Możesz zadeklarować klasy (w tym) w jednym pliku, zaimportować pierwszy plik do drugiego pliku i rozszerzyć klasy w drugim pliku.

przykład:

foo.sass

%foo 
    color: red 

bar.Sass

@import foo.sass 
html 
    @extend %foo 

Run sass bar.sass bar.css.

bar.css pojawia

html { 
    color: red; } 

PS dla prawdziwych doświadczeń Sass, należy wykorzystać Compass. Kompas to wiele rzeczy pod jedną nazwą:

• poręczne narzędzie do wydajnej kompilacji SASS;
• ogromna biblioteka poręcznych stylów SASS na każdą okazję;
• Ekosystem rozszerzeń, które można instalować i używać w swoich projektach bez wysiłku. To właśnie wyróżnia SASS. Nie musisz wymyślać koła w kółko.

UPD Wreszcie tekst błędu!

Brakuje kropki w nazwie klasy. aside {@extend ruddy;} powinien być aside {@extend .ruddy;}.