Jak nadpisać zmienne SCSS podczas kompilacji do CSS

Question

Jak nadpisać zmienne SCSS podczas kompilacji do CSS

Próbuję użyć motywu jqtouch, który jest oparty na SASS i COMPASS. Mam pewien zwyczaj.scss z najprostszym kodem, jednym importem i jedną zmienną do nadpisania:

@import 'jqtouch';

// Override variables
$base-color: #fe892a;/* The default base which is later used for toolbar, list, and button backgrounds.*/

Kiedy teraz skompiluję plik scss do css, w zasadzie wygeneruje on css jqtouch z moją nazwą pliku. Specyfikacja koloru nie jest nigdzie widoczna, chociaż zmienna jest definitywnie poprawna w dokumentacji ( Official Guide) i w jqtouch.plik scss, który importuję do kostiumów.

Używam Sass 3.2.9 i Compass 0.12.2 na komputerze z systemem Windows.

Próbowałem z większą ilością zmiennych i różnymi importami plików, ale zawsze wynik jest taki, że moje wartości nadpisania nie są włączone.

Plik konfiguracyjny ruby dla compass wydaje się być niepomyślny.

Czy ktoś ma pojęcie, co idzie nie tak w procesie, aby moje wartości nadpisywania były ignorowane?

61

sass jqtouch compass-sass

Author: cimmanon, 2013-06-13

Source

1 answers

score 102 · Accepted Answer

Ustawiasz kolor po tym, jak został już użyty. W zasadzie to co próbujesz zrobić to:

$color: red;

.foo {
    background: $color;
}

$color: green;

W zależności od tego, jak jest napisane jqtouch, możesz w ogóle nie być w stanie modyfikować kolorów. Zmienne muszą być ustawione jako domyślne, aby nadpisać je z wyprzedzeniem:

$color: green;
$color: red !default; // red is only used if $color is not already set

.foo {
    background: $color; // color is green
}

Więc Twój kod powinien być tak napisany:

// Override variables
$base-color: #fe892a;/* The default base which is later used for toolbar, list, and button backgrounds.*/

@import 'jqtouch';