I just started writing sass and on my first lines
body{
background-color: #272727;
color: white;
}
I get an error of
--------------------
Change Detected...
index.sass
--------------------
Compilation Error
Error: Invalid CSS after "body{": expected "}", was "{"
on line 1 of sass/c:\Users\user\desktop\Scripts\cryptoChess\src\Assets\Style\index.sass
>> body{ {
-----^
--------------------
I am using the live sass compiler extension on vs code. Anyone know how to fix this?
It looks like you're using the .sass file extension for index.sass for a scss file. You need to change it to use the scss file extension for it to compile.
See also:
Sass Invalid CSS Error: "expected expression"
Related
I'm trying to build a web page with sass. I have a _mixins.scss file where I have written:
#mixin gradient{
background: background(//etc);
}
and a partial class _navbar.scss file where I define a class .menu and attempt to use the mixin:
#use '../custom' as *;
.menu{
#include gradient
li {
padding: 0 0.7rem;
a{
color: $white !important
text-transform: capitalize;
}
}
}
In visual studio code, intellisense has no problem with the #include, #mixin, and #use statements. Pressing "ctrl + click" on #use points to the correct file.
I am running "npm run compile:sass" in a Gitbash window, and the scss is compiling fine. The html file has a link to the stylesheet in style.css, the file where sass compiles the .scss code to.
Everything seems connected, and indeed everything up to now has been working fine until tryin to use a mixin.
I have googled the issue, looked at similar questions here, and cannot find a way to resolve this.
I am developing a WordPress theme and I am trying to use sass from another file using the #use method but it doesn't seem to be working. How can I fix the problem since the #import rule method will be depreciated soon?
I have files
//_brand.scss
$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);
and then
//footer.scsss
#use 'brand' as b;
.footer{
padding: 0px 5%;
background-color: b.$base-color;
}
and I get this error when it's compiling
Compilation Error
Error: Invalid CSS after "...ground-color: b": expected expression (e.g. 1px, bold), was ".$font-size;"
on line 5 of sass/opt/lampp/.../sass/footer.scss
>> background-color: b.$base-color;
I am using "Live Sass Compiler" visual studio code extension to compile to CSS
If you want to use the variables you have defined within the brand.scss file across different files, you can use the #import directive. For using it, just add the line below to your footer.scss file:
#import "brand";
Source: https://www.w3schools.com/sass/sass_import.asp
I hope my answer will help you
so iv'e started learning sass and i'm now in a spot when i added a class to my html (.circle)
and my sass file is already linked to my css file.
when i typed .circle to my sass file and tried to give him a color i incountred in the next error:
This selector doesn't have any properties and will not be rendered.
error styles.sass (Line 6: Properties are only allowed within rules, directives, mixin includes, or other properties.)
my sass file is really simple by now as i try to play with it:
body
background-color: cadetblue
.circle
color: red
as i said when reaching the .circle i get the error. any ideas?
i used the sass --watch command and i use ruby devkit 2.6.5-1
thanks for helping! im new so i try my best
It seems like the syntax is not correct. Try this instead (remark the indentation on color property):
body
background-color: cadetblue
.circle
color: red
More info about Sass syntax : https://sass-lang.com/documentation/syntax#the-indented-syntax
I'm trying to precompile the assets in production but I'm getting an error. I googled it for hours but could not find the answer. Please see the code and error below:
Sass::SyntaxError: Invalid CSS after "...-menu > li:not(": expected ")", was "":.treeview") >..."
***.css
.sidebar-mini.sidebar-collapse .sidebar-menu > li:not(.treeview) > a > span {
border-bottom-right-radius: 4px;
}
Its raising error near not. Can anyone help me out. Its just a simple syntax change.
Try only using "#Import" in your aplication stylesheet, some scss assets break when you use "require"
why? because require is for ".css", #import is for ".scss" (sass)
if you are importing assets from a gem, look for that gem documentation on how to replace require with import
I just installed less and trying to get a css and map file generated. Whatever tutorial I find, it never works. Here's an example of a tutorial I've been following, http://code.tutsplus.com/tutorials/working-with-less-and-the-chrome-devtools--net-36636.
My less file is this:
#color: black;
body {
background-color: #color;
}
.text{
color: #color;
}
And the command that I use to compile is this:
lessc -source-map=header.map header.less header.css
I've also tried
lessc header.less header.css
lessc -source-map=header.map header.less header.css
in case I needed to generate the css for whatever reason and
lessc --source-map-less-inline header.less header.css
to see if I can generate it inline, but that doesn't work either.
The version of less that I am using is lessc 1.4.2 (LESS Compiler) [JavaScript] on an Ubuntu server.
follow this link. I use it to install LESS on ubuntu.
after it is done, then just use the following command to compile a less file into css.
lessc theme.less theme.css
Link to refer