zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Mixin in Sass

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.04.2017, 14:37
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.12.2007
Beiträge: 32
kloeten befindet sich auf einem aufstrebenden Ast
Standard Mixin in Sass

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:

Code:
// 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; }
Code:
.shop_logo 
  float: left
    @include tablet
      float:none
Erhalte dann aber die Fehlermeldung:
Code:
error sass/_custom.sass (Line 35: Mixin "tablet" does not accept a content block.)
Was mache ich falsch?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 12.04.2017, 15:58
Benutzerbild von hemfrie
Administrator
XHTMLforum-Kenner
 
Registriert seit: 18.12.2003
Ort: Düsseldorf
Beiträge: 2.758
hemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannt
Standard

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.

Code:
$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
__________________
http://twitter.com/xhtmlforum - XHTMLforum - Infos bei Serverausfall, Wartungsarbeiten etc.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.04.2017, 11:21
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.12.2007
Beiträge: 32
kloeten befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank für deine Antwort.

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

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

Code:
 @media (min-width: $tablet-width) and (max-width: $desktop-width - 1px)
Hast du vielleicht eine Idee woran das liegt?
Mit Zitat antworten
  #4 (permalink)  
Alt 15.04.2017, 13:07
Benutzerbild von hemfrie
Administrator
XHTMLforum-Kenner
 
Registriert seit: 18.12.2003
Ort: Düsseldorf
Beiträge: 2.758
hemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannt
Standard

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?

Code:
@include tablet
__________________
http://twitter.com/xhtmlforum - XHTMLforum - Infos bei Serverausfall, Wartungsarbeiten etc.
Mit Zitat antworten
  #5 (permalink)  
Alt 15.04.2017, 19:03
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.12.2007
Beiträge: 32
kloeten befindet sich auf einem aufstrebenden Ast
Standard

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

Code:
// 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
Mit Zitat antworten
  #6 (permalink)  
Alt 15.04.2017, 20:47
Benutzerbild von hemfrie
Administrator
XHTMLforum-Kenner
 
Registriert seit: 18.12.2003
Ort: Düsseldorf
Beiträge: 2.758
hemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannt
Standard

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.

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

=desktop
  @media (min-width: $desktop-width)
    @content
__________________
http://twitter.com/xhtmlforum - XHTMLforum - Infos bei Serverausfall, Wartungsarbeiten etc.
Mit Zitat antworten
  #7 (permalink)  
Alt 23.04.2017, 16:09
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.12.2007
Beiträge: 32
kloeten befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #8 (permalink)  
Alt 24.04.2017, 10:25
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.382
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Klammern retten Leben. Auch beachten sollte man evtl die genutzte SASS Version.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus



Alle Zeitangaben in WEZ +2. Es ist jetzt 00:57 Uhr.