The thing is, those functions often do not provide the expected result. On the other hand, the mix function is a nice way to lighten or darken a color by mixing it with either white or black.
The benefit of using mix rather than one of the two aforementioned functions is that it will progressively go to black or white as you decrease the proportion of the color, whereas darken and lighten will quickly blow out a color all the way to black or white. The scale-color function is designed to scale properties more fluidly by taking into account how high or low they already are. Lists are the Sass equivalent of arrays.
A list is a flat data structure unlike maps intended to store values of any type including lists, leading to nested lists. When adding new items to a list, always use the provided API. Do not attempt to add new items manually. In this article , I go through a lot of tricks and tips to handle and manipulate lists correctly in Sass.
Both keys and values can be of any data type, including maps although I would not recommend using complex data types as map keys, if only for the sake of sanity. Write-ups about Sass maps are many given how longed-for this feature was. At this point, this is mostly revising what everybody knows, but here is how a CSS ruleset should be written at least, according to most guidelines, including CSS Guidelines :. I cannot think of many topics where opinions are as divided as they are regarding declaration sorting in CSS.
Concretely, there are two factions here:. There are pros and cons for both ways. On one hand, alphabetical order is universal at least for languages using the latin alphabet so there is no argument about sorting one property before another. However, it seems extremely weird to me to see properties such as bottom and top not right next to each other.
Why should animations appear before the display type? There are a lot of oddities with alphabetical ordering. On the other hand, ordering properties by type makes perfect sense. Every font-related declarations are gathered, top and bottom are reunited and reading a ruleset kind of feels like reading a short story. But unless you stick to some conventions like Idiomatic CSS , there is a lot of room for interpretation in this way of doing things. Where would white-space go: font or display?
Where does overflow belong exactly? What is the property order within a group it could be alphabetical, oh the irony? There is also another interesting subtree of type ordering called Concentric CSS , that seems to be quite popular as well. Basically, Concentric CSS relies on the box-model to define an order: starts outside, moves inward.
I must say I cannot decide myself. Because of this, I will not impose a choice in this styleguide. Pick the one you prefer, as long as you are consistent throughout your stylesheets i. A recent study shows that using CSS Comb which uses type ordering for sorting CSS declarations ends up shortening the average file size under Gzip compression by 2. One particular feature Sass provides that is being overly misused by many developers is selector nesting. Selector nesting offers a way for stylesheet authors to compute long selectors by nesting shorter selectors within each others.
Along the same lines, since Sass 3. For instance:.
This method is often used along with BEM naming conventions to generate. The problem with selector nesting is that it ultimately makes code more difficult to read. One has to mentally compute the resulting selector out of the indentation levels; it is not always quite obvious what the CSS will end up being. To prevent such situations, we talked a lot about the Inception rule a few years back.
It advised against nesting more than 3 levels deep, as a reference to the movie Inception from Christopher Nolan. I would be more drastic and recommend to avoid selector nesting as much as possible. For starters, it is allowed and even recommended to nest pseudo-classes and pseudo-elements within the initial selector. Using selector nesting for pseudo-classes and pseudo-elements not only makes sense because it deals with closely related selectors , it also helps keep everything about a component at the same place.
Also, when using component-agnostic state classes such as. Last but not least, when styling an element because it happens to be contained within another specific element, it is also fine to use nesting to keep everything about the component at the same place.
How To Become A Hacker
As with everything, the specifics are somewhat irrelevant, consistency is key. If you feel fully confident with selector nesting, then use selector nesting. Just make sure your whole team is okay with that. I suggest those recommended by CSS Guidelines.
- Ruth Anns Letters Learning to Walk on Water. Series One.
- 1. Use SEO-Friendly URLs.
- International Economics of Resource Efficiency: Eco-Innovation Policies for a Green Economy.
There are a few things you can name in Sass, and it is important to name them well so the whole code base looks both consistent and easy to read:. Sass placeholders are deliberately omitted from this list since they can be considered as regular CSS selectors, thus following the same naming pattern as classes. Regarding variables, functions and mixins, we stick to something very CSS-y : lowercase hyphen-delimited , and above all meaningful. If you happen to be a framework developer or library writer, you might find yourself dealing with variables that are not meant to be updated in any circumstances: constants.
Unfortunately or fortunately? As for many languages, I suggest all-caps snakerized variables when they are constants. Not only is this a very old convention, but it also contrasts well with usual lowercased hyphenated variables. If you really want to play with the ideas of constants in Sass, you should read this dedicated article. For instance, if you work on a Sassy Unicorn project that is meant to be distributed, you could consider using su- as a namespace.
It is specific enough to prevent any naming collisions and short enough not to be a pain to write. Kaelig has a very insightful article about the global CSS namespace , in case this topic is of any interest to you. Note that automatic namespacing is definitely a design goal for the upcoming import revamp from Sass 4. As that comes closer to fruition, it will become less and less useful to do manual namespacing; eventually, manually namespaced libraries may actually be harder to use.
CSS is a tricky language, full of hacks and oddities. Because of this, it should be heavily commented, especially if you or someone else intend to read and update the code 6 months or 1 year from now. And I probably forgot a lot of other various reasons as well. Commenting takes very little time when done seamlessly along with the code so do it at the right time.
Coming back at a piece of code to comment it is not only completely unrealistic but also extremely annoying.
This comment also hosts numbered explanations regarding specific parts of the ruleset. Basically everything that is not obvious at first glance should be commented. There is no such thing as too much documentation. Remember that you cannot comment too much , so get on fire and write comments for everything that is worth it.
- NIF - Assembly, Maintenance of Full-Scale [laser] Amplifiers.
- 4.1 Back to the Basics!
- Collected papers of V. K. Patodi!
- Sass Guidelines.
- Breakfast At Tiffanys (Popular Penguins).
- Production of juvenile Atlantic salmon, Salmo salar, in natural waters!
- Benedictus, No. 6 from Messe Solennelle de Sainte Cécile;
When commenting a Sass-specific section, use Sass inline comments instead of a C-style block. This makes the comment invisible in the output, even in expanded mode during development. Every variable, function, mixin and placeholder that is intended to be reused all over the codebase should be documented as part of the global API using SassDoc.
Keeping the architecture consistent and meaningful is even harder. Fortunately, one of the main benefits of using a CSS preprocessor is having the ability to split the codebase over several files without impacting performance like the import CSS directive would do. On top of that, I cannot stress enough the need for folders, even on small scale projects. There is no reason to do otherwise when structuring a CSS project. Split the codebase into meaningful separated folders so it is easy to find stuff later when you have to come back to the code.
I have learnt that architecture is most of the time very specific to the project. Feel free to discard completely or adapt the proposed solution so that you deal with a system that suits your needs. There is a major difference between making it work , and making it good. Again, CSS is quite a messy language .
The less CSS we have, the merrier. To keep stylesheets short and efficient—and this will not be any surprise to you—it is usually a good idea to think of an interface as a collection of components. For instance, a search form should be treated as a component. It should be reusable, at different positions, on different pages, in various situations. It should not depend on its position in the DOM footer, sidebar, main content….
Most of any interface can be thought of as little components and I highly recommend you stick to this paradigm. This will not only shorten the amount of CSS needed for the whole project, but also happens to be much easier to maintain than a chaotic mess where everything is flustered. The styles described in each component file should only be concerned with:.
If you want your components to be able to be themed externally e. Exclude styles such as colors, shadows, font rules, background rules, etc. A component partial can include component-specific variables, placeholders, and even mixins and functions. Keep in mind, though, that you should avoid referencing i.