SCSS не сопоставление/компиляция

Наконец-то ушло некоторое время, чтобы немного изучить веб-дизайн, но теперь мой scss-код не будет компилироваться. Дерьмо.SCSS не сопоставление/компиляция

Я впервые заметил, что мои изменения не показывались в режиме предварительного просмотра в реальном времени (скобки). Затем я проверил соответствующий .css-файл, где я мог видеть, что мои изменения больше не отображаются. Дерьмо.

Я перезапустил все (кронштейны, Chrome, компьютер), но он все еще не работал. Затем я скопировал свой .scss-код в буфер обмена, избавился от всех файлов (в данном случае home.scss, home.css и home.css.map) и создал новый файл home.scss. Файлы mapper и .css были сгенерированы, поэтому они все еще работают. Затем я скопировал свой код в файл .scss и сохранил его, но ничего не было отображено еще раз. Не знаю, что здесь не так. Кто-нибудь сталкивался с этим раньше? Вчера все было хорошо.

Если это помогает, вот код:

home.html

<!doctype html> 
<html> 

<head> 

    <meta charset="UTF-8"> 
    <title>Home</title> 
    <link href="https://fonts.googleapis.com/css?family=Oswald:200,300,400,700" rel="stylesheet"> 
    <link rel=stylesheet type="text/css" href="../css/home.css"> 

</head> 

<body> 

    <div class="first"> 
     <img src="../images/HN_LogoWhite.svg" /> 
    </div> 
    <div class="second"> 
     <section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur voluptatibus sed iusto quaerat nesciunt eius incidunt saepe quam, unde quisquam nobis maiores similique at illo soluta, iure ipsum! Minima, possimus?</section> 
     <section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, placeat ducimus quisquam, ullam quae temporibus esse fugiat nostrum quaerat eos facilis, excepturi labore laboriosam molestiae. Error libero ea saepe officiis.</section> 
    </div> 

</body> 

</html>

home.scss

@import 'fontsAndColors'; 

/* Setting frame */ 

* { 
    box-sizing: border-box; 
} 

html { 
    font-family: $main_font; 
} 

body { 
    background-color: $hn_white; 
    margin: 0; 
} 

.first { 
    background-image: url('../images/TopUnderwater.jpg'); 
    background-size: cover; 
    background-attachment: fixed; 
    background-position: center; 

    display: block; 
    margin: auto; 
    width: 100vw; 
    height: 100vh; 
    img { 
     width: 20%; 
     position: absolute; 
     display: block; 
     top: 0; 
     bottom: 0; 
     left: 0; 
     right: 0; 
     margin: auto; 
    } 
} 



.second { 
    height: 100vh; 
    text-align: center; 
    background-color: $hn_green; 
    padding: 5%; 
    section { 
     top: 10%; 
     width: 30%; 
     margin: 10%; 
     padding: 10%; 
     float: left; 
     display: block; 
     border: solid 1em $hn_green; 
     position: relative; 

     overflow:hidden; 
    } 
}

_fontsAndColors.scss

$hn_green: #6ca66b; 
$hn_blue: #3398cc; 
$hn_white: #ffffff; 
$main_font: font-family: 'Oswald', sans-serif; 

@mixin hn_bg_gr1($col1, $col2) { 
    background: $col1; 
    background: -webkit-linear-gradient(left top, $col1, $col2); /* For Safari 5.1 to 6.0 */ 
    background: -o-linear-gradient(bottom right, $col1, $col2); /* For Opera 11.1 to 12.0 */ 
    background: -moz-linear-gradient(bottom right, $col1, $col2); /* For Firefox 3.6 to 15 */ 
    background: linear-gradient(to bottom right, $col1, $col2); /* Standard syntax (must be last) */ 
} 

@mixin hn_bg_gr2($col1, $col2) { 
    background: $col1; /* For browsers that do not support gradients */ 
    background: -webkit-linear-gradient($col1, $col2); /* For Safari 5.1 to 6.0 */ 
    background: -o-linear-gradient($col1, $col2); /* For Opera 11.1 to 12.0 */ 
    background: -moz-linear-gradient($col1, $col2); /* For Firefox 3.6 to 15 */ 
    background: linear-gradient($col1, $col2); /* Standard syntax */ 

}

и, как ни странно, home.css.map

{ 
    "version": 3, 
    "file": "home.css", 
    "sources": [ 
    "home.scss", 
    "_fontsAndColors.scss" 
    ], 
    "mappings": "", 
    "names": [] 
}

Возможно, это не имеет никакого отношения к этому, но проблемы начались вскоре после того, как я добавил шрифт Освальда из Google Fonts.

Спасибо!

источник

2017-02-22 Inkidu616

Попробуйте $ main_font: 'Освальд', sans-serif; или $ main_font: «font-family:« Освальд », sans-serif»; – jseezo

Да, это была определенно ошибка :) Не сразу сработала, но немного поиграла, и картограф снова проснулся. Спасибо за совет! – Inkidu616

Все хорошее, похоже, сделало глупую ошибку, указав это в файле _fontsAndColors: $ main_font: font-family: 'Oswald', sans-serif;

Это вызвало синтаксическую ошибку. font-family: font-family: ...

Thanks jseezo!

источник

2017-02-22 20:13:39 Inkidu616

ответ

Смежные вопросы