What Does Hash (#) Sign Do Outside Loops in SASS

What does hash (#) sign do outside loops in SASS?

#{} is used for string interpolation: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#interpolation_

There is one exception to this, though: when using #{} interpolation, quoted strings are unquoted. This makes it easier to use e.g. selector names in mixins. For example.

So this technique is used sometimes to allow using sass values in selectors. E.g.:

$gutter: 10;

.grid#{$gutter} {
    background: red;
}

Now to your question. I really don't see any reason why would anybody use string interpolation in this selector:

#{h1, h2, h3, h4, h5}
{
    color: #000;
}

My best guess is that sass variable will be added later to that selector, or the selector will be completely replaced with a variable.

What does # mean in SASS?

May be this can help you,

#{} is used for string interpolation:

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#interpolation_

Hash in front of a SASS argument

The #{} syntax will interpolate the value in the curly braces into a string. This is useful, for example, in the following situations, when your variable only makes up part of the string. eg:

@mixin background-image($directory) {
    background-image: /#{$directory}image.jpg;
}

In this way, the SASS interpreter understands where the variable $directory ends.

If you were to do it this way, the compiler would get confused:

@mixin background-image($directory) {
    background-image: $directoryimage.jpg;
}

In your given example, it is not needed. Both versions would produce the same results.

You can do this outside of mixins as well. Consider this example using a for loop:

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

Which would produce:

.item-1 { width: 2em; }
.item-2 { width: 4em; }
.item-3 { width: 6em; }

Sass each function is compiling with dollar sign in front of it

You cannot create dynamic variable in sass. Instead you can achieve your desired result using map

example:

$green-1: #9ae200;
$green-2: #5ea600;
$color-map: (
  green-1: $green-1, 
  green-2:  $green-2,
);

.body{
  @each $key,$value in $color-map {
      &.#{$key} {
          background-color: $value;
      }
  }
}

In Sass, how can I output a % sign

You can use the percentage() function to convert the number to a percentage and then divide it by 100:

@for $i from 1 through 3 {
  .bottom-#{$i} {
    bottom: percentage($i / 100);
  }
}

Does a trailing plus sign on the left make sense in SASS

While valid, adding an ampersand before the combinators is not necessary at all. The ampersand is only needed for attribute selectors, pseudo classes, and pseudo elements, because the real difference between those using & and those not (in theory) is the space in the output. Here's a good article on this.

Which of these two is the best way to write SASS

I think this is a very subjective question. Everyone has their own opinion and preference for structuring their CSS. I therefore don't think there's a right or wrong answer.

Personally, I prefer to nest my breakpoints within my CSS selector as follows, so that you can see how the styles change between breakpoints at a glance.

.example {
    // mobile

    @include breakpoint(small) {
        // tablet
    }

    @include breakpoint(medium) {
        // desktop
    }

    @include breakpoint(large) {
        // large desktop
    }

    &--modifier {
        // mobile

        @include breakpoint(small) {
            // tablet
        }

        @include breakpoint(medium) {
            // desktop
        }

        @include breakpoint(large) {
            // large desktop
        }
    }
}

Generating flexbox classes using SASS

You're really close, the code sample wasn't complete, but if I get what you're trying to accomplish its this. Looks like you had $prop and $dir when it should have been #{$prop} and #{$dir} in your @each loop

Basically you have to use string interpolation on those variables (What does hash (#) sign do outside loops in SASS?).

Functioning example:

https://www.sassmeister.com/gist/459480125193d418702c9c64996bf89d

However...

The available properties for justify-content and align-items are actually different, so I wouldn't take this approach. Rather use two array variables and pass each to the mixin to get the proper output.

.flex {
  display: flex;

  $justify-positions: (
      start: flex-start,
      end: flex-end,
      center: center,
      around: space-around,
      between: space-between,
      evenly: space-evenly
  );
    $align-positions: (
      start: flex-start,
      end: flex-end,
      center: center,
      stretch: stretch,
      baseline: baseline
  );

  @mixin just-align($name,$prop,$arr) {
      @each $mod, $dir in $arr {
          &--#{$name}-#{$mod} {
              #{$prop}: #{$dir};
          }
      }
  }

  @include just-align('align','align-items', $align-positions);
  @include just-align('justify','justify-content', $justify-positions);
}

Will compile as:

.flex {
  display: flex;
}
.flex--align-start {
  align-items: flex-start;
}
.flex--align-end {
  align-items: flex-end;
}
.flex--align-center {
  align-items: center;
}
.flex--align-stretch {
  align-items: stretch;
}
.flex--align-baseline {
  align-items: baseline;
}
.flex--justify-start {
  justify-content: flex-start;
}
.flex--justify-end {
  justify-content: flex-end;
}
.flex--justify-center {
  justify-content: center;
}
.flex--justify-around {
  justify-content: space-around;
}
.flex--justify-between {
  justify-content: space-between;
}
.flex--justify-evenly {
  justify-content: space-evenly;
}

---

Related Topics