Share
Je kent de boor behoorlijk goed. Wilt u een gedeelte van uw website afgeronde hoeken geven met CSS3? Dan hebt u niets minder nodig dan drie prefixen van leveranciers: webkit, moz en het door W3C aanbevolen formulier. Is dat niet een enorme verspilling van tijd - om nog maar te zwijgen over de schermruimte? Wat als we in plaats daarvan een a zouden kunnen gebruiken klasse het dossier? Welnu, dat kunnen we! Ik zal je laten zien hoe vandaag.
Als we een tool als MINDER of SASS gebruiken, kunnen we onze tools maken klasse bestanden vrij gemakkelijk. Heb je geen idee waar ik het over heb? Goed, ten eerste, bekijk deze snelle tip. Het leert u precies hoe u met Less aan de slag kunt.
Vervolgens moeten we een kernklassenbestand maken dat in elk project zal worden gebruikt. Je kunt dit bestand opslaan waar je maar wilt, maar in de video hierboven gebruik ik onze populaire (en exclusieve) Structurer-app.
We doen samen de eerste, maar bekijk de screencast voor meer informatie.
.grensradius (@radius: 3px) -webkit-border-radius: @radius; -moz-border-radius: @radius; grensradius: @radius;
In termen van naamgevingsconventies heb ik geconstateerd dat het het slimst is om de officieel aanbevolen naam te gebruiken voor de naam van je klas, in dit geval, "border-radius."Om variabelen met minder te declareren, introduceren we ze met een @ symbool. In dit geval stellen we een standaardwaarde in van 3px, al moeten we die waarde in ons project vervangen, het is een makkie!
#someElement .border-radius (10px);
Op dit punt kunt u eenvoudigweg spoelen en herhalen voor elke eigenschap waarvoor voorvoegsels van meerdere leveranciers vereist zijn. Hier is een handvol om mee te beginnen:
.box-shadow (@x: 2px, @y: 2px, @blur: 5px, @spread: 0, @color: rgba (0,0,0, .6)) -webkit-box-shadow: @x @ y @blur @spread @color; -moz-box-shadow: @x @y @ blur @spread @color; box-shadow: @x @y @ blur @spread @color;
.overgang (@what: all, @length: 1s, @easing: ease-in-out) -webkit-transition: @what @length @easing; -moz-overgang: @what @length @easing; -o-transition: @what @length @easing; overgang: @what @length @easing;
.box (@orient: horizontal, @pack: center, @align: center) display: -webkit-box; weergave: -moz-box; display: box; -webkit-box-orient: @orient; -moz-box-orient: @orient; box-orient: @orient; -webkit-box-pack: @pack; -moz-box-pack: @pack; box-pack: @pack; -webkit-box-align: @align; -moz-box-align: @align; box-align: @align;
.flex (@val: 1) -webkit-box-flex: @val; -moz-box-flex: @val; box-flex: @val;
Ik zou graag uw mening hierover horen. Als je het idee leuk vindt, laten we dit stylesheet dan turbo laden.
Accentsconagua