I can write in scss this:
:root {
margin: 0px;
}
but looks I get compiler error when I write in sass same thing:
:root
margin: 0px
I just get compiler error: "Error: Invalid CSS after "r": expected 1 selector or at-rule, was "root: {"
You can try preprending inverted slash \:root or twice dots ::root
Related
I have a SCSS mixin with the below definition for linear-gradient.
#mixin custom-background(
$color: $color,
$progress: 0
) {
background: linear-gradient(to right, $color #{$progress}%, #9EC9DB 0);
border: #10516C solid #9EC9DB;
}
But on compiling with gulp-sass it breaks with below error:
Error: Invalid CSS after "... #{$progress} %": expected expression (e.g. 1px, bold), was ", $progress-"
on line 15 of file.scss
nt(to right, $color #{$progress} %, #9EC9DB 0);
------------------------------------------^
messageOriginal: Invalid CSS after "... #{$progress} %": expected expression (e.g. 1px, bold), was ", $color"
Interpolation is for different purposes, like creating a selector from a string variable. Not to convert values. To convert a number to percentages, simply multiply it by 100%.
#mixin custom-background(
$color: $color,
$progress: 0
) {
background: linear-gradient(to right, $color $progress * 100%, #9EC9DB 0);
border: #10516C solid #9EC9DB;
}
It is possible, that you want to use 1% or 10000% instead (I don't know $progress input range).
Also: what the hell is $color: $color? According to SASS scope rules, it doesn't make any sense.
I am using Sublime Text 2 and LiveReload to compile my .scss file. I also tried codekit with the same problem.
Using + and - work no problem, but * and / don't compile.
font-size: 30px / 2px; doesn't compile to font-size: 15px;
but
font-size: 30px + 2px; does compile to font-size: 32px;
Any ideas? The code hinting also doesn't seem to be working for the multiply and divide operators, could it be a package conflict? Seems unlikely.
Put it in parenthesis so SCSS understands you want it to do an arithmetic operation. Also, you do not want to divide px by another px number as this will result in a unitless number.
This is what you are looking for:
div {
font-size: (30px / 2)
}
I can't get a mixin to accept a block:
=my-mixin($some-var)
width: $some-var
#content // Is this correct?
+my-mixin(123px)
height: 100px
This results in a "mixin doesn't accept a content block" error. I'm using the current version of Sass. Thanks for help.
syntax is ok with version 3.2 of SASS, double check that
For me the problem was with SASS indentation.
You can't nest another block within a mixin like this:
.button-cta
+button (transparent, tomato)
&:hover
background-color: tomato
color: #fff
instead:
.button-cta
+button (transparent, tomato)
&:hover
background-color: tomato
color: #fff
hover state must not be nested
I was getting this error too. Turned out that somewhere else in my scss I was using #mixin mobile-only instead of #include mobile-only - aka, I was accidentally redefining the mixin later in the code.
I'm using Susy/Compass/SASS for a simple responsive grid on my current project. However, the Compass compiler won't compile Susy's at-breakpoint mixin. Here's my grid:
+border-box-sizing
$total-columns : 3
$column-width : 4.5em
$gutter-width : 1em
$grid-padding : $gutter-width
$container-style: fluid
$break-1: 6
$break-2: 10
body
+container($total-columns, $break-1, $break-2)
.list
+span-columns(3)
.detail
display: none
+at-breakpoint($break-1) {
.detail
+squish(1)
+span-columns(3)
.list
+span-columns(2 omega)
}
+at-breakpoint($break-2) {
.detail
+squish(1,1)
+span-columns(5)
.list
+span-columns(3 omega)
}
When Compass tries to compile, I get an error: error screen.sass (Line 20 of _grid.sass: Invalid CSS after "($break-1) ": expected expression (e.g. 1px, bold), was "{")
identical screen.css.
If found a previous question similar to mine that suggested the compass-susy-plugin was the culprit. I have removed that (not sure that I had it to begin with) and installed the Susy gem again to be safe, but I still get the error.
Has anyone had this or a similar problem? Thanks in advance for your help!
Susy does support the indented Sass syntax. The problem is you're currently using a hybrid of both syntaxes. Try this:
#import "susy"
+border-box-sizing
$total-columns : 3
$column-width : 4.5em
$gutter-width : 1em
$grid-padding : $gutter-width
$container-style: fluid
$break-1: 6
$break-2: 10
body
+container($total-columns, $break-1, $break-2)
.list
+span-columns(3)
.detail
display: none
+at-breakpoint($break-1)
.detail
+squish(1)
+span-columns(3)
.list
+span-columns(2 omega)
+at-breakpoint($break-2)
.detail
+squish(1,1)
+span-columns(5)
.list
+span-columns(3 omega)
Notice there are not curly brackets after the at-breakpoint() mixins. Just indent.
I found the problem. Susy doesn't support SASS's indented syntax. Boo!
I added in tons of curly braces, semicolons, and #includes to fix it.
UPDATE:
OK, the problem was not support for the SASS syntax. It was my use of the curly braces in the indented syntax! For some reason, my brain decided that the code block would need to be in braces since it would be passed to a mixin. My mistake and my apologies to the devs of Susy.
I'm attempting to re-learn 960gs using sass syntax. I am confused on the difference between "+" and "=" sass syntax. For example:
.wrapper
+grid-container
and
.wrapper
#include grid_container
would produce the same results in my compiled css file
.wrapper {
margin-left: auto;
margin-right: auto;
width: 960px;
}
So what is the difference between using "+" and "#include"?
No difference at all. Quoting Sass documentation:
Sass supports shorthands for the #mixin and #include directives. Instead of writing #mixin, you can use the character =; instead of writing #include, you can use the character +.