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 +.
Related
I would like to write such a mixin so that you can conditionally pass an array consisting of a property and its value. I will give an example to make it clearer, it is obviously incorrect due to poor knowledge of sass. Is it possible to implement with the tools that sass provides?
#mixin myMedia($args) {
$sizes: (
xxl: 1920px,
xl: 1440px
);
#for $i from 1 through $args {
#media(max-width: $sizes[$i])
$args[$i] #content
}
}
#include myMedia(
{font-size: 16p; line-height: 16px;},
{font-size: 14p; line-height: 14px;}
)
I tried for , each , functions , but didn't come up with anything like what I described above
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 currently in the process of learning 960gs using sass / compass, but I'm confused as to what the "$n" is in the following code and how to use the arguments.
$ninesixty-gutter-width: 20px !default
$ninesixty-grid-width: 960px !default
$ninesixty-columns: 12 !default
$ninesixty-class-separator: "_" !default
=grid-container
margin-left: auto
margin-right: auto
width: $ninesixty-grid-width
=grid-width($n, $cols: $ninesixty-columns, $gutter-width: $ninesixty-gutter-width)
width: $ninesixty-grid-width / $cols * $n - $gutter-width
According to the docs for that plugin...
"N is the number of grid columns to span as in grid_N or push_N with the original 960 Grid System framework."