Share
Dit artikel is het tweede deel van mijn onderzoek naar mixins uit de Bourbon Sass-bibliotheek. Daaronder vindt u handige voorbeelden die uw workflow zullen versnellen en uw Sass-code zullen minimaliseren.
We zullen de volgende acht mixins proeven:
Accentsconagua
Inline Block-mixinMixin positionerenDriehoek mixinClearfix-mixinButton mixinGrootte mixinHiDPI media-querymixinRetina Image mixinNet als bij de vorige zelfstudie vertegenwoordigen de onderstaande voorbeelden niet noodzakelijk de beste ontwerppraktijken, maar zijn ze gekozen voor het verkennen van de basisfunctionaliteit van deze mixins.
Alinea's worden standaard weergegeven als blok elementen.
HTML:
"html
Yada yada yada
Yada yada yada
"
Op blokniveau-elementen, zoals alinea's, wordt automatisch een nieuwe rij in de lay-out gemaakt.
Deze mixin komt van pas als je de standaard weergave gedrag van elementen om inline-block. Het gaat niet alleen op weergeven: inline-blok maar zorgt ook voor eigenaardigheden en legacy-ondersteuning voor IE7.
Meer informatie over weergave op designshack.net.
Sass: Deze blokken hebben een float-achtig gedrag, via inline-blok.
"css .paragraphs-behave-like-blocks + inline-block background-colour: tomato
// SCSS-syntaxis // .paragraphs-behave-like-blocks @ include inline-block; // "
Bekijk de gegenereerde CSS-uitvoer. Wie wil dat smerige gedoe toch aan?
CSS-uitvoer:
css .paragraphs-behave-like-blocks display: inline-block; vertical-align: basislijn; zoom: 1; * weergave: inline; * vertical-align: auto; achtergrondkleur: tomaat;
Instellen op weergeven: inline-blok, de alinea's worden inline weergegeven, maar behouden hun blokniveaukenmerken.
Aandacht! Let op de witruimte tussen de blokelementen. Als je gebruikt vlotter om dezelfde lay-out te bereiken, zou u geen witruimte zien. Het is een soort standaard witruimte, aanwezig in de HTML, die niet weggaat door marges in te stellen op 0px. In plaats daarvan moet u tekenlacunes in de markeringen zelf verwijderen, zoals aangetoond in deze pen:
Deze mix is een afkorting voor het schrijven van iets als het volgende:
Sass:
css. enkele element-positie: relatieve top: 0px links: 100px
Sass:
"css .some-element + positie (relatief, 0px 0 0 100px) // rechtsonder linksonder
// SCSS-syntaxis .sommige-element // @inclusiepositie (relatief, 0px 0 0 100px); "
Dat is het. Geen magie, maar toch super handig. Stijllabels eenvoudig en leesbaar houden loont de moeite na verloop van tijd.
Wil je CSS-driehoeken gebruiken zonder te sjoemelen? Het is zeker niet nodig om afbeeldingen voor de taak te gebruiken. Het is eenvoudig als taart met deze mixin.
Sass:
"css .triangle + triangle (25px, tomato, down) // maat, kleur, richting
// SCSS-syntaxis .triangle @omvat driehoek (25px, tomaat, omlaag); // "
De derde parameter definieert de richting. Opties voor deze mix zijn onder andere:
naar benedenomhooglinksrechts
rechtoplinksbovendown-rechtsbeneden linksU kunt zelfs een tweede kleur definiëren als u een achtergrondkleur voor uw driehoek nodig hebt.
Containers die drijvende elementen in zich hebben ervaren het zero-height containerprobleem - in wezen loopt het containerelement leeg tot nul pixels als alle elementen binnenin drijven en uit de container worden gehaald stroom. In essentie is er niets meer om de container te vullen.
De Clearfix mixin zorgt hier voor bij toepassing op het container / wikkelelement. Het beste hieraan is dat er geen extra "lege" markeringen nodig zijn om de clearfix te accommoderen. Het houdt de dingen semantisch, scheidt zorgen, door gewoon de clearfix toe te voegen aan uw stylesheets. Bekijk dit zeer eenvoudige voorbeeld:
HTML:
"html
"Sass:" css $ lichtgrijs: # D4D4D4 .grey-wrapper background-color: $ light-grey + clearfix .logos float: right + background-image (url ("[email protected]"), url ("thoughtbot.png")) achtergrondpositie: middenboven, linksboven achtergrond-herhalen: herhaal-y, herhaling-x hoogte: 220px breedte: 50% // SCSS-syntax // .grey-wrapper @ include clearfix; achtergrondkleur: $ lichtgrijs; .logos float: right; @ include background-image (url ("[email protected]"), url ("thoughtbot.png")); achtergrondpositie: middenboven, linksboven; achtergrondherhaling: herhaal-y, herhaal-x; hoogte: 220 px; breedte: 50%; // "! [bestand] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441633234957.jpg) In het bovenstaande voorbeeld wordt de grijze container uitgevouwen om de logo's die erin zijn geladen, maar waarin clearfix niet wordt gebruikt:! [bestand] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441633341703.jpg) Als u een blik op de broncode maakt duidelijk hoe deze * micro clearfix * werkt: Sass: [Bourbon source code] (https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_clearfix .scss) "css @mixin clearfix &: after content:" "; -display: table; beiden opschonen; "Deze mixin gebruikt de:na pseudo-element om een lege string helemaal aan het einde van de container te plaatsen. Hierbij bootst het de inhoud na het logo na en wordt de browser getraind in het uitbreiden van de grijze container om andere elementen binnenin te omringen. ## Button Mixin Hebt u uit de verpakking hoogwaardige knoppen nodig? ### Standaardknop! [Bestand] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441633769651.png) HTML: "html Super duper-knop" Sass: "css $ light-blue: # 2485F1 .super-duper-button + button ($ light-blue) // SCSS-syntax // .super-duper-button @include-knop ($ light-blue); // "Dat is het ! Eenvoudige en semantisch schone knoppen. Ze komen zelfs met fantastisch uitziende zwevende effecten. En er zijn nog twee opties: ### Pill Button! [File] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441633844440.png) HTML: "html Super duper pillentoets "css $ donkerroze: # 6B32D1 .super-duper-knop + knop (pil, $ donkerroze) // SCSS-syntaxis // .super-duper-knop @include-knop (pil, $ dark- roze); // "### Shiny Button! [File] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441633895872.png) HTML:" html Super duper glanzende knop "Sass:" css $ acceptance-green: # 43C914 .super-duper-button + button (glanzend, $ acceptance-green) // SCSS-syntax // .super-duper-button @include-knop (glanzend, $ acceptatie- groen); // "** Let op! ** Houd er rekening mee dat de tekst op de knoppen automatisch van kleur verandert afhankelijk van de * lichtheid * van de basiskleur van de knop. Op die manier biedt de mixin een beter contrast en betere leesbaarheid. [bestand] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441634000114.png) Sass: "css $ lichtgrijs: #DEDEDE .super-duper-button + knop (glanzend, $ lichtgrijs) // SCSS-syntax // .super-duper-knop @include-knop (glanzend, $ lichtgrijs); // "# # Size Mixin Moet je ooit definiëren? breedte en hoogte in één verklaring? Met Bourbon hoeft u hier niets meer te doen: Sass: "css. Small-article + size (300, 400) // SCSS-syntaxis //. Small-article @omvang van grootte (300, 400); //" CSS output: "css. small-article width: 300px; height: 400px;" U kunt pixelwaarden of alleen numerieke waarden opgeven. Je kunt gebruiken auto ook voor deze waarden. Als je slechts één maat opgeeft, neemt Bourbon aan dat je een vierkant wilt. Sass: "css .square + size (25px) // SCSS-syntaxis // .square @omvang van grootte (25px); //" ## HiDPI-mixin Als u snel volledig door de leverancier vooraf gedefinieerde mediaquery's wilt genereren voor het detecteren * HiDPI * ("Retina") apparaten, deze mixin komt van pas. Begin met het opgeven van een pixelverhouding * van een doel * apparaat en verklaringen die veranderen als de mediaquery begint. De standaardratio is 1,3. Sass HiDPI-media-query: "css .image width: 150px + hidpi (1.5) width: 200px // SCSS-syntaxis // .afbeelding width: 150px; + hidpi (1.5) width: 200px; //" CSS output: "css. Image width: 150px; @media only screen en (-webkit-min-device-pixel-ratio: 1.5), alleen scherm en (min-moz-device-pixel-ratio: 1.5), alleen scherm en (-o-min-apparaat-pixel-ratio: 1,5 / 1), alleen scherm en (min-resolutie: 144dpi), alleen scherm en (min-resolutie: 1,5 dppx) width: 200px; " Best wel gaaf! Het versmalt repetitieve code behoorlijk. ## Retina Image Mixin Afhankelijk van de * pixeldichtheid * van het apparaat dat uw ontwerpen weergeeft, kunt u afbeeldingen voorzien van de juiste bitmapresolutie. Deze fijne mixin biedt een * retina-achtergrondafbeelding * of een * niet-retina-achtergrondafbeelding * -afhankelijk van het resultaat van de interne HiDPI-media-query van de mixin die het apparaat controleert op zijn pixeldichtheid. Als ik me niet vergis, als bonus, zal het slechts één van de afbeeldingen dienen om te voorkomen dat beide gedownload worden - wat vooral voordelig is voor mobiele netwerken. Als al het bovenstaande je wordt toegejuicht, raad ik aan te beginnen met dit fantastische [article] (http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/) op Smashing Magazine. Sass: "css .logo + retina-image (logo-pictogram, 50px, 30px) // SCSS-syntaxis // .logo @omvatten retina-afbeelding (logo-pictogram, 50px, 30px); //" De CSS-uitvoer helpt de functionaliteit ervan te verklaren: "css .logo background-image: url (logo-icon.png); @media only-scherm en (-webkit-min-device-pixel-ratio: 1.3), alleen scherm en (min- -moz-apparaat-pixel-ratio: 1.3), alleen scherm en (-o-min-apparaat-pixel-ratio: 1.3 / 1), alleen scherm en (min-resolutie: 125dpi), alleen scherm en (min-resolutie : 1.3dppx) .logo background-image: url (logo-icon_2x.png); achtergrondformaat: 50px 30px; "De standaardwaarde van een apparaatpixelratio van 1,3 is gericht op Apple" Retina "-apparaten (die een verhouding van 2) evenals apparaten met pixelverhoudingen als "laag" als 1,3. Deze mixin verwacht een **. Png ** als standaarduitbreiding voor alle afbeeldingen. Standaard wordt ook een extensie ** _ 2x.png ** verwacht voor de bestandsnaam van uw retina-afbeelding. Je kunt beide standaardwaarden overschrijven door een andere retina-bestandsnaam en een standaard extensie te geven, zoals: Sass: "css .logo + retina-image (logo-icoon, 50px, 30px, $ extensie: jpg, $ retina-bestandsnaam: HiDPI- logo-icon, $ retina-achtervoegsel: _retina) // SCSS-syntaxis // .logo @omvatten retina-afbeelding (logo-pictogram, 50px, 30px, $ extensie: jpg, $ retina-bestandsnaam: HiDPI-logo-icoon, $ retina-achtervoegsel: _retina); // "CSS-uitvoer:" css .logo background-image: url (logo-icon.jpg); @media only-scherm en (-webkit-min-device-pixel-ratio : 1.3), alleen scherm en (min-moz-apparaat-pixel-ratio: 1.3), alleen scherm en (-o-min-apparaat-pixel-ratio: 1.3 / 1), alleen scherm en (min-resolutie: 125dpi), alleen scherm en (min-resolutie: 1,3 dppx) .logo background-image: url (HiDPI-logo-icon_retina.jpg); achtergrondformaat: 50px 30px; "# # Cheers! Dat is alles wat we zullen behandelen in termen van Bourbon-mixins. In de volgende tutorial zullen we de functies van Bourbon bekijken.
