[kloeten]

Hallo,

ich mache gerade meine ersten "Gehversuche" mit Sass.

Ich möchte gerne Media-Queries so einsetzen wie in diesem Tutorial:

https://davidwalsh.name/write-media-queries-sass

Leider ist dieses, wie auch alle anderen welche ich gefunden habe für die Nutzung in scss Dateien bestimmt.

Ich habe versucht das ganze in das .sass Format umzusetzen:

// Variables/Media Query

$tablet-width: 768px
$desktop-width: 1024px

@mixin tablet 
  @media (min-width: $tablet-width) and (max-width: $desktop-width - 1px) 
    { @content; }
  


@mixin desktop 
  @media (min-width: $desktop-width) 
    { @content; }

.shop_logo 
  float: left
    @include tablet
      float:none

Erhalte dann aber die Fehlermeldung:

error sass/_custom.sass (Line 35: Mixin "tablet" does not accept a content block.)

Was mache ich falsch?

[hemfrie]

Du kannst Dir auf die Schnelle mit Online-Tools wie SassMeister | The Sass Playground! behelfen. Wenn Du dort Dein scss Beispiel einfügst und dann im Menü options > Syntax Sass auswählst erhälst Du Deine gewünschte syntax.

$tablet-width: 768px
$desktop-width: 1024px

=tablet
  @media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px})
    @content

=desktop
  @media (min-width: #{$desktop-width})
    @content

[kloeten]

Vielen Dank für deine Antwort.

Ich habe das ganze jetzt mal ausprobiert, bekomme aber leider folgende Fehlermeldung:

 (Line 38: Illegal nesting: Only properties may be nested beneath properties.)

Zeile 38:

 @media (min-width: $tablet-width) and (max-width: $desktop-width - 1px)

Hast du vielleicht eine Idee woran das liegt?

[hemfrie]

Anhand der einzelnen Zeile kann ich nicht erkennen wo das Problem liegt.

Warum schreibst Du das media query komplett aus? Ich dachte Du wolltest dafür das mixin verwenden?

@include tablet

[kloeten]

Die Zeile stammt aus der Datei in der die Mixins deklariert werden. Hier mal der komplette Inhalt.

// Mixins
// ------
// Mixins allow you to define styles that can be re-used
// throughout the stylesheet without needing to resort to
// non-semantic classes like .float-left. Mixins can also
// contain full CSS rules, and anything else allowed
// elsewhere in a Sass document. They can even take
// arguments which allows you to produce a wide variety
// of styles with very few mixins.
//
// For complete documentation:
// Sass mixins:		http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixins
// Bourbon mixins: 	http://bourbon.io/docs/

// Import variables for use in Mixins.
@import _variables.sass

// Rounded corners mixin.
@mixin border-radius($top: 10px, $right: $top, $bottom: $top, $left: $right)
  border-radius: $top $right $bottom $left
  -moz-border-radius: $top $right $bottom $left
  -webkit-border-top-left-radius: $top
  -webkit-border-top-right-radius: $right
  -webkit-border-bottom-right-radius: $bottom
  -webkit-border-bottom-left-radius: $left

@mixin grid-column
  width: 22%
  margin: 1%
  float: left
  
// Variables/Media Query

$tablet-width: 768px
$desktop-width: 1024px

=tablet
  @media (min-width: $tablet-width) and (max-width: $desktop-width - 1px)

  @content

=desktop
  @media (min-width: $desktop-width)

  @content

[hemfrie]

Vermutlich liegt es an der falschen Einrückung (Verschachtelung) von Deinen Mixins.
Damit die funktionieren muss @content richtig eingerückt sein.

Das ist der Grund warum ich die Sass-Schreibweise bescheiden finde
Mit der Scss-Schreibweise ist man einfach näher am reinen CSS.

=tablet
  @media (min-width: $tablet-width) and (max-width: $desktop-width - 1px)
    @content

=desktop
  @media (min-width: $desktop-width)
    @content

[kloeten]

An der Einrückung lag es auch nicht.

Aber wahrscheinlich hast du recht, wenn du sagst das es mehr Sinn macht mit scss zu arbeiten.

Ich habe jetzt alle Dateien konvertiert und nun keine Probleme mehr .

Vielen Dank für deine Hilfe

[Thielo]

Klammern retten Leben. Auch beachten sollte man evtl die genutzte SASS Version.