SASS CODE:
#{'body > *:not(.this)'} {
background: red;
}
EXPECTED RESULT
body > *:not(.this) {
background: red;
}
ACTUAL RESULT
body > * :not(.this) { //<-- SASS adds a space between * and :
background:red;
}
No matter what I try, SASS keeps adding an unnecessary space. How can I avoid this from happening? The space blocks the functionality of the not-selector.
This was not due to SASS. I was using CodeKit 3 and the following SASS setting messed it up:
Output style: Compressed
Put this on any other output style and you can avoid the above.
Related
I am looking at a SCSS somebody else wrote, and I notice a selector with a plus and ampersand immediately to the right.
.listing-feature {
&__summary {
.feature-title+& {
color: #f00;
}
}
}
What does this do? I tried compiling the project, but I can't find what this compiles into.
Would it be something like this?
.feature-title + .listing-feature__summary {
color: #f00;
}
The & is just shorthand for the selector (.listing-feature__summary in your case).
The plus means that every .listing-feature__summary class that follows the .feature-title class will be affected by the styles added.
I found an online SASS compiler and plugged this code in and got.
.feature-title + .listing-feature__summary {
color: #f00;
}
This ends up being a sibling selector.
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
I'd like to get the result below using sass nesting
css
.box {...}
h3.box-title {...}
I tried code like this, but it causes an error.
sass
.box {
h3.&-title {
...
}
}
I'd like to know if there is any way to do this keeping sass nesting?
I know that it's not good to write HTML element on CSS,
but I'm working on a project that I can't modify existing CSS and need to overwrite them.
Try this:
.box {
#at-root h3#{&}-title {
...
}
}
I used the sass interpolation #{} to compile expectedly the value of &, and #at-root to prevent the prefix .box (prevent resulting to .box h3.box-title because we want h3.box-title only - without the prefix .box)
Here's the captured result:
Anyway, I don't think this is a good practice to write sass/scss
.box
and
.box-title
are two different class names. Unless h3.box-title is a child of .box, honestly, there's no reason you should be nesting it.
Also & is used to look for additional class names. i.e.
.box {
&.box-title {}
}
would be
.box.box-title {}
The processed code looks like this:
.body {
color: #eeeeee;
}
.someting {
color: #dddddd;
}
I want it to be:
.body {
color: #eeeeee;
}
.someting {
color: #dddddd;
}
Is there such a possibility? Google can't find an answer.
I bet you could write a simple regex find-replace looking for }'s and replacing with }\n, and have Grunt execute that on your css (post-compilation from SASS).
This looks like it'd do the trick:
https://npmjs.org/package/grunt-regex-replace
I think the closest you can get is expanded. The extra line break won't be there when you're nesting but your example code would output exactly like you demonstrated.
To answer this question, you can go to rubygems/gems/sass-3.4.9/lib/sass/tree/visitors/to_css.rb (or anywhere your to_css file is), and edit this:
output("}" + trailer) to output("}\n" + trailer)
And then remove this newline:
trailer = "\n" if node.group_end
It might have been an oversight when parsing the nesting, because the newline set on "trailer" applies to every other line (so you'd have double the lines without removing it if you don't nest anything).
I'm having real issues with getting LessCSS to process a file that has a series of nested rules using the "&" concatenation selectors.
For example, the following will work without errors:
.grey-table {
background: #EDEDED;
tr {
th {
background: #DEDEDE;
}
td {
color: #888;
}
&:nth-child(odd) {
td {
background-color: #F9FCFF;
}
}
&:nth-child(even) {
td {
background-color: #EDF5FF;
}
}
&:hover {
td {
background-color: #DFEAF9;
}
};
}
}
However if I change the colours to be a function (of any sort - predefined or mixin), I get the error
"Syntax Error on line 12 - undefined"
.grey-table {
background: desaturate(#EDEDED, 100%);
tr {
th {
background: desaturate(#DEDEDE, 100%);
}
td {
color: desaturate(#888, 100%);
}
&:nth-child(odd) {
td {
background-color: desaturate(#F9FCFF, 100%); <------ Line 12
}
}
&:nth-child(even) {
td {
background-color: desaturate(#EDF5FF, 100%);
}
}
&:hover {
td {
background-color: desaturate(#DFEAF9, 100%);
}
};
}
}
I cannot find any reference material on this but I'm sure I can't be the only one?
Many thanks.
i usually define the colors first and then call them in the functions:
#mycolor: #F9FCFF;
desaturate(#mycolor, 100%);
I am sorry, but there are no errors with your code on the less page:
http://less2css.org/
Try pasting it in (without your <---line 12) and you will see it works.
MAybe you are using some javastript that interacts with the less script on your page.
Edit:
You also have an semicolon at the end that breaks older versions (<=1.3.1) of the less parser.
If I take it out it parses well through al versions ... and I do not manage to reproduce your error.
I'm an idiot and had not noticed the tab on line 12 after the colon.
That's what was causing the error, but only when there was a less css mixin/variable. Apologies to all.
I agree with Martin, I cannot reproduce your error using your code above and the compiler at http://less2css.org/. The only ways I can reproduce a syntax error message on line 12 are:
Remove the colon after the background-color property.
Add some non-comment related characters after the end semi-colon (like your note <--- line 12 is invalid, but I'm sure you put that in for illustration above).
Add an end quote after either (a) the color, (b) the percentage, or (c) the parenthesis. An example of (b) - 100%'. There may be some other characters that would cause it too, but some just print right out into the css wihtout a syntax error.
A character separated by a space or other invalid character for a property name before the property name, like y background-color or *background-color.
Obviously, none of those exist in your code shown above, but you might double check that your actual code does not have some extra characters or missing characters that might be causing the issue.
I am building a widget that will be displayed on a client's site. We cannot use an iFrame so I am forced to use an exhaustive CSS reset (https://github.com/premasagar/cleanslate) to avoid interference with their styles. To use that solution, I need to add !important to all of my styles and because there are a lot of them and I want to keep this code easy to maintain, I'm looking for a more dynamic solution.
I am able to add !important to the stylesheet via javascript but that's not ideal for a production environment. I am using CodeKit and LESS and wondering if either of these are able to help me easily add !important to all styles when the CSS file is generated.
Mixin?
CodeKit config?
Update: Yes, LESS Can Help
I hate using !important except in the most extreme circumstances. Most people use it like a chainsaw when they should be using a scalpal to do the job. Nevertheless, I understand the issues facing widget developers like yourself, and your choice to use https://github.com/premasagar/cleanslate leaves you with no option.
Marc's answer noted a good feature of LESS, but he failed to demonstrate how that can help in this matter.
If you wrap your entire LESS code in a namespaced mixin, then this feature does exactly what is needed. So assume your widget code looked like this (you mentioned you are already using some type of class for your widget):
.yourWidgetClass div > p {
prop: something;
&:hover {
prop: some-hover-style;
}
}
.yourWidgetClass .someClass {
prop: something;
}
Then you can do this (wrapping all your widget code in #makeImportant() then calling that mixin with the !important feature noted in Marc's answer):
#makeImportant() {
.yourWidgetClass div > p {
prop: something;
&:hover {
prop: some-hover-style;
}
}
.yourWidgetClass .someClass {
prop: something;
}
}
& {
#makeImportant() !important;
}
This produces the following CSS Output:
.yourWidgetClass div > p {
prop: something !important;
}
.yourWidgetClass div > p:hover {
prop: some-hover-style !important;
}
.yourWidgetClass .someClass {
prop: something !important;
}
For my original (accepted) answer that was way more manually intensive, see the edit history.
I found that LESS can mark all properties set by a mixin at once as !important when specify !important after the mix-in call.
.someMixin() {
background-color: #fff;
cursor: pointer;
}
.someUsages {
.someMixin() !important;
}
Results in:
.someUsages {
background-color: #fff !important;
cursor: pointer !important;
}
For more information on this topic see the LESS doc about "The !important keyword".