Susy, Mixins & Sass (not Scss)

[bmoneruiux]

Hey guys!

Diving head first into Susy, however having a a difficult time understanding how to apply a mixin I have.

The mixin is:
@mixin vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

Which I’ve changed to:
@mixin vertical-align
position: relative
top: 50%
-webkit-transform: translateY(-50%)
-ms-transform: translateY(-50%)
transform: translateY(-50%)

However, during use, all types of errors are popping up. Any guidance on this?

[Senff]

all types of errors are popping up

For these “all types of errors”, there are all types of solutions.

In other words: it would help a lot if you would include the errors here.

[bmoneruiux]

With the above change, I’m getting:

Error: Properties are only allowed within rules, directives, mixin includes, or other properties.
on line 10 of /Volumes/Brandon’s External/Work Files/Builds/cammenga/style.sass
Use –trace for backtrace.

[bmoneruiux]

I guess I need to know what’s the proper way to format a mixing when using Sass and Susy.

[Senff]

I’m not familiar with Susy, but are you actually supposed to not use curly brackets and semicolons?

[MattDiMu]

Here you’ll find a gist, where I’ve created this vertical-align mixin you wanted and used it (and some other mixin from susy):

https://gist.github.com/MattDiMu/12bf026643836e8035cc

I think you’re confused about SASS and SCSS. They are both the same language, only the Syntax is different. The SCSS-Syntax is very CSS-like with semicolons and curly brackets, whereas the SASS-Syntax strips them to look more clean. So SASS is less to write, but feels less like normal CSS and is therefore in generalmore difficult for newcomers to learn.

Regards
Matt

edit-hint: You shouldn’t mix the two syntaxes. So if you prefer to write by using the SASS-Syntax, you should import the SASS-Version of susy (the files should have a .sass extension, NOT a .scss extension)

[Author]

Posts