I'm trying to use the 'starts with' selector inside my Sass program, but for some reason I got an error.
I have the following code:
a[href=^="//youtube.com"]
color: red
This throws the following error:
Invalid CSS after "a[href=": expected identifier or string, was "^="//youtube.com"]"
How can I resolve this error?
My Ruby version is:
ruby 2.6.3p62 (2019-04-16 revision 67580) [x64-mingw32]
To compile my SASS code to CSS I use Grunt with grunt-contrib-sass
Simply use a[href^="//youtube.com"]
As far as I know that's a standard CSS selector (an attribute selector) rather than a SASS feature but you got the syntax wrong:
[attr^=value]
Represents elements with an attribute name of attr whose value is prefixed (preceded) by value.
Related
According to sass the #import statement is directed to deprecation, in favour of #use, yet in the jekyll docs there are only examples of the first kind... I however can't get the latter to work!
When I try to reference a variable from a partial _color.sass:
$duck-blue: #199
With the use statement in some other partial _nav.sass:
#use 'color'
.duckdiv:
border: 2px solid color.$duck-blue
Jekyll throws the following
Error: Invalid CSS after "...2px solid color": expected expression (e.g. 1px, bold), was ".$duck-blue; }"
While everything works if I replace #use by #import and remove the color. scope in front of the variable.
Is there something I'm getting wrong?
I ran into this myself and spent a while digging, here's what I found.
Jekyll uses LibSass converter to convert SCSS to CSS. Lybsass has been deprecated now for over a year. The new modern converter is Dart Sass which includes the new #use references.
There is an open ticket in Jekyll to use dart-sass: https://github.com/jekyll/jekyll-sass-converter/issues/116
But in the meantime you can change the default sass converter by hand with a new gem: https://github.com/jekyll/jekyll-sass-converter/issues/116#issuecomment-850912425
I have created a blank project in angular 4 and I am trying to design it but the sass isn't working when ever I add sass and run project I am getting this error
body{
h1{
color : red;
}
}
^
Invalid CSS after "body{": expected "}", was "{"
in C:projectname/src\styles.sass (line 1, column 6)
My index.html code is
<body>
<h1>Here</h1>
</body>
Any help would be appreciated
Based on your error message (C:projectname/src\styles.sass) It seems you're using the .sass extension for a SCSS file. Change your file name to styles.scss.
Sass and SCSS use two different and incompatible syntaxes.
There are two syntaxes available for Sass. The first, known as SCSS
(Sassy CSS) and used throughout this reference, is an extension of the
syntax of CSS. This means that every valid CSS stylesheet is a valid
SCSS file with the same meaning. This syntax is enhanced with the Sass
features described below. Files using this syntax have the .scss
extension.
The second and older syntax, known as the indented syntax (or
sometimes just “Sass”), provides a more concise way of writing CSS. It
uses indentation rather than brackets to indicate nesting of
selectors, and newlines rather than semicolons to separate properties.
Files using this syntax have the .sass extension.
Just decided to learn SASS, pretty easy stuff except a very basic file won't compile.
It's literally this basic:
$test: #ffffff;
Command:
sass test.sass
Error Message:
error: expected "
".
$test:#ffffff;
^
test.sass 1:14 root stylesheet
I've no idea what it means by expected " - expected where??
please change extension test.sass to test.scss. and you good to go. 100% :)
As per sass-lang.com.
There are two syntaxes available for Sass. The first, known as SCSS
(Sassy CSS) and used throughout this reference, is an extension of the
syntax of CSS. This means that every valid CSS stylesheet is a valid
SCSS file with the same meaning. In addition, SCSS understands most
CSS hacks and vendor-specific syntax, such as IE's old filter syntax.
This syntax is enhanced with the Sass features described below. Files
using this syntax have the .scss extension.
The second and older syntax, known as the indented syntax (or
sometimes just "Sass"), provides a more concise way of writing CSS. It
uses indentation rather than brackets to indicate nesting of
selectors, and newlines rather than semicolons to separate properties.
Some people find this to be easier to read and quicker to write than
SCSS. The indented syntax has all the same features, although some of
them have slightly different syntax; this is described in the indented
syntax reference. Files using this syntax have the .sass extension.
I've started Vim (v8) and have proper syntax highlighters in place for css3. I am using postcss plugin called precss to provide for "SASS" like syntax in my code.
However, when I used a nested selector with "&:last-child" or &:first-child, the syntax throws an error. It doesn't break the code or anything, but that "red" error is so distracting for me. Check the screen shot below.
Anyone can figure out how to make this error go?? I use a plugin called vim-css3-syntax and it includes scss syntax highlighting.
Edit: Got it fixed by downloading https://github.com/cakebaker/scss-syntax.vim and then adding au BufRead,BufNewFile *.css set filetype=scss.css
Thanks in advance.
The fact that you are using SCSS syntax (nested blocks, &, etc.) in CSS makes your CSS invalid.
If you want to avoid syntax errors you have two paths:
stop using SCSS syntax in your CSS files,
make sure your file is recognized as what it is: SCSS.
I would consider the first path to be the most sensible. After all who writes JavaScript in a *.rb file or SCSS in a *.css file? But if you choose the second you can simply do:
setf scss
--- edit ---
Suppose we have this code:
body {
background-color: white;
}
It's both valid CSS and valid SCSS because SCSS is a superset of CSS. Any valid CSS is automatically valid SCSS. Vim will happily display it without any error, no matter what file extension (*.css, *.scss) and filetype (css, scss).
Now, suppose we have this code:
body {
h1 {
background-color: $brand-1;
}
}
It's valid SCSS but not valid CSS. If you write that code in a *.css file with the css filetype, you get errors because it's not CSS. If you write that code in a *.scss file with the scss filetype you don't get errors because it's valid SCSS.
.class{
color:#333;
}
.ex-class{
#extend .class;
}
Shows error:
".ex-class" failed to extend ".class"
The selector ".class" was not found.
This will be an error in future releases of Sass
Use "#extend .class !optional" if the extend should be able to fail
What makes me in trouble, Sass is compiled fine on all other git Repos on my system, I tried by changing the Sass versions, My team member works fine with this Sass and same version.
#extend warning were introduced in Sass 3.2.0:
Any #extend that doesn't match any selectors in the document will now print a warning. These warnings will become errors in future versions of Sass. This will help protect against typos and make it clearer why broken styles aren't working.
In Sass 3.3.0, it stop to warn the user, simply throwing an error:
Sass will now throw an error when an #extend that has no effect is used. The !optional flag may be used to avoid this behavior for a single #extend.
Please note that #extend has been subject to many bug fix in Sass history (3.1.13, 3.2.5, 3.2.6, 3.2.8 and 3.2.9), and that particularly when it's used with media queries. I would recommend you and your team to use at least Sass v3.3.0.
If your code if written "as it", you shouldn't have any error/warning. If you're using #import, or if the block is wholly/partly written inside a media query, there could have issues.
I've got the same problem:
document [name="variable"]" failed to #extend "%variableSCSS".
The selector "%variableSCSS" was not found.
Use "#extend %variableSCSS !optional" if the extend should be able to fail.
_styles.scss
The problem was solved using #import variableSCSS.scss in _styles.scss
_variableSCSS.scss is the document which contains "%variableSCSS {...}". So check if your #imports are correctly called on the classes you are using them.
If you're using #import then check the permissions of the included files extension. It must be .scss