.text-shadow (@string: 0 1px 3px rgba(0, 0, 0, 0.25)) {
text-shadow: @string;
}
.box-shadow (@string) {
-webkit-box-shadow: @string;
-moz-box-shadow: @string;
box-shadow: @string;
}
.drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
-webkit-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
-moz-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
}
.inner-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
-webkit-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
-moz-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
}
.box-sizing (@type: border-box) {
-webkit-box-sizing: @type;
-moz-box-sizing: @type;
box-sizing: @type;
}
.border-radius (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.border-radiuses (@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 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;
}
.opacity (@opacity: 0.5) {
-webkit-opacity: @opacity;
-moz-opacity: @opacity;
opacity: @opacity;
}
.gradient (@startColor: #eee, @endColor: white) {
background-color: @startColor;
background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
background: -webkit-linear-gradient(top, @startColor, @endColor);
background: -moz-linear-gradient(top, @startColor, @endColor);
background: -ms-linear-gradient(top, @startColor, @endColor);
background: -o-linear-gradient(top, @startColor, @endColor);
}
.horizontal-gradient (@startColor: #eee, @endColor: white) {
background-color: @startColor;
background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
background-image: -webkit-linear-gradient(left, @startColor, @endColor);
background-image: -moz-linear-gradient(left, @startColor, @endColor);
background-image: -ms-linear-gradient(left, @startColor, @endColor);
background-image: -o-linear-gradient(left, @startColor, @endColor);
}
.animation (@name, @duration: 300ms, @delay: 0, @ease: ease) {
-webkit-animation: @name @duration @delay @ease;
-moz-animation: @name @duration @delay @ease;
-ms-animation: @name @duration @delay @ease;
}
.transition (@transition) {
-webkit-transition: @transition;
-moz-transition: @transition;
-ms-transition: @transition;
-o-transition: @transition;
}
.transform(@string){
-webkit-transform: @string;
-moz-transform: @string;
-ms-transform: @string;
-o-transform: @string;
}
.scale (@factor) {
-webkit-transform: scale(@factor);
-moz-transform: scale(@factor);
-ms-transform: scale(@factor);
-o-transform: scale(@factor);
}
.rotate (@deg) {
-webkit-transform: rotate(@deg);
-moz-transform: rotate(@deg);
-ms-transform: rotate(@deg);
-o-transform: rotate(@deg);
}
.skew (@deg, @deg2) {
-webkit-transform: skew(@deg, @deg2);
-moz-transform: skew(@deg, @deg2);
-ms-transform: skew(@deg, @deg2);
-o-transform: skew(@deg, @deg2);
}
.translate (@x, @y:0) {
-webkit-transform: translate(@x, @y);
-moz-transform: translate(@x, @y);
-ms-transform: translate(@x, @y);
-o-transform: translate(@x, @y);
}
.translate3d (@x, @y: 0, @z: 0) {
-webkit-transform: translate3d(@x, @y, @z);
-moz-transform: translate3d(@x, @y, @z);
-ms-transform: translate3d(@x, @y, @z);
-o-transform: translate3d(@x, @y, @z);
}
.perspective (@value: 1000) {
-webkit-perspective: @value;
-moz-perspective: @value;
-ms-perspective: @value;
perspective: @value;
}
.transform-origin (@x:center, @y:center) {
-webkit-transform-origin: @x @y;
-moz-transform-origin: @x @y;
-ms-transform-origin: @x @y;
-o-transform-origin: @x @y;
}
Nützliche CSS3 Less Mixins
Chris Coyier am
Wunderbar. Und absolut nützlich, danke!
In Verbindung mit meinem LESS DSS wird dies eine sehr gute Sammlung von „Less Mixins“ ergeben :-)
Gute Arbeit!
Das ist großartig. Ich pflege selbst eine LESS Mixin-Bibliothek mit einer CSS3-Bibliothek, habe aber text-shadow nicht aufgenommen, da ich dachte, es sei nur eine Zeile und würde nicht von einem Mixin profitieren. Aber ich schätze, indem Sie es aufgenommen haben, konnten Sie einen text-shadow mit Standardwerten haben. War das Ihre Überlegung?
Ich weiß, das ist wie 5 Jahre später lol, aber wahrscheinlich die Tatsache, dass er einen Standardwert dafür hat.
Einige Gedanken zur Kompatibilität zwischen Farbverläufen (einschließlich Transparenz) und IE6-8
Wenn Sie einen angepassten Mixin in Verbindung mit Paul Irishs berüchtigten klassenbasierten IE-Selektoren verwenden (damit die Klassen .ie6, .ie7, .ie8 entweder dem HTML- oder den Body-Elementen zugewiesen werden), könnten Sie ohne großen Aufwand Unterstützung einhacken.
Ich nehme an, Sie könnten auch bedingte Stylesheets verwenden, aber das wäre ein viel längerer Weg und etwas, das ich schon lange nicht mehr gemacht habe.
Die in LESSPHP integrierte Funktion RGBa zu HEX stellt sicher, dass, wenn Sie einen RGBa-Wert an das variable Argument übergeben, dieser korrekt für den proprietären MS CSS-Filter konvertiert wird (unter Verwendung von Alpha-Hex, #AARRGGBB).
Ich muss den Code noch testen, aber es ist eine Idee. Irgendwelche Gedanken?
Das wäre großartig. Soweit ich das beurteilen kann, erlaubt LESS jedoch keine mehreren Selektoren in Mixin-Namen.
Ja, ein einfacher Gedanke, der mit Verschachtelung und Ampersands gemacht werden könnte, also
Ich habe das auch noch nicht getestet :O
Oh, die Vorschau passte nicht zum Ergebnis, zweite Runde
Sie können ",GradientType=0" nach Ihrem ieEndColor für vertikale Farbverläufe und ",GradientType=1" für horizontale Farbverläufe hinzufügen.
Ich habe dafür 2 Versionen: .gradient-v und .gradient-h
Ich bin mir nicht sicher, ob Sie davon gehört haben, aber es gibt ein großartiges Paket mit Mixins und so, auf dem der Twitter Bootstrap aufgebaut wurde.
Diese würden viel schöner als Stylus aussehen :)
Danke fürs Teilen. Schöne Sammlung von Mixins.
Ich frage mich nach dem Opacity-Mixin: Was ist der Grund für die Verwendung von Vendor-Präfixen? Sie scheinen unnötig zu sein. Siehe http://caniuse.com/#search=opacity
Ich verwende den folgenden Opacity-Mixin in meiner base.less-Datei
Toller LESS-Compiler für Windows und Linux kostenlos
http://wearekiss.com/simpless
Keine Notwendigkeit für .border-radiuses().
Wenn Sie benutzerdefinierte Border-Radius aufrufen müssen, rufen Sie einfach..
:)
Es scheint, dass Sie Kommas dafür benötigen, aber danke, das war viel einfacher.
.border-radius(0, 0, 4px, 4px);
Es ist großartig, den box-sizing-Mixin zu haben. Andere Sätze, die ich gesehen habe, hatten ihn nicht enthalten.
Ich bin dabei, eine LESS-Datei für mein Genesis-Theme zurückzusetzen. Danke, dass Sie mir heute SMARTER vorkommen lassen...
Es sind radii, nicht radiuses, haha
LESS Elements ist eine Sammlung nützlicher Mixins für LESS http://lesselements.com/
Auf GitHub https://github.com/dmitryf/elements
TextMate Bundle https://github.com/juanghurtado/less-elements.tmbundle
Von allen Mixin-Sets, die ich mir heute angesehen habe, ist dieses mit Abstand das beste. Es ist nicht übermäßig mit Dingen überladen, die ich nie (nie!) verwenden werde, es enthält so ziemlich alles, was ich brauche, und es ist sehr gut gemacht. Danke für den Link!
LESS !! Bitte schicken Sie mir LESS CSS Code einer Webseite per E-Mail. Ich bin Anfänger. Es wäre hilfreich für mich.
für die Faulen ;)
.gradientAuto (@color: #000, @coef: 5%){ background: lighten(@color, @coef); /* Old browsers */ background: -moz-linear-gradient(top, lighten(@color, @coef) 0%, darken(@color, @coef) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,lighten(@color, @coef)), color-stop(100%,darken(@color, @coef))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, lighten(@color, @coef) 0%,darken(@color, @coef) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, lighten(@color, @coef) 0%,darken(@color, @coef) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, lighten(@color, @coef) 0%,darken(@color, @coef) 100%); /* IE10+ */ background: linear-gradient(to bottom, lighten(@color, @coef) 0%,darken(@color, @coef) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten(@color, @coef)', endColorstr='darken(@color, @coef)',GradientType=0 ); /* IE6-9 */ }Ich habe ein Problem beim Erstellen eines Mixins für box-shadow. Meine ist die gleiche wie Ihre, daher gehe ich davon aus, dass Sie dasselbe Problem hatten.
Wenn mehrere box-shadows (kommagetrennt) in einem Element verwendet werden (wie ‚2px 2px 3px 4px #000, inset -2px 1px 1px 0 #000‘). LessCSS wird nicht kompiliert und gibt einen Fehler aus.
Gibt es einen Weg, das zu umgehen? Ich meine, den Wert als String oder etwas anderes zu behandeln.
Danke!!
Das Komma trennt die Variablen
Benutze das ;)
.box-shadow-double (@string, @string2) { -webkit-box-shadow: @string, @string2; -moz-box-shadow: @string, @string2; box-shadow: @string, @string2; }Gibt es eine Möglichkeit, mehrere Übergänge mit dem .transition() Mixin zu schreiben?
Ich versuche herauszufinden, wie man einen Mixin mit einer undefinierten Anzahl von Argumenten erstellt und alles innerhalb der Regeln mit der speziellen Variable @arguments legt.
<
p>Ich habe gerade herausgefunden wie!
Ab LESS Version 1.3.1 wird eine neue spezielle Variable @arguments-list eingeführt, die Argumente als rohen String behandelt. Hier ist die Verwendung
.transition(...) {
-moz-transition: @arguments-list;
-webkit-transition: @arguments-list;
-o-transition: @arguments-list;
-ms-transition: @arguments-list;
transition: @arguments-list;
}
Das ‚…‘ bedeutet „ich weiß nicht, wie viele Argumente du meinem Mixin übergibst, nimm sie alle“ ;)
background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
background: -webkit-linear-gradient(top, @startColor, @endColor);
Von beiden ist die zweite diejenige, die Webkit jetzt erkennt (sowie Firefox und der Standard)? Wenn ja, welche Browser unterstützen nur die erstere Version?
Ein ausgezeichneter Ersatz für den box-shadow LESS Mixin
von http://www.toekneestuck.com/blog/2012/05/15/less-css-arguments-variable
Es kann diese drei leicht ersetzen ;-)
Hier ist ein funktionierendes Beispiel für die Verwendung von LESS Mixins mit Bootstrap: bit.ly/VzonQH
Firefox mag die
0für den Delay-Wert nicht. Sie müssen Einheiten hinzufügen:0sBug 662171
Also sollten Sie aktualisieren auf
.animation (@name, @duration: 300ms, @delay: 0s, @ease: ease) {Habe ein schnelles für User Select gemacht.
.user-select (@val) { -webkit-touch-callout: @val; -webkit-user-select: @val; -khtml-user-select: @val; -moz-user-select: @val; -ms-user-select: @val; user-select: @val; }Danke, ich benutze es in meinen Projekten ;)
Toller Artikel! Sehr nützlich!
Danke und Gott segne dich immer!
Ich wollte Sie nur darauf hinweisen, dass Sie vergessen haben, die folgenden Elemente für Ihre Farbverläufe hinzuzufügen
background-image: linear-gradient(top, @startColor, @endColor);Vergessen Sie linear-gradient ohne die Präfixe nicht :)
Was kann ich tun, wenn ich zwei verschiedene Mixins in einem Selektor verwenden möchte, so etwas wie
.example { .transition .opacity(.8) }?
Eine weitere coole Less-Funktion ist das Überladen von Mixins. Im Grunde eine andere Implementierung eines Mixins, je nachdem, wie viele Parameter übergeben werden. Link zu Stackoverflow Ihr Text zum Verlinken hier…
Entschuldigung, Link hier http://stackoverflow.com/questions/15250115/call-the-correct-overloaded-mixin-based-on-number-of-arguments
Danke, Chris, ich würde auch die unprefixed Eigenschaften hinzufügen :)
Ich finde diesen auch nützlich.
Wie erstellen Sie Multi-Transitions, so dass die Ausgabe etwa so aussieht?
Ich habe so etwas,
Es sollte einen besseren Weg geben, es zu schreiben, ich bin mir nur nicht sicher, wie.
Sie können meine Mixin-Bibliothek auschecken: more-or-less
Der Mixin sieht wirklich einfach aus, erfordert aber drei weitere Mixins, um zu funktionieren (
.vendorize(),.for()und.in()).Die gesamte Bibliothek basiert auf meinem
.vendorize()Mixin, was die Bibliothek sehr stark und wartungsfreundlich macht.vendorize Mixin
in-mixin
for-mixin
Das Gute ist, dass alle Werte überprüft und bei Bedarf mit Vendor-Präfixen versehen werden. Dies ermöglicht die Verwendung des Mixins für Übergänge bei den z. B.
transformoderbox-shadowEigenschaften.Die benötigten Vendor-Präfixe sind in dieser Variable definiert
@vendorPrefixes: -webkit-, -moz-, -o-, '';mixin
Eingabe
Ausgabe
Neue GROSSE Mixin-Bibliothek verfügbar. Sie ist „fast“ so stark wie „lesshat“ … aber… OHNE Inline-JavaScript.
Finden Sie sie hier: more-or-less
Sie ist vollständig modular und ermöglicht den Import von Mixins ähnlich wie bei „compass“
Beispiel für einen einfachen CSS3-Mixin
Verwendung
Der
.vendorizeMixin kann Eigenschaften oder Werte mit Präfixen versehen (z. B. für Übergänge)Die Bibliothek ermöglicht sogar Mixins wie diesen… (ermöglicht eine endlose Anzahl von Ebenen)
Alle Werte werden bei Bedarf mit Präfixen versehen.
Habe das für Transform geschrieben, was denkst du?
$empty: ”;
@function notEmpty($val) {
@if($val != $empty) {
@return true;
} @else {
@return false;
}
}
@mixin transform($type:”,$val1:”,$val2:”,$val3:”,$val4:”,$val5:”,$val6:”) {
@if notEmpty($val2) { $val2: “,” + $val2; }
@if notEmpty($val3) { $val2: “,” + $val2; }
@if notEmpty($val3) { $val3: “,” + $val3; }
@if notEmpty($val3) { $val4: “,” + $val4; }
@if notEmpty($val3) { $val5: “,” + $val5; }
@if notEmpty($val3) { $val6: “,” + $val6; }
-webkit-transform: $type + “(” + $val1 + $val2 + $val3 + $val4 + $val5 + $val6 + “)”;
-moz-transform: $type + “(” + $val1 + $val2 + $val3 + $val4 + $val5 + $val6 + “)”;
-ms-transform: $type + “(” + $val1 + $val2 + $val3 + $val4 + $val5 + $val6 + “)”;
-o-transform: $type + “(” + $val1 + $val2 + $val3 + $val4 + $val5 + $val6 + “)”;
transform: $type + “(” + $val1 + $val2 + $val3 + $val4 + $val5 + $val6 + “)”;
}
Angenommen, ich habe meine eigene jumbotron-Überschreibung
.jumbotron {
background-color: #ff4400;
}
und dann möchte ich eine benutzerdefinierte Überschreibung davon haben, wo ich die obige Klasse erbe und nur ihre Hintergrundfarbe überschreibe, indem ich ihre Farbe als Parameter für "lighten()" verwende. Ich kann die Syntax nicht herausfinden
.Myjumbotron {
.jumbotron;
/* nicht sicher, was unten für „parent.background-color“ steht */
background-color: lighten(parent.background-color, 30%);
}
Danke!
Scale sollte das für X- und Y-Unterstützung sein. Dies ist abwärtskompatibel, wegen @ratio_y:@ratio_x.
Wissen Sie, es gibt eine umfangreiche LESS-Bibliothek namens anchorLESS,
es ist fast wie jQuery, aber für CSS. Und alles, was Sie brauchen, ist eine einzige LESS-Datei!
Sie finden sie hier: invader365.github.io/anchorLESS
Quelle unter: Github
Viel Spaß ;)
Bravo! Bravo!
Hier ist ein LESS Mixin für lineare Farbverläufe, das ich normalerweise verwende
Wow! Danke für die tollen Sachen! Lass mich sie für meine CSS-Bibliothek kopieren
Ausgezeichnete Sammlung!!
Fügen Sie weiterhin mehr davon hier hinzu
LESS für CSS-Sprites fehlt :(
Aber wie implementiere ich Farbton in .drop-shadow Mixin beim Aufruf? Ich kann nur die Deckkraft ändern… :(