I was writing my @include, to include my @mixins from my partial file and it doesn't work and I don't understand why.
Error: Invalid CSS after " @include f": expected "}", was ".titleFont;" on line 138 of sass/styles.scss
I am beginner in all this so if you need more info just ask.
Here is my CSS file, where you'll see the error.
/*
Error: Invalid CSS after " @include f": expected "}", was ".titleFont;"
on line 138 of sass/styles.scss
133: .main-text {
134: padding: 30px 0;
135: text-align: center;
136:
137: h2 {
138: @include f.titleFont;
139: margin: 0 0 20px;
140: }
141:
142: p {
143: @include f.subTitleFont;
Backtrace:
sass/styles.scss:138
C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/sass-3.4.25/lib/sass/scss/parser.rb:1207:in `expected'
C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/sass-3.4.25/lib/sass/scss/parser.rb:1137:in `expected'
C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/sass-3.4.25/lib/sass/scss/parser.rb:1132:in `tok!'
C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/sass-3.4.25/lib/sass/scss/parser.rb:667:in `block'
C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/sass-3.4.25/lib/sass/scss/parser.rb:735:in `declaration_or_ruleset'
C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/sass-3.4.25/lib/sass/scss/parser.rb:685:in `block_child'
C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/sass-3.4.25/lib/sass/scss/parser.rb:677:in `block_contents'
C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/sass-3.4.25/lib/sass/scss/parser.rb:666:in `block'
C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/sass-3.4.25/lib/sass/scss/parser.rb:658:in `ruleset'
C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/sass-3.4.25/lib/sass/scss/parser.rb:684:in `block_child'
C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/sass-3.4.25/lib/sass/scss/parser.rb:677:in `block_contents'
C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/sass-3.4.25/lib/sass/scss/parser.rb:125:in `stylesheet'
C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/sass-3.4.25/lib/sass/scss/parser.rb:41:in `parse'
C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/sass-3.4.25/lib/sass/engine.rb:409:in `_to_tree'
C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/sass-3.4.25/lib/sass/engine.rb:384:in `_render_with_sourcemap'
C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/sass-3.4.25/lib/sass/engine.rb:301:in `render_with_sourcemap'
C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/sass-3.4.25/lib/sass/plugin/compiler.rb:492:in `update_stylesheet'
C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/sass-3.4.25/lib/sass/plugin/compiler.rb:215:in `block in update_stylesheets'
C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/sass-3.4.25/lib/sass/plugin/compiler.rb:209:in `each'
C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/sass-3.4.25/lib/sass/plugin/compiler.rb:209:in `update_stylesheets'
C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/sass-3.4.25/lib/sass/plugin/compiler.rb:473:in `on_file_changed'
C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/sass-3.4.25/lib/sass/plugin/compiler.rb:331:in `block in watch'
C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/sass-3.4.25/vendor/listen/lib/listen/listener.rb:252:in `on_change'
C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/sass-3.4.25/vendor/listen/lib/listen/listener.rb:290:in `block in initialize_adapter'
C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/sass-3.4.25/vendor/listen/lib/listen/adapters/polling.rb:48:in `poll_changed_directories'
C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/sass-3.4.25/vendor/listen/lib/listen/adapter.rb:299:in `block in start_poller'
*/
body:before {
white-space: pre;
font-family: monospace;
content: "Error: Invalid CSS after \" @include f\": expected \"}\", was \".titleFont;\"\A on line 138 of sass/styles.scss\A \A 133: .main-text {\A 134: padding: 30px 0;\A 135: text-align: center;\A 136: \A 137: h2 {\A 138: @include f.titleFont;\A 139: margin: 0 0 20px;\A 140: }\A 141: \A 142: p {\A 143: @include f.subTitleFont;"; }
Here is my SCSS file.
/* -------------------------------------------------- Global ------------------------------------------ */
@import "compass";
@use "abstracts/fonts" as f;
$main-color: hsl(169, 85%, 59%);
body {
position: relative;
}
* {
box-sizing: border-box;
}
.popout {
animation: popout 1s ease;
-webkit-animation: popout 1s ease;
}
@keyframes popout {
from{transform:scale(0)}
to{transform:scale(1)}
}
@-webkit-keyframes popout {
from{-webkit-transform:scale(0)}
to{transform:scale(1)}
}
// ------------------------------------------------- Mixins --------------------------------------------------
@mixin transform($transforms) {
-webkit-transform: $transforms;
-moz-transform: $transforms;
-ms-transform: $transforms;
transform: $transforms;
}
@mixin ImageBorderColor($ImgBorCol: $main-color) {
border-color: $ImgBorCol;
transition: .7s;
}
/* ------------------------------------------------- Sections ------------------------------------------------ */
#section1 {
/* padding-top:50px;color: #fff; background-color: white; */
/* fallback for old browsers */
/* background: #595959; */
/* Chrome 10-25, Safari 5.1-6 */
/* background: -webkit-linear-gradient(to bottom, rgba(89, 89, 89, 0.5), rgba(255, 255, 255, 0.5)); */
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
/* background: linear-gradient(to bottom, rgba(89, 89, 89, 0.5), rgba(255, 255, 255, 0.5)); */
}
#section1{
background-color: $main-color;
padding: 150px 0;
@include transform(skew(0deg, 10deg));
.container{
@include transform(skew(0deg, -10deg));
text-align: center;
}
}
#section2 {
padding-top:50px; color: #fff; background-color: white;
}
#section3 {
padding-top:50px;color: #fff; background-color: white;
}
#section4 {
padding-top:50px;color: #fff; background-color: white;
}
#section5 {
padding-top:50px;color: #fff; background-color: white;
}
#section6 {
padding-top:50px;color: #fff; background-color: white;
}
/* -------------------------------------------------- Home ------------------------------------- */
.profile-area{
padding: 5vh 0;
}
.card{
box-shadow: 0 0 30px rgba(0,0,0,0.5);
overflow: hidden;
border-radius: 15px;
}
.img1 {
img {
height: 200px;
width: 100%;
}
}
.img2 {
img {
/* position: relative; */
display: block;
margin-left: auto;
margin-right: auto;
z-index: 1;
width: 140px;
height: 140px;
border-radius: 50%;
border: 7px solid #fff;
margin-top: -80px;
}
}
.card:hover .img2 img{
@include ImageBorderColor;
}
.main-text {
padding: 30px 0;
text-align: center;
h2 {
@include f.titleFont($titFon: "Oswald");
margin: 0 0 20px;
}
p {
@include f.subTitleFont($titFon: "Oswald");
}
}
.socials{
text-align: center;
padding-bottom: 20px;
i{
font-size: 20px;
padding: 0;
}
i:hover{
color: $main-color !important;
}
}
/* -------------------------------------------------- Projects ------------------------------------- */
.carousel {
.carousel-item{
height: 720px;
}
}
.carousel-item{
img {
position: absolute;
object-fit: cover;
top: 0;
left: 0;
}
}
/* .carousel-item{
img:hover {
filter: blur(10px) brightness(75%);
}
} */
/* -------------------------------------------------- Services ------------------------------------- */
.box-part{
background:#FFF;
border-radius:0;
padding:30px 10px;
margin:15px 0;
}
.text{
margin:20px 0;
}
.title-padding{
padding-top: 10px;
}
#section3{
i{
color: black;
}
}
/* ------------------- Mobile ------------------------ */
@media only screen and (max-width: 992px) {
.carousel .carousel-item{
height: 220px;
}
/* ------------------------------- Technologies CSS --------------------------------------------------- */
.client-logo > a > img {
max-height: 150px;
}
.clients > .container {
text-align: center;
}
.second-row .client-logo:last-child {
border: 1px solid #dedede !important;
}
}
h1,
.font-weight-bolder {
font-weight: 900 !important;
}
.text-uppercase{
text-transform: uppercase !important;
}
.text-primary{
color: $main-color !important;
}
/* ----------------------------------------------------- Clients ------------------------------------------*/
.subheading {
font-family: "pt serif",Serif;
font-size: 16px;
font-style: italic;
}
.container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
.bottom-line:after {
content: "";
display: block;
width: 48px;
border-bottom: 3px solid #e8e8e8;
margin: 10px auto;
}
.client-logo {
border: 1px solid #dedede;
text-align: center;
}
/* .client-logo:last-child {
border-right: none;
} */
@media (min-width: 1200px) {
#section4 > .container > .row > div > a > img {
max-height: 164px;
}
}
#section4 > .container > .row > div > a > img {
height: 100%;
}
.client-logo > a > img {
height: 100%;
}
img{
vertical-align: middle;
}
body img {
border: none;
max-width: 100%;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
.client-logo {
border-bottom: 1px solid #dedede;
border-right: 1px solid #dedede;
text-align: center;
}
.hvr-reveal {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
overflow: hidden;
}
.hvr-reveal:before {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-color: $main-color;
border-style: solid;
border-width: 0;
-webkit-transition-property: border-width;
transition-property: border-width;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-reveal:hover:before, .hvr-reveal:focus:before, .hvr-reveal:active:before {
-webkit-transform: translateY(0);
transform: translateY(0);
border-width: 4px;
}
/* ----------------------------------------------------- Contact ------------------------------------------*/