I have the following piece of code in my .scss file:
.navbar {
min-height: 30px;
&-nav{
li{
a {
padding-top: 5px;
padding-bottom: 5px;
}
}
}
}
It is generating the following error:
Syntax error: Invalid CSS after " &:" expected "{", was "-nav{"
Basically, I want my resulting selector to be .navbar-nav, can anyone let me know how to implement this in Sass 3.4.22
Remove the brackets and semicolons and use indentation:
.navbar
min-height: 30px
&-nav
li
a
padding-top: 5px
padding-bottom: 5px
From RubyDoc:
Sass has two syntaxes. The new main syntax (as of Sass 3) is known as
"SCSS" (for "Sassy CSS"), and is a superset of CSS's syntax. This
means that every valid CSS stylesheet is valid SCSS as well. SCSS
files use the extension .scss.
The second, older syntax is known as the indented syntax (or just
"Sass"). Inspired by Haml's terseness, it's intended for people who
prefer conciseness over similarity to CSS. Instead of brackets and
semicolons, it uses the indentation of lines to specify blocks.
Although no longer the primary syntax, the indented syntax will
continue to be supported. Files in the indented syntax use the
extension .sass.
If you put your example to http://www.sassmeister.com/ it works as expected. They're using v3.4.21.
Maybe try wrapping the & symbol with interpolation helpers #{&}:
.navbar {
min-height: 30px;
#{&}-nav {
li{
a {
padding-top: 5px;
padding-bottom: 5px;
}
}
}
}
It should produce the same result.
Related
I got some example CSS code (well written and working) with many span statements inside, that I modified for my use. What exactly they do? VS Code shows me as an error, but browsers don't complain, and I couldn't find any references in the CSS documentation, as if this syntax does not exist.
Example:
h2 {
letter-spacing: 2vw;
font-size: 2vw;
font-weight: bold;
text-align: center;
span {
display: block;
font-size: 8vw;
letter-spacing: -1vw;
}
}
VS code complains:
"code": "css-colonexpected",
"severity": 8,
"message": "colon expected",
"source": "css",
If I add colon it would be suggesting keys right away, and would not accept anything in curly brackets{}
Thanks
the brackets { and } define scope so that
body {
color: #000;
}
Would define that the color (text color) of the body element type (css query selector) would be #000 (which is hex for black)
however, if you have an element in an element like this using a precompiler such as less for css using the less syntax.
body {
color: #000;
span {
color: #FF0000;
}
}
this would do as the previous css did, but in less you can create a hierarchy
the body's color will be set to black as before.
and then any span child of the body element will have its color set to red (#FF0000)
CSS/LESS are used in conjunction with the HTML DOM object model.
You're correct that this syntax doesn't exist for CSS, as it doesn't support nested selectors like this.
The correct syntax would be:
h2 {
letter-spacing: 2vw;
font-size: 2vw;
font-weight: bold;
text-align: center;
}
h2 span {
display: block;
font-size: 8vw;
letter-spacing: -1vw;
}
This syntax is of course perfectly acceptable if you use a CSS preprocessor, like SASS or LESS for example. CSS preprocessors compile CSS written like you've done into standard CSS syntax, and add extra functionality, like using variables and conditional statements.
I think that modern browsers are probably capable of understanding syntax like this in certain situations, but if you want to use to this sort of syntax then using a preprocessor is a safer option to avoid errors.
I've just been following the Sass tutorial. For some reason though the Sass file is not correctly generating the css. The terminal says the css is invalid but I'm pretty sure it's not. I've tried changing it too just in case there was a problem...
What have I done wrong?
Sass Version: Sass 3.1.10
Error message:
error sass/test.sass (Line 3: Invalid CSS after "80%":
expected expression (e.g. 1px, bold), was ";")
.sass file contents:
/* style.scss */
#navbar {
width: 80%;
height: 23px;
}
Based on your error message (error sass/test.sass) I can tell you're using the .sass extension for a Scss file. Change your file name to style.scss.
Sass and Scss use two different and incompatible syntaxes.
Try either:
/* style.scss */
#navbar {
width: 80%;
height: 23px;
}
Or:
/* style.sass */
#navbar
width: 80%
height: 23px
Note the difference in file extension and syntax.
What's the best approach to getting Sass (3.4.15) to parse browser CSS property hacks - not using compass or any other library. E.g. '_property' or '*property'.
.hack-test{
display: inline-block;
display: *inline;
}
Invalid CSS after " display: ": expected expression (e.g. 1px, bold), was "*inline;"
I searched around Stack Overflow but could not find anything that could definitively answer this.
You can use sass strings, in such a way that the invalid css is injected as a string.
I put it all inside a mixin for re-use:
$star: "*inline";
#mixin hack-test($selector) {
#{$selector} {
display: inline-block;
display: #{$star};
}
}
So if you try and use the mixin:
#include hack-test('.foo');
The css output will be as desired:
.foo {
display: inline-block;
display: *inline;
}
You can view some SCSS browser hacks I've put on Github here
I'm still getting to grips with SASS. I want to check within a selector whether or not an element is within a certain other ancestor/parent element.
I have this:
p.key-name {
float: left;
padding: 4px 32px 0 2px;
}
li:last-of-type p.key-name {
padding-right: 0;
}
Works great, but is regular CSS so no surprise there. But I'd rather have that second selector grouped within the first, so I tried this:
p.key-name {
float: left;
padding: 4px 32px 0 2px;
li:last-of-type & {
padding-right: 0;
}
}
That doesn't work. I can see why by looking at the processed CSS, but I'm wondering if there's a way of using SASS to make this notion work.
Thanks for any help offered!
Edit: As explored in the comments, it turns out that the code works but there's a parent <li> higher up the hierarchy interfering due to a lack of specificity in the SASS (i.e. no class or anything more qualifying on the li:last-of-type). So the two snippets above are in fact equivalent _as long as there are no <li>s surrounding these ones.
I'm trying to override a particular widget's style using UiBinder. What am I overlooking?
<ui:style>
/*************
* Note #1
*************/
.btnVote {
display: inline-block;
width: 50px;
height: 50px;
background: #fff;
margin: 5px;
text-align: center;
outline: none;
cursor: pointer;
}
/*************
* Note #2
*************/
.btnVote-up-hovering, .btnVote-down-hovering {
background: #ddd;
}
.btnVote-up-disabled, .btnVote-down-disabled {
border-shadow: inset 0 1px 3px #aaa;
}
.lblName {
line-height: 50px;
font-size: 40px;
padding: 5px 10px;
}
.clear {
clear: both;
overflow: auto;
}
.floatLeft {
float: left;
}
</ui:style>
<g:HTMLPanel styleName="{style.clear}">
<g:FlowPanel styleName="{style.floatLeft}">
/*************
* Note #3
*************/
<g:PushButton ui:field="btnVoteUp" stylePrimaryName="{style.btnVote}">
(+)
</g:PushButton>
<g:PushButton ui:field="btnVoteDown" stylePrimaryName="{style.btnVote}">
(-)
</g:PushButton>
</g:FlowPanel>
<g:FlowPanel styleName="{style.floatLeft}">
<g:Label ui:field="lblName" stylePrimaryName="{style.lblName}"/>
</g:FlowPanel>
</g:HTMLPanel>
Note 1: This rule is being applied and works fine
Note 2: This other rules seem to be getting ignored (they don't take effect)
Note 3: The default naming for the widget is being reset, hence Note 1 works fine. The base class is set to GOGXR1SCFI instead of gwt-PushButton
Why aren't they other rules working? When I hover the widget, the class GOGXR1SCFI-up-hovering is indeed set to the widget, but no accompanying CSS.
Thanks for your help.
Update
Something I ran into that gave me a hard time for a while: when you use the #external keyword, you must place a semi-column at the end of the #external statement, as in:
<ui:style>
#external .btnVote;
.btnVote {
...
}
</ui:style>
<g:FlowPanel styleName="{style.btnVote}"/>
One thing you could do is to create your CSS using ClientBundle, define all the different states there, then handle the various states manually. This way you don't need to define classes as #external, and GWT will optimize the CSS for you (shorten the names, only ship what gets used, etc.). This is especially beneficial for custom widgets and such.
The easiest way to deal with this is to write #external .btnVote, .btnVote-up-hovering, .btnVote-down-hovering, .btnVote-up-disabled, .btnVote-down-disabled at the top of your <style> section.
The original GWT widgets do not work well with CSS resources (like the one you have in your UiBinder). They depend on a primary style name that they append things like "up-hovering" to. This is terrible for CSS resources and UiBinders because when you type "up-hovering" it becomes things like SDLFJKS.
The button styles do NOT get obfuscated (so you can read "up-hovering"). Your UiBinder styles DO get obfuscated. You can never make them match as long as obfuscation is going on.
So, the #external keyword tells UiBinder and CssResource not to obfuscate certain styles. Now, when you use {style.btnVote-up-hovering}, that will actually come through to the final HTML, which is where these old-fashioned GWT styles will be applied.
I suspect you have CSS stylenames being obfuscated by GWT in your UIBinder. Reference - garbled css name when styling within UiBinder
Chose the approach you find easier to integrate in your proces. Cheers :)