I’m encountering an issue with my SCSS file where I keep getting an error about a missing closing bracket (}), but I can’t seem to find where the problem is. Here’s my SCSS code:
<code>When i try to write anything it gives me the "expected }" error though all the other brackets are closed
@charset "utf-8";
/*=============================================================
BREAKPOINTS
=============================================================*/
$breakpoints: (
'pt-phone': 375px,
'ls-phone': 480px,
'pt-tablet': 768px,
'ls-tablet': 1024px,
'laptop': 1100px,
'desktop': 1280px
) !default;
$respMenuW: '992px';
$respMenu: '<' + $respMenuW;
/*=============================================================
IMPORTS
=============================================================*/
@import "reset";
@import "vars";
@import "breakpoints";
@import "grid";
@import "mixins";
@import "placeholder";
@import "plugins";
@import "fonts";
@import "tools";
/*=============================================================
GENERIC STYLES
=============================================================*/
html {
min-height: 100%;
-webkit-text-size-adjust: none;
box-sizing: border-box;
overflow-x: hidden;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-size: 100%;
@include primary-font(400);
background-color: #fff;
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
display: flex;
flex-direction: row;
position: relative;
flex-grow: 1;
}
.flex-container {
display: flex;
flex-direction: column;
padding-top: 40px;
.main-logo {
display: flex;
margin-right: auto;
margin-left: auto;
padding-bottom: 100px;
img {
height: 130px;
}
}
.screens {
display: flex;
flex-direction: row;
img {
border-radius: 25px;
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.6);
}
.screen2 {
left: 250px;
top: 35px; /* play around with this */
position: relative;
img {
height: 376px;
}
}
.screen3 {
left: 298px;
top: 35px; /* play around with this */
position: relative;
img {
height: 376px;
}
}
.screen1 {
left: -62px;
position: relative; /* and this has to be relative */
img {
height: 442px;
}
}
}
.texts {
padding-left: 150px;
}
}
</code>
<code>When i try to write anything it gives me the "expected }" error though all the other brackets are closed
@charset "utf-8";
/*=============================================================
BREAKPOINTS
=============================================================*/
$breakpoints: (
'pt-phone': 375px,
'ls-phone': 480px,
'pt-tablet': 768px,
'ls-tablet': 1024px,
'laptop': 1100px,
'desktop': 1280px
) !default;
$respMenuW: '992px';
$respMenu: '<' + $respMenuW;
/*=============================================================
IMPORTS
=============================================================*/
@import "reset";
@import "vars";
@import "breakpoints";
@import "grid";
@import "mixins";
@import "placeholder";
@import "plugins";
@import "fonts";
@import "tools";
/*=============================================================
GENERIC STYLES
=============================================================*/
html {
min-height: 100%;
-webkit-text-size-adjust: none;
box-sizing: border-box;
overflow-x: hidden;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-size: 100%;
@include primary-font(400);
background-color: #fff;
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
display: flex;
flex-direction: row;
position: relative;
flex-grow: 1;
}
.flex-container {
display: flex;
flex-direction: column;
padding-top: 40px;
.main-logo {
display: flex;
margin-right: auto;
margin-left: auto;
padding-bottom: 100px;
img {
height: 130px;
}
}
.screens {
display: flex;
flex-direction: row;
img {
border-radius: 25px;
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.6);
}
.screen2 {
left: 250px;
top: 35px; /* play around with this */
position: relative;
img {
height: 376px;
}
}
.screen3 {
left: 298px;
top: 35px; /* play around with this */
position: relative;
img {
height: 376px;
}
}
.screen1 {
left: -62px;
position: relative; /* and this has to be relative */
img {
height: 442px;
}
}
}
.texts {
padding-left: 150px;
}
}
</code>
When i try to write anything it gives me the "expected }" error though all the other brackets are closed
@charset "utf-8";
/*=============================================================
BREAKPOINTS
=============================================================*/
$breakpoints: (
'pt-phone': 375px,
'ls-phone': 480px,
'pt-tablet': 768px,
'ls-tablet': 1024px,
'laptop': 1100px,
'desktop': 1280px
) !default;
$respMenuW: '992px';
$respMenu: '<' + $respMenuW;
/*=============================================================
IMPORTS
=============================================================*/
@import "reset";
@import "vars";
@import "breakpoints";
@import "grid";
@import "mixins";
@import "placeholder";
@import "plugins";
@import "fonts";
@import "tools";
/*=============================================================
GENERIC STYLES
=============================================================*/
html {
min-height: 100%;
-webkit-text-size-adjust: none;
box-sizing: border-box;
overflow-x: hidden;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-size: 100%;
@include primary-font(400);
background-color: #fff;
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
display: flex;
flex-direction: row;
position: relative;
flex-grow: 1;
}
.flex-container {
display: flex;
flex-direction: column;
padding-top: 40px;
.main-logo {
display: flex;
margin-right: auto;
margin-left: auto;
padding-bottom: 100px;
img {
height: 130px;
}
}
.screens {
display: flex;
flex-direction: row;
img {
border-radius: 25px;
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.6);
}
.screen2 {
left: 250px;
top: 35px; /* play around with this */
position: relative;
img {
height: 376px;
}
}
.screen3 {
left: 298px;
top: 35px; /* play around with this */
position: relative;
img {
height: 376px;
}
}
.screen1 {
left: -62px;
position: relative; /* and this has to be relative */
img {
height: 442px;
}
}
}
.texts {
padding-left: 150px;
}
}
Heres the html if it helps
<code><!doctype html>
<html lang="pt">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Meal to You - Mais perto de ti</title>
<link rel="stylesheet" href="css/main.css?r=<?php echo filemtime('css/main.css'); ?>">
</head>
<body>
<div class="flex-container">
<div class="main-logo">
<img src="images/meal_to_you_logo.svg">
</div>
<main>
<div class="screens">
<div class="screen2">
<img src="images/app_screen_02.png">
</div>
<div class="screen3">
<img src="images/app_screen_03.jpg">
</div>
<div class="screen1">
<img src="images/app_screen_01.jpg">
</div>
</div>
<div class="texts">
<div class="2020text">
<h1>Nem tudo em 2020 é mau...</h1>
</div>
<div class="main-text">
<h1>A Meal To You está quaaase a chegar!</h1>
</div>
</div>
</main>
<div class="footer">
<div class="btn-section1">
<div class="btn1text">
<h1>Ajuda-nos a entregar todas as Meals encomendadas!</h1>
</div>
<button class="button1"type="button">Inscreve-te como estafeta</button>
</div>
<div class="btn-section2">
<div class="btn2text">
<h1>Junta-te à família Meal To You!</h1>
</div>
<button type="button">Inscreve o teu restaurante</button>
</div>
</div>
</div>
</body>
</html>
</code>
<code><!doctype html>
<html lang="pt">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Meal to You - Mais perto de ti</title>
<link rel="stylesheet" href="css/main.css?r=<?php echo filemtime('css/main.css'); ?>">
</head>
<body>
<div class="flex-container">
<div class="main-logo">
<img src="images/meal_to_you_logo.svg">
</div>
<main>
<div class="screens">
<div class="screen2">
<img src="images/app_screen_02.png">
</div>
<div class="screen3">
<img src="images/app_screen_03.jpg">
</div>
<div class="screen1">
<img src="images/app_screen_01.jpg">
</div>
</div>
<div class="texts">
<div class="2020text">
<h1>Nem tudo em 2020 é mau...</h1>
</div>
<div class="main-text">
<h1>A Meal To You está quaaase a chegar!</h1>
</div>
</div>
</main>
<div class="footer">
<div class="btn-section1">
<div class="btn1text">
<h1>Ajuda-nos a entregar todas as Meals encomendadas!</h1>
</div>
<button class="button1"type="button">Inscreve-te como estafeta</button>
</div>
<div class="btn-section2">
<div class="btn2text">
<h1>Junta-te à família Meal To You!</h1>
</div>
<button type="button">Inscreve o teu restaurante</button>
</div>
</div>
</div>
</body>
</html>
</code>
<!doctype html>
<html lang="pt">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Meal to You - Mais perto de ti</title>
<link rel="stylesheet" href="css/main.css?r=<?php echo filemtime('css/main.css'); ?>">
</head>
<body>
<div class="flex-container">
<div class="main-logo">
<img src="images/meal_to_you_logo.svg">
</div>
<main>
<div class="screens">
<div class="screen2">
<img src="images/app_screen_02.png">
</div>
<div class="screen3">
<img src="images/app_screen_03.jpg">
</div>
<div class="screen1">
<img src="images/app_screen_01.jpg">
</div>
</div>
<div class="texts">
<div class="2020text">
<h1>Nem tudo em 2020 é mau...</h1>
</div>
<div class="main-text">
<h1>A Meal To You está quaaase a chegar!</h1>
</div>
</div>
</main>
<div class="footer">
<div class="btn-section1">
<div class="btn1text">
<h1>Ajuda-nos a entregar todas as Meals encomendadas!</h1>
</div>
<button class="button1"type="button">Inscreve-te como estafeta</button>
</div>
<div class="btn-section2">
<div class="btn2text">
<h1>Junta-te à família Meal To You!</h1>
</div>
<button type="button">Inscreve o teu restaurante</button>
</div>
</div>
</div>
</body>
</html>
I’ve ensured that all the brackets are closed, but the error persists whenever I try to compile the SCSS file. If anyone can spot the issue I’d greatly appreciate it!
New contributor
Gabriel Prata Henriques is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
12