Share
Ik zal er geen geheim van maken: ik hou van Sass. In dit artikel ga ik mijn aanbevelingen delen voor het dagelijks werken met Sass en voor echte projecten.
Hier is een geweldige plug-in die u veel tijd zal besparen. Open pakketcontrole in sublieme tekst, zoek naar Hayaku en doe een snelle installatie. Nu kunt u uw CSS sneller en met snelkoppelingen schrijven. Hier zijn enkele voorbeelden:
// Schrijf dit en druk op tab mt10 // Resultaat marge-top: 10px; // Of deze df // Resultaatweergave: flex;
Met name voor uw Sass-workflow is er één map die we moeten negeren bij het zoeken in Sublime Text. De map in kwestie is .sass-cache, omdat dit alleen nodig is voor het compileerproces. Bovendien mag u nooit iets in deze map bewerken, dus maak het u gemakkelijk en verberg het!
druk op CMD-, om de gebruikersconfiguratie van uw editor te verkrijgen en de volgende regels in te voegen:
"folder_exclude_patterns": [".sass-cache"]
Een solide projectstructuur hebben is erg belangrijk, vooral als je in een team werkt.
Ik gebruik drie verschillende secties (een benadering van SMACSS door Jonathan Snook): _baseren, _layouts en _modules. Een globale configuratie is ideaal voor plaatsing in de _baseren map. Voor elk type lay-out maakt u een uniek bestand en plaatst u het in de map _layouts. Denk bijvoorbeeld aan een basisopmaak, het raster of misschien een bestand voor de afdruklay-out.
Het is mogelijk om een website op te splitsen in verschillende soorten modules zoals tabbladen, knoppen, accordeons enz. Geen enkele module zou op de hoogte moeten zijn van de lay-out eromheen. Deze horen dan in de _modules map.
Normaal ziet mijn projectstructuur er als volgt uit:
scss / | - _base / | | - _config.scss | | - _presets.scss | | - _headings.scss | | - ... | - _layouts / | | - _l-base.scss | | - _l-grid.scss | - _modules / | | - _m-buttons.scss | | - _m-tabs.scss | - application.scss stylesheets / | - application.css
Tenzij u Sass 3.3 of Node-Sass gebruikt, heeft u waarschijnlijk de volgende functie nodig voor het simuleren van Sass-kaarten. Met Sass-kaarten kunt u sleutelsets definiëren met bijbehorende waarden. In dit geval kunt u de functie gebruiken, de sleutel invoegen en dan krijgt u de bijbehorende waarde. Hier is een snel voorbeeld:
// Functie: Associatieve arrays simuleren // Authour: Hugo Giraudel // Bron: http://hugogiraudel.com/2013/08/12/sass-functions/#mapping @function match ($ haystack, $ needle) @each $ item in $ hooiberg $ index: index ($ artikel, $ naald); @if $ index $ return: if ($ index == 1, 2, $ index); @return nth ($ item, $ return); @return false; // Gebruik $ lijst: a b, c d, e f; $ waarde: overeenkomst ($ lijst, e); // retourneert f
Hier zijn enkele mixins die je waarschijnlijk nodig zult hebben in elk project. Laten we beginnen met wat eenvoudiger dingen zoals het bouwen van een kolom met sass
Een grid is absoluut onmisbaar in uw project. Met deze helper (een mix die ik heb genoemd col) Het is gemakkelijker om de breedte van een kolom te maken. Het verwacht twee waarden: het nummer van de kolom ($ col) En de maximumkolommen ($ Max-cols) in uw raster, de standaardinstelling 12.
// Bereken de breedte van een kolom // Standaardwaarde van maximum kolommen is 12 @mixin col ($ col, $ max-cols: 12) width: (100% / $ max-cols) * $ col; // Gebruik .element @include col (3); // Resultaat .element width: 25%;
De tijd is al lang verstreken dat we alleen pixelwaarden nodig hebben. Waar mogelijk probeer ik deze tegenwoordig te gebruiken em of rem. Dit zijn beide relatieve meeteenheden, het verschil tussen hen is dat em is gebaseerd op de waarde van zijn oudercontainer en rem is gebaseerd op de lettergrootte van de root (de html element).
// Mixin @mixin font-size ($ sizeValue: 1.6) font-size: ($ sizeValue * 10) + px; lettertypegrootte: $ sizeValue + rem; // Gebruik .element @omvat lettertype-grootte (1.8); // Resultaat .element font-size: 18px; font-size: 1.8rem;
Het handmatig insluiten van lettertypen via CSS3 is niet eenvoudig, omdat er zoveel indelingen zijn voor verschillende soorten browsers. Een mixin is hier de perfecte oplossing voor. Deze mixin wordt genoemd font-faceen het verwacht twee waarden. De eerste is de naam voor de lettertypefamilie en de tweede is het pad naar de verschillende bestandsindelingen van het lettertype. Lees meer over deze verschillende formaten op Mozilla Developer Network.
Accentsconagua
// Mixin @mixin font-face ($ name, $ url) @ font-face font-family: # $ name; src: url ('# $ url .eot'); src: url ('# $ url .eot # iefix') formaat ("embedded-opentype"), url ('# $ url .ttf') formaat ('truetype'), url ('# $ url .svg ## $ name ') formaat (' svg '), url (' # $ url .woff ') formaat (' woff '); @inhoud; // Gebruik @include font-face ('icons', '... / fonts / icons / iconfont'); // Result @ font-face font-family: icons; src: url ("... /fonts/icons/iconfont.eot"); src: url ("... /fonts/icons/iconfont.eot#iefix") formaat ("embedded-opentype"), url ("... /fonts/icons/iconfont.ttf") formaat ("truetype"), url ( "... /fonts/icons/iconfont.svg#icons") format ("svg"), url ("... /fonts/icons/iconfont.woff") formaat ("woff"); Jayden Seric heeft geweldig werk geleverd met zijn mixin voor het opnemen van pictogrammen. Hier hebben we een mixin genoemd icoonmet twee parameters: $ position voor de pseudo-elementen, dan de boolean $ icon die is ingesteld op waar of vals. Maak een variabele genaamd $ pictogrammen, definieer de naam van het pictogram (sleutel) en de waardeervoor:
// Auteur: Jayden Seric // Bron: http://jaydenseric.com/blog/fun-with-sass-and-font-icons @mixin-pictogram ($ positie: 'before', $ icon: false) &: # $ position @if $ icon content: match ($ icons, $ icon); @inhoud; // Gebruik // Maak een variabele met al uw pictogrammen // Name, Content-Value $ icons: ('vinkje' a ',' minus 'b', 'plus "c'); // Mixin .element opnemen @inclusief pictogram ('before', 'vinkje'); // Resultaat .element: before content: "a";Ik ben zo dankbaar voor deze mixin van Snugug: het is een geweldige manier om je wereldwijde breekpunten te configureren en het beste deel is dat je elk breekpunt een eigen naam geeft. Het onderscheiden van dingen met namen is zoveel beter dan met pixels. Dit geeft u ook een goed overzicht van alle gebruikte breedten en een centrale plaats om het gedrag te veranderen.
// Gebruik mixin door Snugug // URL: https://gist.github.com/Snugug/2493551 // Definieer uw breekpunten en geef elke naam $ breekpunten: ('small' 481px, 'medium' 600px, 'large '769px); // Gebruik .element background: red; @ include reply-to ('medium') background: blue; // Resultaat .element achtergrond: rood; @media-scherm en (min-breedte: 600px) .element background: blue; Omgaan met variabelen in een schaalbare front-end is vaak een filosofische vraag. In mijn geval heb ik er een workflow voor die me goed uitkomt. Eerst maken we een kleurenpalet met alle beschikbare kleuren en geven ze normaal identificerende namen.
$ grijs-licht: # f2f2f2; $ grijs: #ccc; $ grijs-donker: # 7a7a7a; $ rood: # d83a3a; $ groen: # 40b846;
Nadat we een goed palet met alle beschikbare kleuren hebben, moeten we wijzen op de bedrijfs- of hoofdkleuren van het project. Met deze stap is het mogelijk om een geheel nieuw thema voor het project te maken zonder tijd te verspillen met het aanpassen van de kleuren in uw hele bestanden.
$ corp-color: $ red! standaard; $ corp-color-dark: donkerder ($ corp-color, 10%)! standaard; $ corp-color-second: $ green! default; $ corp-color-second-dark: donkerder ($ corp-color-second, 10%)! standaard;
Stel een aantal basisconfiguraties in zoals een algemene lettergrootte, lettertype-families of de standaardlettertype-kleur in een configuratiebestand - bijvoorbeeld in een bestand genaamd _config.scss, welke in je map staat _basic.
// Font $ base-font-size: 1.7! Default; $ base-font-family: Helvetica, Arial, sans-serif! standaard; $ base-font-color: $ gray! default; // Box / Border $ base-border-radius: 3px! Standaard; $ border-radius-rounded: 50%! default; $ base-border-colour: $ gray! default;
Er zijn veel rastersystemen in de wereld, maar het raster van PureCSS is in mijn ogen een van de beste. Ik nam het idee erachter op, deed wat magie met Sass waarmee ik snel kolomklassen kan maken en een raster kan bouwen voor kleine, middelgrote en grote viewports.
Het is supereenvoudig om het responsieve gedrag van een element te veranderen. Je definieert het gedrag één keer voor de module, maar als je op enig moment ander gedrag hebt, dan maak je een modifier zoals .m-text-with-troef - large
// Definieer maximale kolommen en de ruimte tussen elke kolom $ max-cols: 2; $ goot-breedte: 25px;
// Naam: standaard-raster voor $ sum van 1 tot $ max-cols @voor $ i van 1 tot $ sum .lu - # $ i - # $ sum @include col ($ i, $ bedrag); // Naam: Small-Grid @ voor $ sum van 1 tot $ max-cols @voor $ i van 1 tot $ sum .lu - small - # $ i - # $ sum @ include reply-to ('small') @include col ($ i, $ sum); // Name: Medium-Grid @ voor $ sum van 1 tot $ max-cols @voor $ i van 1 tot $ sum .lu - medium - # $ i - # $ sum @ include reply-to ('medium') @ include col ($ i, $ sum); // Name: Large-Grid @ voor $ sum van 1 tot $ max-cols @for $ i van 1 tot $ sum .lu - large - # $ i - # $ sum @ include reply-to ('large') @include col ($ i, $ sum); // Gebruik Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Bij mobiele apparaten krijgt u een kolom over de volledige breedte, voorbij 480 px viewport een halve kolom en meer dan 768 px een derde kolom.
De meeste websites (uitgebreide verklaring) hebben een gecentreerde container. Dit is echter niet altijd het geval, dus daarom is het handig om een helper te maken:
// Naam: Constrained Container .l-constrained margin-left: auto; marge-rechts: auto; padding-left: $ prevent-spacing; padding-right: $ prevent-spacing; max. breedte: $ max-wrapper-width;
Als u flexbox niet als uw gewenste lay-out-engine gebruikt, gebruikt u drijvers. Het is noodzakelijk om drijvers te wissen, omdat anders de hele lay-out kan worden verpest.
.l-groep: na content: "; clear: both; display: table;
Waar ik consistente spatiëring zie in een lay-outontwerp, gebruik ik helperklassen om de metingen waar te houden.
// Naam: Distance-Small // Beschrijving: Helper om distance-top te maken .l-distance-small margin-top: 20px; // Name: Distance-Medium // Beschrijving: Helper om distance-top .l-distance-medium te maken margin-top: 40px;
Geeft u de voorkeur aan een online font-generator of gebruikt u een opdrachtregelinterface voor het genereren van lettertypen? Ik geef de voorkeur aan een online oplossing, de tool van mijn keuze is fontastic.me. Er is een goed overzicht van al uw lettertypen, u kunt kiezen hoe de klasse- of tekenmapping moet zijn.
Laten we nu beginnen met het maken van klassen voor uw pictogrammen. Ik zal je de basisstijlen van elk pictogram niet laten zien. Je kunt dit zelf aan, maar dit kan je helpen bij het instellen van het basispictogram.
// Name: Array met naam- en inhoudswaarde $ icons: ('vinkje' a ',' minus 'b', 'plus' c '); $ prefix:' icon-- '! Default; // Name: Loop // Beschrijving: maak voor elk pictogram een eigen klasse met de juiste inhoud Configuratie voor pictogrammen in _config.scss. // Gebruik de mixin voor het maken van een pictogram boven aan het artikel @ elk $ pictogram in $ pictogrammen $ naam : nth ($ icon, 1);. # unquote ($ prefix) # $ name @include icon ('before', $ name); // Result .icon - vinkje: before content : 'a'; .icon - minus: vóór content: 'b'; .icon - plus: before content: 'c';Weet je wat ik bedoel? Toen ik voor het eerst begon als een CSS-ontwikkelaar, heb ik alles gebouwd op basis van de designerpagina, maar wat als je een module op een andere site nodig hebt? Daarom is het belangrijk om gesloten modules te bouwen zonder de lay-out er omheen.
Maak een bestand voor uw module en plaats het in de map _modules. Aan de bovenkant van het bestand heeft u een configuratiegebied, waar u kleuren of andere aspecten definieert die van invloed zijn op het thema.
Onder de configuratie definieert u de module met alle stijlen. Gebruik opmerkingen goed, om de module te vereenvoudigen.
@charset 'UTF-8'; // 1.Config $ accordeon-bgkleur: $ grijs-licht! Standaard; $ accordion-alternative-bgcolor: $ grey-dark! standaard; $ accordion-fontcolor: $ corp-color! default; // 2.Base // Name: Default Accordion .m-accordeon background: $ accordeon-bgcolor; kleur: $ accordion-fontcolor; // Naam: Alternatieve accordeon .m-accordeon - alternatief achtergrondkleur: $ accordeon-alternatief-bgcolor;
Voel je vrij om de repository te splitsen die alle code bevat die je in dit artikel ziet. Ik hoop dat het je helpt bij het bouwen van een beter schaalbare front-end in real-world projecten. Deel je gedachten en ideeën met mij in de comments.
