$some-variable: 100vh - 1rem - 2rem;
$other-variable: calc(#{$some-varaible})
.test {
height: $other-variable; // This get's converted to calc(100vh-1rem); since there are no spaces available the calculation's won't work
max-height: calc(100vh - 1rem); // This works fine on browser and is computed correctly
}
Note that with node-sass this worked. After migrating to sass it has stopped working. I guess it should work as it is supported by the browser and the spaces should not have been trimmed.
Also, should this be considered as a breaking change and should be mentioned while converted the application from node-sass to sass?
Related
We are using sass and have a snippet that looks like this:
.button-row {
float: right;
#media screen and (max-width: 800px){
float: none;
.btn, .btn-primary { <-- this line is giving us an error
etc...
SonarQube is flagging that line and states:
Unexpected unknown type selector " "
(and, yes, that's spaces in between the quotes, but it also underlines that entire line of scss as an error)
My question: What does that mean?
I'm researching this and there does seem to be a lot of issues with SASS and SonarQube specifically around custom elements. But that's not even what's happening here. This is just some (from what I can tell) perfectly valid css classes that sonarQube just doesn't like for some reason. I'm stumped.
If it matters were running SQ 7.9, so definitely a few versions behind.
I'm working through some Sonarqube bugs and it is flagging a LOT of standard CSS, SASS, LESS code which it should not.
My guess is that Sonarqube does not process these properly. I'm personally marking code that I know is correct as a false positive.
This is my first time using a website template which uses SCSS and thus I have no clue what to do with this.
I have the following code to set the text stying of my navbar links:
.nav-link{
font: 500 15px/120px $rob;
text-transform: uppercase;
color: #fff;
padding: 0px;
display: inline-block;
&:after{
display: none;
}
}
I have set the min/max font size to be 15px/120px. However on my website it keeps appearing as 12px. What am I doing wrong?
Inspect element shows this:
But when I check the code it shows as this:
With a bit of luck, you can find your way to the truth using Sass source maps. It seems like your template has this built-in, since you can see the file name _header.scss:17 in your inspector code. (If source maps weren't enabled it would just say the name of the compiled .css file.)
In Chrome dev tools, you can ctrl-click the property value - in this case 500 15px/120px $rob as shown in your screenshot.
This should take you to the "Sources" panel in dev tools and show the .scss file that compiles this specific value, and you can see if you have been editing the right file.
Since it's a common practice to split up Sass files into smaller files (or partials), there's a good chance your edits are being overwritten in one of the other partials in the template.
In the official SASS mixins, it shows
#mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
But when I downloaded Bulma, their mixins style is quite different. Can you help me understand or direct me to the relevant article?
=unselectable
-webkit-touch-callout: none
-webkit-user-select: none
-moz-user-select: none
-ms-user-select: none
user-select: none
%unselectable
+unselectable
Here I'm not able to understand the usage of =, % and +. (Maybe % is to extend but not sure on it.)
=, % and + symbols are sass syntax of sass-lang.
There are two variants of syntax used in sass-lang. One is scss and other is sass.
bulma uses sass syntax. See What's the difference between SCSS and Sass? for difference between two variants.
https://sass-lang.com/guide : displays guide in scss and sass both.
In my Sass, I have a variable like this:
$icon-pencil: \270e;
Then, later I have this:
i.icon-pencil:before {
content: "#{$entypo-icon-pencil}";
height: inherit;
}
(Yes, I know that I don't need interpolation there. I actually have a function there, but I'm simplifying to make the question easier to follow.)
That outputs this:
i.icon-pencil:before {
content: "\\270e";
height: inherit;
}
The extra slash makes it just output the text instead of the HTML entity (i.e., the pencil icon).
Why is it being escaped? What can I do to prevent it?
I found this comment which seems like my issue, but not sure where to go from here.
After running into problems with auto-suggest stripping off leading zeroes, I took the plunge and updated my dev copy of CF to 9.0.1, including the cumulative hot-fix. Now I see a new problem.
Every one of my existing cfgrids is now displaying incorrectly in Firefox 6.0.2. The .x-panel, .x-panel-bwrap, .x-panel-body classes have a computed width of 12px, and are basically unviewable. I find that if I insert a css rule on those classes like so:
.x-panel, .x-panel-bwrap, .x-panel-body { width: 100% !important; }
the grids are again viewable. I did clear the browser cache to make sure it was importing the correct files.
IE8 and Chrome both seem to be unaffected.
OK, Peter, why not? My workaround, as posted in my question, is to add the following css rule:
.x-panel, .x-panel-bwrap, .x-panel-body { width: 100% !important; }