Czołem forumowicze! To mój pierwszy temat na tym forum, więc nie czuję się tu jeszcze zadomowiony :] Tak więc jeśli wsadziłem temat do złego działu albo coś podobnego, to nie bijcie ;]
Mam mały problem z VSC, a dokładnie z kompilacją z Sass. Po pierwsze, używam dodatku Sass Compiler. Problem w tym, że chcę aby pliki css stworzone po przekształceniu z Sass do CSS zapisywały się w oddzielnym folderze oraz aby były skompresowane. Wszystkie pliki css zapisują się w tym samym folderze co pliki Sass oraz są plikami expanded. Nie działa zmiana ustawień zgodnie z tym co jest napisane w dokumentacji. Dokumentacja wskazuje, że w ustawieniach należy umieścić jeden z poniższych fragmentów :
"liveSassCompile.settings.formats":[
```html
// This is Default.
{
"format": "expanded",
"extensionName": ".css",
"savePath": null
},
// You can add more
{
"format": "compressed",
"extensionName": ".min.css",
"savePath": "/dist/css"
},
// More Complex
{
"format": "compressed",
"extensionName": ".min.css",
"savePath": "~/../css/"
}
]
Niestety, po zmianie ustawień nic się nie zmienia w kwestii zapisywania pliku css. Obecne moje ustawienia wyglądają tak:
```html
{
"workbench.colorTheme": "Solarized Dark"
}
"autoprefixer.browsers": [
"last 5 versions",
"> 5%"
],
"liveSassCompile.settings.formats": [
{
"format": "compressed",
"extensionName": ".css",
"savePath": "/dist/css"
}
],
"liveSassCompile.settings.autoprefix": [
"> 1%",
"last 2 versions"
],
Po drugie, robię sobie stronkę w ramach treningu w oparciu o Sass i w pewnym momencie wyskakuje mi taki błąd:
"Compilation Error
Error: Invalid CSS after "...in: auto; } } }": expected "}", was "{"
on line 74 of sass/d:\Programowanie\gudzień\30.12.18\sass\_header.sass
from line 1 of sass/d:\Programowanie\gudzień\30.12.18\sass\style.sass
margin: auto; } } } {"
Nie wiem, w jaki sposób mam poprawić ten błąd. Wg mnie w linii 74 wszystko jest ok (linia pogrubiona i opatrzona kursywą).
Zapis w pliku Sass wygląda z kolei tak:
*
font-family: 'Magra', sans-serif
margin: 0
padding: 0
box-sizing: border-box
body
background-color: #fff
header
background-image: url(../img/lost-places-1510592_1920.jpg)
background-repeat: no-repeat
background-size: cover
background-position: center
min-height: 100vh
div.bcblack
// position: absolute
// top: 0
// right: 0
// left: 0
// bottom: 0
background-color: rgb(0, 0, 0)
width: 100%
min-height: 100vh
section.menu.title
position: absolute
max-width: 1280px
margin: 0 auto
i.fas.fa-chevron-circle-down
display: none
padding: 10px
font-size: 30px
color: #fff
cursor: pointer
i.fas.fa-chevron-circle-down.active
display: block
position: relative
top: 3%
left: 0%
z-index: 1
i.fas.fa-bars
display: block
padding: 10px
font-size: 30px
color: #fff
cursor: pointer
i.fas.fa-bars.disactive
display: none
nav
position: relative
top: 0
left: -200%
transition: 0.3s
ul
display: grid
grid-column-gap: 20px
grid-template-columns: 1fr 1fr 1fr 1fr
grid-auto-flow: column
justify-content: start
li
margin: 0 30px 0 30px
a
display: inline-block
width: 100%
padding: 5px
text-decoration: none
text-transform: uppercase
text-align: center
color: #fff
nav.active
position: relative
top: 0
left: 0
** <u> margin: 0 auto </u> **
h1
text-transform: capitalize
font-size: 3em`````html
Czy ktoś byłby w stanie mnie nakierować? Pozdrawiam