Benutzerdefinierte @mixins

Mixins sind einer der nützlichsten und überzeugendsten Gründe für die Verwendung eines CSS-Präprozessors. Die typische Art und Weise, wie sie präsentiert werden, ist, um bei CSS3-Herstellervorsilben-Problemen zu helfen. Tatsächlich ist dies ein überzeugender Anwendungsfall. Kein mühsames Schreiben all der Vorsilben mehr und noch mühsamer das Aktualisieren im Laufe der Zeit.

Wenn Sie jedoch Sass verwenden, können Sie Compass verwenden, und Compass hat bereits alle diese CSS3-Mixins für Sie bereit. Möchten Sie die neuen CSS-Filter verwenden, aber zukunftssicher sein? Kein Problem.

img {
  @include filter(grayscale(100%));
  &:hover {
    @include filter(grayscale(0));
  }
}

Und Sie sind bereit.

Aber handgefertigte @mixins können auch nützlich sein! Das heißt, @mixins, die Sie selbst erstellen, um Ihrem spezifischen Projekt zugute zu kommen. Ich habe einen Beitrag von Sacha Greif genossen, in dem er einige @mixins aufgeführt hat, die er manchmal für bestimmte Projekte verwendet.

Zum Beispiel hat er einige für Präge- & Letterpress-Effekte, die auf einigen Websites zu finden sind.

@mixin box-emboss($outerOpacity, $innerOpacity) {
  box-shadow:
    rgba(white, $outerOpacity) 0 1px 0, 
    rgba(black, $innerOpacity) 0 1px 0 inset;
}

Und dann könnten Sie das auf jedem Selektor aufrufen, auf den Sie diesen Effekt anwenden möchten.

.module, header[role="banner"] {
  @include box-emboss(0.3, 0.6);
}

Wenn Sie hier besonders raffiniert vorgehen möchten, könnten Sie auch einen Platzhalterselektor erstellen, auf den Sie @extend anwenden. Auf diese Weise wiederholen Sie keinen Code in der kompilierten CSS, aber Sie können Ihre Selektoren trennen und sie so organisieren, wie Sie möchten.

%box-emboss {
  @include box-emboss(0.3, 0.6);
}

header[role="banner"] {
  @extend %box-emboss;
}

...

.module {
  @extend %box-emboss;
}

Hier ist ein Beispiel dafür auf CodePen.

Ich dachte, ich teile andere benutzerdefinierte @mixins, die ich in einigen meiner eigenen Projekte verwendet habe.

Schriftartenstapel

Auf dieser Website habe ich vier Schriftartenstapel

Marke
Überschriften
Text
Code

Wenn Sie bei Schriftarten richtig vorsichtig sind, setzen Sie wahrscheinlich font-family nicht zu oft in Ihrem Stylesheet. Wenn Sie denselben Stapel mehrmals setzen, läuft etwas schief. Aber Sie müssen es vielleicht mehr als einmal tun. Zum Beispiel haben Sie vielleicht eine Standard-Schriftart für den Text, die buchstäblich auf dem <body> gesetzt ist, aber das wird nicht in Formelemente übernommen, also wenn Sie dieselbe Schriftart dort verwenden möchten, müssen Sie sie erneut auf diese Elemente anwenden. Da Sie es jetzt an zwei Stellen setzen, ist ein @mixin bereits nützlich.

Ich verwende dafür lieber @mixins statt einer String-Variable, die auf die Schriftfamilien selbst gesetzt ist, da das @mixin es Ihnen ermöglicht, auch andere Eigenschaften zu setzen, wenn Sie möchten. Zum Beispiel verwenden Sie vielleicht eine @font-face-Schriftart, bei der Sie nur ein bestimmtes Gewicht laden und daher dieses Gewicht setzen möchten, wann immer Sie diese font-family setzen.

Hier sind die aktuellen @mixins für diese Website

@mixin font-stack-brand {
  font-family: 'Gotham Rounded A', 'Gotham Rounded B', "proxima-nova-soft", sans-serif;
}
@mixin font-stack-headers {
  font-family: 'Whitney Cond A', 'Whitney Cond B', "ronnia-condensed", sans-serif;
  font-weight: 700;
  font-style: normal;
}
@mixin font-stack-body {
  font-family: 'Whitney SSm A', 'Whitney SSm B', "ff-meta-web-pro", sans-serif;
}
@mixin font-stack-code {
  font-family: Menlo, "inconsolata", Monaco, "Courier New", Courier, monospace;
}

Media Query Mixin

Sie können Mixins erstellen, die den Inhalt ausgeben, den Sie nach ihnen in geschweiften Klammern übergeben. Dies ermöglicht einige nette Möglichkeiten. Zum Beispiel können Sie eine Media-Query "benennen" und sie dann überall verwenden. Das bedeutet, dass Sie diese Media-Query nur an einer Stelle aktualisieren müssen. Zum Beispiel

@mixin breakpoint($point) {
  @if $point == mama-bear {
    @media (max-width: 1250px) { @content; }
  }
  @if $point == baby-bear {
    @media (max-width: 800px) { @content; }
  }
  @if $point == reverso-baby-bear {
    @media (min-width: 800px) { @content; }
  }
  @if $point == reverso-mama-bear {
    @media (min-width: 1250px) { @content; }
  }
}

Und ein einfaches Anwendungsbeispiel

.page-wrap {
  width: 80%;
  @include breakpoint(baby-bear) {
    width: 100%;
  }
}

.footer {
  a {
    display: inline-block;
    @include breakpoint(baby-bear) {
      display: block;
    }
  }
}

Mehr über diese Idee erfahren Sie hier.

Beispiel dafür auf CodePen.

Animation Mixin

Compass hat noch kein @mixin für Keyframe-Animationen, aber es ist sehr einfach, dies selbst hinzuzufügen. Es verwendet die gleiche @content-Idee wie das Media-Query-Mixin oben.

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content
  }
  @-moz-keyframes #{$name} {
    @content
  }
  @-ms-keyframes #{$name} {
    @content
  }
  @-o-keyframes #{$name} {
    @content
  }
  @keyframes #{$name} {
    @content
  }
}

Und eines, um die Animation einzustellen...

@mixin animation($value) {
  -webkit-animation: $value;
  -moz-animation: $value;
  -ms-animation: $value;
  -o-animation: $value;
  animation: $value;
}

Die Verwendung wird dann einfach.

@include keyframes(move) {
  0%   { left: 0; }
  100% { left: 100px; }
}

.box {
  @include animation(move 0.5s ease infinite alternate);
}

Mehr über CSS-Animationen erfahren Sie hier.

Beispiel dafür auf CodePen

Toolbox Mixins

Es gibt einige einfache Hilfsklassen, die ich im Laufe der Jahre in unzähligen Projekten verwendet habe. Dinge wie eine barrierefreie Klasse zum Ausblenden und typografische Hilfsklassen. Wenn Sie dafür ein Mixin erstellen, können Sie doppelt so viel Nutzen daraus ziehen.

// Accessible hiding
@mixin screen-reader-text() {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
.screen-reader-text {
  @include screen-reader-text;
}

// Overflow Ellipsis
@mixin ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ellipsis {
  @include ellipsis;
}

// Word Wrapping
@mixin word-wrap() {
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}
.word-wrap {
  @include mixin word-wrap;
}

Jetzt haben Sie einen Klassennamen, den Sie im Markup verwenden können, wenn Sie diese Eigenschaften anwenden müssen. Aber Sie haben **auch** ein Mixin, das Sie verwenden können, um diese Eigenschaften auf andere Deklarationen anzuwenden, wenn Sie das Markup nicht berühren können oder wollen.

Beachten Sie, dass ich im Allgemeinen nicht empfehle, Ihre Mixins und Klassen direkt nebeneinander zu platzieren. Ich bevorzuge es, wenn Mixins in einer separaten Datei wie _bits.scss liegen, die nichts kompiliert und daher in jeder anderen Sass-Datei enthalten sein kann.

Ihre?

Es macht immer Spaß zu teilen.

Kommentare

Dustin Horton

# 4. Oktober 2012

Ich habe eine Reihe von Beiträgen auf meinem Blog mit einigen Mixins begonnen, die nicht in Compass enthalten sind und die ich hilfreich fand.

Eines für CSS-Dreiecke ist wahrscheinlich mein Favorit: blackbe.lt/useful-sass-mixins-css-trangle/

Kevin Druff

Permalink zum Kommentar# 4. Oktober 2012

Obwohl Dreiecke nicht in Compass integriert sind, sind sie in Zurb Foundations Compass-Erweiterung integriert. Obwohl ich kein großer Fan von Foundation für große Websites bin (es wird umständlich), verwende ich es häufig für kleine Websites, die ein- oder zweiseitig sind, und das Dreiecks-Mixin ist sehr hilfreich.

Travis

# 4. Oktober 2012

Ich liebe es, SASS zum Stylen von Websites zu verwenden, ich könnte mir nie vorstellen, zurück zu reinem CSS zu gehen! Ich verwende Mixins am häufigsten für Media Queries, Schriftartenstapel und Hintergründe. Mein letztes ist, wenn ich ein übergeordnetes Styling für ein Div löschen muss, was bei der Arbeit mit Drupal oft vorkommt. Also verwende ich gerne dieses

@mixin clear($style) {
    @if $style == 'clear-all' {
        padding:0;
        background-image:none;
        background-color:transparent;
        margin:0;
        height:auto;
        width:auto;
        float:none;
        border:none;
    }
}

Larry Botha

# 4. Oktober 2012

Ich benutze Sass erst seit einer Woche und es gefällt mir! Ich habe ein kleines Gradienten-Mixin zusammengestellt, mit dem ich angeben kann, auf welcher Eigenschaft es verwendet werden soll.

/* 
  Example:
  @include gradient(background-image, linear,
                  ( top,
                    transparent,
                    hsla(0, 0%, 100%, .1)
                  )
                );;
*/

@mixin gradient($prop, $type, $val) {
#{$prop}: -webkit-#{$type}-gradient($val);
#{$prop}:    -moz-#{$type}-gradient($val);
#{$prop}:     -ms-#{$type}-gradient($val);
#{$prop}:      -o-#{$type}-gradient($val);
#{$prop}:         #{$type}-gradient($val);
 }

Ich baue eine Sammlung von Dienstprogrammen auf, einige größtenteils basierend auf Bourbon, in einem Styleguide, den ich langsam aufbaue und bereinige.

stu

# 4. Oktober 2012

Ausgezeichnet, ich wollte das auf meiner Website posten – http://www.alwaystwisted.com und das werde ich vielleicht immer noch tun… Ein Paar benutzerdefinierte Mixins für vertikale Rhythmen – mit REMs/PX – http://jsfiddle.net/sturobson/vYYn5/ mit Ems – http://jsfiddle.net/sturobson/3KfUL/

stu

# 4. Oktober 2012

Oh, und da ist das lt-IE-Mixin, bei dessen Erstellung mir geholfen wurde und über das ich hier gesprochen habe – http://alwaystwisted.com/post.php?s=2012-08-06-a-sass-mixin-for-media-queries-and-ie

Kuzin

# 4. Oktober 2012

Media Query + Retina Mixin (Vielmals Dank an Chris' Tweet von gestern.)

SCSS Media Queries mit HiDpi (Retina) Unterstützung – Gist

Stefan

# 4. Oktober 2012

Ich benutze diese Mixins auch, aber ich habe sie nicht selbst erstellt. Ich benutze ein Gem, das SASS erweitert, genannt Bourbon (für Styling) und Neat (für Positionierung), und sie haben diese großartigen Funktionen. Ich empfehle wirklich, diese Gems zu verwenden, da sie alle präfixiert sind, sodass alles, was Sie wollen (wie diese Beispiele), in diesen Gems enthalten ist! Und weil sie großartig sind :)

Fitz Haile

# 4. Oktober 2012

Habe ein Mixin zum Erstellen von Richtungs-Pfeilen (Dreiecken) auf Boxen mit Rändern erstellt. Nichts revolutionär CSS-mäßig, aber schön, in ein Mixin zu packen. Bin immer noch ein Neuling, daher ist jedes Feedback willkommen.

Bordered Box Arrow (Gist) »

nickhempsey

Permalink zum Kommentar# 9. November 2012

Das ist großartig, Fitz! Danke fürs Teilen.

Stephan

# 4. Oktober 2012

Ich verwende reines CSS und liebe es, und ich könnte mir nie vorstellen, so viel abstrakten Ballast ernsthaft in meine Projekte zu laden.

Reines CSS durch und durch!

Oliver

Permalink zum Kommentar# 7. Oktober 2012

1) SCSS wird zu reinem CSS kompiliert
2) Die Abstraktion ist das Gegenteil von Ballast: Sie ermöglicht es Ihnen, Ihren Code modular zu halten und **reduziert** somit die Wiederholung.

MoOx

# 4. Oktober 2012

Nachdem ich viele CSS-Tricks gesammelt habe, habe ich beschlossen, all diese Mixins (mit Sass & Compass) unter diesem Projekt zu veröffentlichen: Compass Recipes. Dies ist noch in Arbeit, aber es gibt viele interessante Dinge.
Ich hoffe, es gefällt Ihnen.

[email protected]

# 5. Oktober 2012

Und ich habe gerade ein Sass/SCSS-Mixin für die Retina/Nicht-Retina-Media-Queries erstellt, die Sie gestern in einem Gist hatten –

http://codepen.io/sturobson/pen/plcks

Subash

# 5. Oktober 2012

Schreiben Sie den Gradienten in neuer Syntax und erhalten Sie den alten.
Denn das Mixin sollte neuen Code mit altem Code kompatibel machen.


@mixin prefix($prop, $value, $prefixes...) {
    @each $prefix in $prefixes {
        @if($prefix != spec) {
            -#{$prefix}-#{$prop}: $value;
        }
        @if($prefix == spec) {
            #{$prop}: $value;
        }
    }
}

@mixin prefix_val($prop, $value, $prefixes...) {
    @each $prefix in $prefixes {
        @if($prefix != spec) {
            #{$prop}: -#{$prefix}-$value;
        }
        @if($prefix == spec) {
            #{$prop}: $value;
        }
    }
}

@mixin linear-gradient($angle, $stops...) {
    $ang: "#{$angle}";
    @if ( type-of( $angle ) !="number" )        {

        @if      ($ang == "to top"          )   { @include prefix_val(background-image, linear-gradient(bottom,       $stops), webkit, moz, o);   }
        @else if ($ang == "to bottom"       )   { @include prefix_val(background-image, linear-gradient(top,          $stops), webkit, moz, o);   }
        @else if ($ang == "to left"         )   { @include prefix_val(background-image, linear-gradient(right,        $stops), webkit, moz, o);   }
        @else if ($ang == "to right"        )   { @include prefix_val(background-image, linear-gradient(left,         $stops), webkit, moz, o);   }
        @else if ($ang == "to top right"    )   { @include prefix_val(background-image, linear-gradient(bottom left,  $stops), webkit, moz, o);   }
        @else if ($ang == "to right top"    )   { @include prefix_val(background-image, linear-gradient(bottom left,  $stops), webkit, moz, o);   }
        @else if ($ang == "to top left"     )   { @include prefix_val(background-image, linear-gradient(bottom right, $stops), webkit, moz, o);   }
        @else if ($ang == "to left top"     )   { @include prefix_val(background-image, linear-gradient(bottom right, $stops), webkit, moz, o);   }
        @else if ($ang == "to bottom right" )   { @include prefix_val(background-image, linear-gradient(top left,     $stops), webkit, moz, o);   }
        @else if ($ang == "to right bottom" )   { @include prefix_val(background-image, linear-gradient(top left,     $stops), webkit, moz, o);   }
        @else if ($ang == "to bottom left"  )   { @include prefix_val(background-image, linear-gradient(top right,    $stops), webkit, moz, o);   }
        @else if ($ang == "to left bottom"  )   { @include prefix_val(background-image, linear-gradient(top right,    $stops), webkit, moz, o);   }

        background-image: linear-gradient($angle, $stops);
    }

    @else if( type-of( $angle ) =="number" ) {

        $old-angle: abs(450deg - $angle)%360;
        @include prefix_val(background-image, linear-gradient($old-angle, $stops), webkit, moz, o);
        background-image: linear-gradient($angle, $stops);
    }
}

@mixin linear-gradient($angle, $stops...) {
    $ang: "#{$angle}";
    @if ( type-of( $angle ) !="number" )        {

        @if      ($ang == "to top"          )   { @include prefix_val(background-image, linear-gradient(bottom,       $stops), webkit, moz, o);   }
        @else if ($ang == "to bottom"       )   { @include prefix_val(background-image, linear-gradient(top,          $stops), webkit, moz, o);   }
        @else if ($ang == "to left"         )   { @include prefix_val(background-image, linear-gradient(right,        $stops), webkit, moz, o);   }
        @else if ($ang == "to right"        )   { @include prefix_val(background-image, linear-gradient(left,         $stops), webkit, moz, o);   }
        @else if ($ang == "to top right"    )   { @include prefix_val(background-image, linear-gradient(bottom left,  $stops), webkit, moz, o);   }
        @else if ($ang == "to right top"    )   { @include prefix_val(background-image, linear-gradient(bottom left,  $stops), webkit, moz, o);   }
        @else if ($ang == "to top left"     )   { @include prefix_val(background-image, linear-gradient(bottom right, $stops), webkit, moz, o);   }
        @else if ($ang == "to left top"     )   { @include prefix_val(background-image, linear-gradient(bottom right, $stops), webkit, moz, o);   }
        @else if ($ang == "to bottom right" )   { @include prefix_val(background-image, linear-gradient(top left,     $stops), webkit, moz, o);   }
        @else if ($ang == "to right bottom" )   { @include prefix_val(background-image, linear-gradient(top left,     $stops), webkit, moz, o);   }
        @else if ($ang == "to bottom left"  )   { @include prefix_val(background-image, linear-gradient(top right,    $stops), webkit, moz, o);   }
        @else if ($ang == "to left bottom"  )   { @include prefix_val(background-image, linear-gradient(top right,    $stops), webkit, moz, o);   }

        background-image: linear-gradient($angle, $stops);
    }

    @else if( type-of( $angle ) =="number" ) {

        $old-angle: abs(450deg - $angle)%360;
        @include prefix_val(background-image, linear-gradient($old-angle, $stops), webkit, moz, o);
        background-image: linear-gradient($angle, $stops);
    }
}

Subash

Permalink zum Kommentar# 5. Oktober 2012
Ach, zum Teufel, das Linear-Gradienten-Mixin wurde doppelt gepostet, Chris, kannst du das bitte entfernen.
Ich kann eine Sache nicht verstehen, die ich bei Compass gesehen habe.
```
@mixin X(v1,v2,v3,v4,v5){ } to v10

Why not @mixin X($v...) { } ?????????
```

Adam Johnson

# 5. Oktober 2012

Ich habe diese SASS/SCSS-Mixins sehr nützlich gefunden, wenn Sie Compass nicht installieren können/dürfen.

https://github.com/matthieua/sass-css3-mixins

Viele CSS3-Leckerbissen darin.

Ren

# 5. Oktober 2012

Ich steige immer noch auf SASS um, aber dies sind einige LESS-Mixins, die ich derzeit in einem Projekt verwende. Den besten Einsatz für Mixins, den ich gefunden habe, ist die Möglichkeit, Fallbacks für IE und ältere Browser festzulegen sowie Ihre Werte für Browser-Präfixe zu übergeben.


/*Make your element a circle.  Remember to set height and width to an equal value.*/
.radius-circle {
  -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
            border-radius: 50%;
}

/*A more advanced border-radius where you pass in 4 value, thus emabling you to set the radius on 2 corners (for example)  Follows the clockwise TRBL. */
.border-radius2( @topleft: 0, @topright: 0, @bottomright: 0, @bottomleft: 0,) {
      -webkit-border-top-right-radius: @topright;
      -webkit-border-bottom-right-radius: @bottomright;
      -webkit-border-bottom-left-radius: @bottomleft; 
      -webkit-border-top-left-radius: @topleft;
          -moz-border-radius-topright: @topright;
          -moz-border-radius-bottomright: @bottomright;
          -moz-border-radius-bottomleft: @bottomleft;
          -moz-border-radius-topleft: @topleft;
                border-top-right-radius: @topright;
                border-bottom-right-radius: @bottomright;
                border-bottom-left-radius: @bottomleft;
                border-top-left-radius: @topleft;
      -moz-background-clip: padding;
        -webkit-background-clip: padding-box;
            background-clip: padding-box;
}

/*I use a global transition, but can pass in the 3 values to change the animation*/
.transition(
    @what : all,
    @duration : .5s,
    @easing : ease-in-out
    ) {
    -webkit-transition: @what @duration @easing;
       -moz-transition: @what @duration @easing;
         -o-transition: @what @duration @easing;
            transition: @what @duration @easing;
}

/*Mixin to set fallback and compatible rgba*/
.rgb_a(@color, @alpha) {
    @alpha_color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha); /* you can use HEX as your color ! */
    @ie_alpha_color: argb(@alpha_color);
    background-color: @color; // Fallback for older browsers
    background-color: @alpha_color;
    // IE hacks
    zoom: 1; // hasLayout
    background-color: transparent\9;
    -ms-filter:  "progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ie_alpha_color}, endColorstr=@{ie_alpha_color})";
    filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ie_alpha_color}, endColorstr=@{ie_alpha_color})";

    }

/*Simple mixin for a gradient, setting the beginning color, end color, and when to switch*/
.gradient(
    @begin: black,
    @end: white,
    @switch : 100%
    ) {
    background:  @begin;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(@begin), color-stop(@switch, @end));
    background: -moz-linear-gradient(top, @begin, @end @switch);
    background: -o-linear-gradient(top, @begin, @end @switch);
    background: linear-gradient(top, @begin, @end @switch);
    }

/*Another compatibility mixin with fallback*/
.opacit_y(@opacity: 0.5) {
  -webkit-opacity: @opacity;
       -moz-opacity: @opacity;
          -khtml-opacity: @opacity;
              opacity: @opacity;
              @ie: @opacity*100;
                    filter: alpha(opacity=@ie);
}

Trevor

# 5. Oktober 2012

Ich habe immer einen Innenabstand für die Erstellung doppelter Ränder verwendet, anstatt eines verschachtelten Spans oder Divs. Mixins waren daher das perfekte Vehikel.

@mixin box-shadow-inset ($horizontal, $vertical, $spread, $color) {
    -webkit-box-shadow: $horizontal $vertical $spread $color inset;
    -moz-box-shadow: $horizontal $vertical $spread $color inset;
    -ms-box-shadow: $horizontal $vertical $spread $color inset;
    -o-box-shadow: $horizontal $vertical $spread $color inset;
    box-shadow: $horizontal $vertical $spread $color inset;
}

nerdfiles

# 5. Oktober 2012

Könnte nützlich sein (@siehe http://snipplr.com/view.php?codeview&id=66966)

/**
 * CSS3 Image Filter Tools
 */ 

@mixin if-blur($amt: 4px) {
  -o-filter: blur($amt);
  -ms-filter: blur($amt);
  -moz-filter: blur($amt);
  -webkit-filter: blur($amt);
}

@mixin if-brightness($amt: 0.35) {
  -o-filter: brightness($amt);
  -ms-filter: brightness($amt);
  -moz-filter: brightness($amt);
  -webkit-filter: brightness($amt);
}

@mixin if-contrast($amt: 140%) {
  -o-filter: contrast($amt);
  -ms-filter: contrast($amt);
  -moz-filter: contrast($amt);
  -webkit-filter: contrast($amt);
}

@mixin if-grayscale($amt: 100%) {
  -o-filter: grayscale($amt);
  -ms-filter: grayscale($amt);
  -moz-filter: grayscale($amt);
  -webkit-filter: grayscale($amt);
}

@mixin if-huerotate($deg: 180deg) {
  -o-filter: hue-rotate($deg);
  -ms-filter: hue-rotate($deg);
  -moz-filter: hue-rotate($deg);
  -webkit-filter: hue-rotate($deg);
}

@mixin if-invert($amt: 100%) {
  -o-filter: invert($amt);
  -ms-filter: invert($amt);
  -moz-filter: invert($amt);
  -webkit-filter: invert($amt);
}

@mixin if-opacity($amt: 60%) {
  -o-filter: opacity($amt);
  -ms-filter: opacity($amt);
  -moz-filter: opacity($amt);
  -webkit-filter: opacity($amt);
}

@mixin if-saturate($amt: 4) {
  -o-filter: saturate($amt);
  -ms-filter: saturate($amt);
  -moz-filter: saturate($amt);
  -webkit-filter: saturate($amt);
}

@mixin if-sepia($amt: 100%) {
  -o-filter: sepia($amt);
  -ms-filter: sepia($amt);
  -moz-filter: sepia($amt);
  -webkit-filter: sepia($amt);
}

Joseph Silber

# 7. Oktober 2012

Warum verwenden Sie die -ms--Präfixe für die Animationen?

Da keine stabile Version von IE diese Präfixe jemals ausgeliefert hat, wird allgemein davon ausgegangen, dass sie nicht benötigt werden.

Während compass sie immer noch herausbringt (hoffentlich ändert sich das bald), sollten wir sie nicht in unseren eigenen Mixins verwenden.

Bertram Simon

# 29. Oktober 2012

Ich habe ein Mixin zur Behandlung von Rem erweitert. Ich habe es auf Deutsch aufgeschrieben.
http://typo3-wuppertal.de/post/33835337756/sass-plugin-fur-die-nutzung-von-rem

Hier ist ein Anwendungsbeispiel

.element
  @include rem('padding',10px 0 2px 5px)

.element2
  @include rem('border', 1px solid red)
  @include rem('padding', 10px !important)

Dies wird zu

.element {
  padding: 10px 0 2px 5px;
  padding: 1rem 0 0.2rem 0.5rem;
}
.element2 {
  border: 1px solid red;
  border: 0.1rem solid red;
  padding: 10px !important;
  padding: 1rem !important;
}

Wenn Sie nur den Code wollen, können Sie hier nachschauen.
https://github.com/SimonWpt/rem

nickhempsey

# 9. November 2012

Ich habe das gestern in der Lodge gepostet, aber ich werde es auch hier posten.

Hier ist ein @mixin für Schriftartenstapel, das eine !important-Option hat. Das ist super praktisch für hartnäckige eingefügte Divs, ich schaue dich an, Google Custom Search Engine.


@mixin font-stack($important) {
    $stack: Arial, Tahoma, Sans-Serif;
    @if $important == 1 {
        font-family: $stack !important; 
    } @else  if $important == 0 {
        font-family: $stack;
    }
}

// Use it!

.important {
     @include  font-stack(1);
}

.not-important {
     @include  font-stack(0);
}

Dieser Kommentarbereich ist geschlossen. Wenn Sie wichtige Informationen teilen möchten, kontaktieren Sie uns bitte.