Переменные SASS не переопределяются

Question

Это сводит меня с ума.У меня есть загрузка файлов SCSS и 1 файл переменной.Я включаю их в свой core.scss следующим образом:

@import url(https://fonts.googleapis.com/css?family=Roboto:900,700,500,300);

@import "global/variables";
@import "components";
@import "layout";

*:focus {
    outline: none !important;
}

Внутри моей таблицы стилей переменных у меня есть это:

$font-family: 'Roboto', sans-serif;

$primary: #000000;
$secondary: #E67F22;
$tertiary: #F1C40F;

$green: #27AE61;
$blue: #297FB8;
$silver: #B2BABB;
$white-sky: #F5F7F8;
$grey: #F0F2F2;
$clouds: #E5E8E8;
$midnight-blue: #2D3E50;
$wet-asphalt: #34495E;
$concrete: #7E8C8D;

Теперь я создаю другой стильлист, который я сделал так:

$font-family: 'Gill Sans';
$green: '#000000';

@import "../global/variables";
@import "../components";
@import "../layout";

*:focus {
    outline: none !important;
}

Но ни шрифт, ни цвет не изменились.Кто-нибудь знает почему?

Answer 1

Это потому, что вы устанавливаете свои обновленные переменные раньше, чем общие.Таким образом, ваши переменные на самом деле перезаписываются, но не в том направлении, в котором вы хотите их получить.

Вам необходимо сделать это таким образом, чтобы достичь своей цели:

@import "../global/variables";

$font-family: 'Gill Sans';
$green: '#000000';

@import "../components";
@import "../layout";


*:focus {
    outline: none !important;
}

Или лучше, чтобы иметь другуюфайл для ваших пользовательских переменных.