The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Susy, Mixins & Sass (not Scss)

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #205684

    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?


    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.


    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.


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


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


    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):

    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.


    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)

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.