![]() This is crucial to refactoring your site later. SASS compiles to inserting 87.5em in place, such as… max-width : 87.5em I’ve named them things that makes sense for their context and use case(s): $xl, $lg, $med, etc… The syntax only requires the $ before the name. That’s right, CSS and variables….what‽ There’s no way! That’s crazy right? Nope…check this out! $xl: 87.5em // 4k and hi-res desktop $lg: 60em // 1080 and hi-res laptops $med: 40em // hi-res tablets and low-res laptops $sm: 28em: // mobile and low-res tablets $xs: 20em // mobile only We can handle the state and breakpoints with SASS. State( s) are things like 4k Hi-Res Desktop, Tablet, Mobile, etc…īreakpoint( s) are where you determine these states begin (in width)įlow is how you set your content to react when a breakpoint is reached (block, inline, flex, etc…) There are 3 components to responsive elements. That sounds crazy right? It’s not…it’s actually very easy. Save your projects the load-time/bulk of unnecessary assets, and write a SASS mixin that will do the responsiveness for you in about 10 lines or less. The simple fact is you don’t need Bootstrap to make your site responsive, and furthermore, it’s VERY easy to do so without it and takes very little time. The question here is….why use Bootstrap if you’re going to just make custom content in the end? When I’ve asked this to some developers a lot of the times I get the “I needed it to be responsive easily and quickly” answer. ![]() ![]() You can find many examples of where a site made with Bootstrap ends up having custom elements all over the place. Unfortunately, many are using Bootstrap just to make their site responsive, and that’s 90% of their use for it. Some drank the Bootstrap KoolAid long ago, and are afraid to turn back. Most developers today are falling back to the Twitter Bootstrap approach. This is simply because of the types of devices people are using today to view your projects. If your website doesn’t have a mobile compatible format, it’s likely you’re losing more than 90% of your traffic. scss files, and when your buddy is talking about “SASS”, he/she are probably referring to that too.Ī big issue with websites today is responsiveness… You might hear your boss, client, marketing lead, or even a friend just chatting and getting coffee with you say “The website needs to be responsive to mobile.” The simple fact is they are right. Perhaps, cause it’s easier to say? Therefore, just to clarify, in this article anywhere I refer to “SASS” I’m actually referring to. This is the direction this language is going, but since we’ve all been calling it “SASS” for years we still use this term, even when referring to the new syntax for SCSS. scss file is also a valid css stylesheet. scss, as well the standard block formatting syntax that we are more familiar with in standard CSS. There is a new syntax called “SCSS” (for “Sassy” CSS), that comes along with a new file format of. That is misleading, as the old original SASS syntax was written using indentations to separate code blocks, and file formats were all. Note: The vernacular we all use when referring to this pre-processor language is the old name of “SASS”. I’ll get into some SASS examples below, then integrate them into how to make a masonry-like structure to your site. Furthermore it can make your life a lot easier as far as managing your stylings, especially if you have a library of assets that span across multiple websites, such as templates you reuse over and over for the similar sites. It will make you look like a CSS superhero. To put it short, SASS is like what CSS5 could likely be, where as in the current timeline of 2017 we are all still stuck with CSS3. It allows you to streamline your CSS stylesheet process for large-scale websites or web applications. SASS is a CSS pre-processor that compiles to pure CSS. If you have heard of SASS, but aren’t already using it, then it’s likely you missed the boat on the significance of how powerful a tool it can be. If you haven’t heard of SASS, then you are probably about to have a life changing moment with your CSS practices. ![]() In comes two tools that will significantly help with this problem. None are very responsive, content can significantly effect their uses, and the ease of scaling and editing content becomes cumbersome. There have been many ways to approach this in the past: tables, nested divs with complex floats, and blocked content with fixed widths, etc… Most of these have a host of problems. There comes a time when any web developer faces the task of doing column-like content on a website. ![]()
0 Comments
Leave a Reply. |