What does ".@" in Sass?

HTML & CSS
1

I’m going over a tutorial discussing a SASS grid system – no need to discuss the pros and cons of a grid system here. I am new to Sass. It generally seems straight forward but there’s some aspects of the syntax I may not understand.

I came across this:

.@{row-notation} {
    padding: 0 1em;
    ...

I excluded the rest. What does the .@ mean syntactically? Is it some kind of interpolation? Or perhaps a typo? I’m referring to the official Sass site and a book and I can’t find anything referring to that.

2

What tutorial showcases this? I’m not particularly strong with SASS (vanilla CSS kinda guy) but this looks like a typo. Have you tried it?

3

Ah, forgot to provide a link: http://seangoresht.com/#/blog/posts/understanding-the-golden-grid-system

If you do a cmd/ctrl+f for “.@{row-notation}” you’ll find it.

I have tried it although my error does not clearly point to that, or at least my understanding of the error. Additionally I’m so new that I am a bit uncertain.

4

Well @ is used to store variable information.

He has this.

@row-notation: “row”;

Now when he does something like this.

.@{row-notation} that will parse out to be this.

.row{}

And if you remember CSS, that targets an element with the class=“row”.

That’s how I interpret it anyway. Not a huge SASS guy. Might be off base.

5

First off, this is LESS not SASS. They are different languages. SASS variables start with $ instead of @. There are a few other nuances, but honestly this is the biggest.

This is probably why you’re getting an ERROR. :smiley:

@row-notation: "row";

it means .row. The first . is nothing special. The @ is the variable. Wrapping it in @{ } tells the compiler that the variable is between the brackets, otherwise you’ll get a compile error.

Stick this:

@row-notation: "row";

.@{row-notation} {
    padding: 0 1em;
}

In this: http://winless.org/online-less-compiler

And you’ll get this:

."row" {
  padding: 0 1em;
}

Which, he I don’t think he should have the " " around it. :confused:

There are a lot of issues with this site itself… :confounded:

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.