1<!DOCTYPE html> 2<html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <title>Sass break - A Sass blog</title> 8 <meta name="viewport" content="width=device-width"> 9 <meta name="description" content="A simple blog about Sass."> 10 <link rel="shortcut icon" href="http://sassbreak.com/favicon.ico"> 11<!-- <link rel="stylesheet" href="http://basehold.it/27"> --> 12 <link rel="canonical" href="http://sassbreak.com/"> 13 14 <!-- Custom CSS --> 15 <link rel="stylesheet" href="/css/styles.css"> 16
16<script>
vendor: 343 bytes, lines 16-21
16 17 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 18 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 19 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 20 })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 21 ga('create', '
21UA-54825201-1
vendor: 40 bytes, lines 21-23
21', 'auto'); 22 ga('send', 'pageview'); 23
23</script>
23 24</head> 25 26 <body> 27 <div class="wrapper"> 28 29<header class="main-header" role="banner"> 30 <nav class="navbar" role="navigation"> 31 <ul class="nav"> 32 <li class="nav__item"> 33 <a href="http://sassbreak.com">Articles</a> 34 </li> 35 <li class="nav__item"> 36 <a href="/about/">About</a> 37 </li class="nav__item"> 38 <li class="nav__item"> 39 <a href="/resources/">Resources</a> 40 </li> 41 </ul> 42 </nav> 43</header> 44<div class="grid panel--padded--centered"> 45 <div class="grid__col--12 break"> 46 <a class="site-logo" href="/" title="Sassbreak.com â Home"> 47 <b class="srt">Sass Break</b> 48 </a> 49 </div> 50</div> 51 52 53 <div class="grid"> 54 <div class="grid__col--12"> 55 <ul class="post"> 56 <!-- This loops through the paginated posts --> 57 58 <li class="post__item"> 59 <a class="post__title" href="/calculate-flex-basis/">Calculating flex-basis Values and Margins</a> 60 <div class="post__meta"> 61 <b class="post__author">Guil Hernandez</b> 62 <b class="post__sep">â¢</b> 63 <b class="post__date">Feb 8, 2017</b> 64 </div> 65 <p>Learn to create a simple Sass function that calculates your <code>flex-basis</code> value, including flexible margins. The <code>per-line()</code> function places the number of flex items defined on one line (if the available space allows it). As a result, your flex items will line up perfectly across multiple flex lines.</p> 66 67 68 <a class="btn--default" href="/calculate-flex-basis/">Read more</a> 69 </li> 70 71 <li class="post__item"> 72 <a class="post__title" href="/intro-to-react-router/">Introduction to React Router</a> 73 <div class="post__meta"> 74 <b class="post__author">Guil Hernandez</b> 75 <b class="post__sep">â¢</b> 76 <b class="post__date">Nov 23, 2016</b> 77 </div> 78 <p>In this talk from <a href="http://nodevember.org/">Nodevember 2016</a>, <a href="https://twitter.com/guilh">Guil</a> covers essential features of React Router, a popular React library that manages navigation and rendering of components in React apps.<p> 79 80</p></p> 81 82 <a class="btn--default" href="/intro-to-react-router/">Read more</a> 83 </li> 84 85 <li class="post__item"> 86 <a class="post__title" href="/stop-arguing-with-your-mixins">Stop Arguing So Much with Your Mixins</a> 87 <div class="post__meta"> 88 <b class="post__author">Dale Sande</b> 89 <b class="post__sep">â¢</b> 90 <b class="post__date">Jan 16, 2016</b> 91 </div> 92 <p>Mixins are arguably one of the more widely used tools in the Sass language next to the variable. Coming with that, mixins are more apt to be the most abused tool in the language. Mixins are extremely powerful and capable of doing a great number of things, but as we are creating these massive bodies of complex code, itâs easy to find ourselves in a place where we have too many arguments in order to use our mixin. Itâs at this point we have started to lose comprehension of whatâs happening. The complexity of the tool starts to outweigh its value.</p> 93 94 95 <a class="btn--default" href="/stop-arguing-with-your-mixins">Read more</a> 96 </li> 97 98 <li class="post__item"> 99 <a class="post__title" href="/writing-modular-css-with-sass/">
99Writing Modular CSS with Sass</a> 100 <div class="post__meta"> 101 <b class="post__author">Guil Hernandez</b> 102 <b class="post__sep">â¢</b> 103 <b class="post__date">Jul 22, 2015</b> 104 </div> 105 <p>CSS needs to be reusable, scalable and adaptable to different use cases. When writing modular CSS, our goal should be to get to a point where modifying or re-arranging anything about the structure will not break the front-end.</p> 106 107 108 <a class="btn--default" href="/writing-modular-css-with-sass/">Read more</a> 109 </li> 110 111 <li class="post__item"> 112 <a class="post__title" href="/ruby-sass-libsass-differences/">Ruby Sass, LibSass â What's the Difference?</a> 113 <div class="post__meta"> 114 <b class="post__author">Guil Hernandez</b> 115 <b class="post__sep">â¢</b> 116 <b class="post__date">Apr 15, 2015</b> 117 </div> 118 <p>Just when youâre getting used to working with <a href="http://sass-lang.com/">Sass</a>, you hear about a new type of Sass called <a href="http://libsass.org/">LibSass</a>. Then you immediately start asking yourself: <em>âWhat the heck is LibSass? Should I drop Ruby Sass and get on board with LibSass? Oh no â Iâm behind on the new hotness!â</em></p> 119 120 121 <a class="btn--default" href="/ruby-sass-libsass-differences/">Read more</a> 122 </li> 123 124 <li class="post__item"> 125 <a class="post__title" href="/sass-tools-and-snippets/">Tools & Snippets from the Sass Community</a> 126 <div class="post__meta"> 127 <b class="post__author">Guil Hernandez</b> 128 <b class="post__sep">â¢</b> 129 <b class="post__date">Mar 29, 2015</b> 130 </div> 131 <p>Since we launched <a href="http://sassbreak.com/">Sass break</a>, weâve received links to helpful Sass tools and snippets from readers. So in this post, weâre giving them a hat tip by sharing their tools and code snippets with everyone!</p> 132 133 134 <a class="btn--default" href="/sass-tools-and-snippets/">Read more</a> 135 </li> 136 137 </ul> 138 139 <!-- Pagination links --> 140 141 <div class="pagination"> 142 143 144 145 146 1 147 148 149 150 <a class="pagination__page" href="/page2">2</a> 151 152 153 154 <a class="pagination__page" href="/page3">3</a> 155 156 157 158 159 <a class="pagination__arrow-next" href="/page2">Next »</a> 160 161 </div> 162 163 </div> 164</div> 165 166 <div class="push"></div> 167 </div> 168 <footer class="panel--centered" role="contentinfo"> 169 <div class="grid"> 170 <div class="grid__col--4"> 171 <a href="https://twitter.com/Dave_Conner" title="Dave Conner - @Dave_Conner"><img class="media__img--avatar" src="https://pbs.twimg.com/profile_images/468537320581238784/BVSoNzeI.jpeg"></a> 172 </div> 173 <div class="grid__col--4"> 174 <a class="site-logo--white" href="/" title="Home"> 175 <b class="srt">Sass Break</b> 176 </a> 177 <p class="site-desc">A simple blog about Sass. <a href="https://twitter.com/sassbreak">@sassbreak</a></p> 178 </div> 179 <div class="grid__col--4"> 180 <a href="https://twitter.com/guilh" title="Guil Hernandez - @guilh"><img class="media__img--avatar" src="https://pbs.twimg.com/profile_images/578368788535455744/WhLtbEaB.jpeg"></a> 181 </div> 182 </div> 183</footer> 184 185 </body> 186</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.