https://www.clairecodes.com/categories/sass/ Recent content in Sass on clairecodes Hugo -- gohugo.io en-gb Mon, 16 Apr 2018 22:31:21 +0100 https://www.clairecodes.com/blog/2018-04-16-drying-out-css-selectors-with-sass-maps// Mon, 16 Apr 2018 22:31:21 +0100 https://www.clairecodes.com/blog/2018-04-16-drying-out-css-selectors-with-sass-maps// Repetitive selectors I recently wrote some Sass that looked like this: $color-apple: green; $color-lemon: yellow; $color-strawberry: red; .apple-button { background-color: $color-apple; } .strawberry-button { background-color: $color-strawberry; } .lemon-button { background-color: $color-lemon; } // This compiles to: // .apple-button { // background-color: green; // } // // .strawberry-button { // background-color: red; // } // // .lemon-button { // background-color: yellow; // } (No I’m not working on a website for a greengrocers, the fruit theme is just for example purposes! https://www.clairecodes.com/blog/2018-04-02-making-a-sticky-sidebar-with-two-lines-of-css// Mon, 02 Apr 2018 16:19:53 +0100 https://www.clairecodes.com/blog/2018-04-02-making-a-sticky-sidebar-with-two-lines-of-css// Have you ever been on a website where an element “sticks” to the screen and follows you as you scroll down the page? This is what I call a sticky sidebar, and I’ve spent many hours battling with legacy code trying to debug one. In the past, developers used JavaScript to build this feature, by recalculating the position of the sidebar on the browser’s scroll event. This was complicated to maintain and also costly for performance. https://www.clairecodes.com/blog/2018-03-19-reasons-not-to-use-ids-in-css// Mon, 19 Mar 2018 20:54:03 +0000 https://www.clairecodes.com/blog/2018-03-19-reasons-not-to-use-ids-in-css// Sometimes when I’m reviewing code, I advise a colleague not to use IDs for CSS style selectors, and inevitably get asked why. Like standing in queues, making a cup of tea or applying a full face of makeup in the dark at 6am, avoiding IDs in CSS is something I do without thinking. I’ve been doing it for so long without questioning it, that it takes me a minute before I can explain to other people why. https://www.clairecodes.com/blog/2018-03-16-styling-inline-code-tags// Fri, 16 Mar 2018 08:58:21 +0000 https://www.clairecodes.com/blog/2018-03-16-styling-inline-code-tags// I like writing tech-related blog posts (you’re reading one right now!). My posts often contain the <code> tag as I illustrate code examples. The default browser style for this tag can be pretty dull, typically using the system monospace font and a beige background colour. I’ve added my own custom style to this tag. This is a step-by-step explanation of it, as I’d rather do that than watch some drivel on Netflix today. https://www.clairecodes.com/blog/2017-11-21-multiline-comments-in-sass// Tue, 21 Nov 2017 21:35:19 +0000 https://www.clairecodes.com/blog/2017-11-21-multiline-comments-in-sass// Note: These rules are specifically for sass-lint, because that’s my linter of choice. However, equivalent rules will (probably) exist for other linters such as stylelint or csslint. If you lint your Sass code using an automated tool like sass-lint, you might have encountered the rule: no-css-comments. Depending on the severity level in your linter config, this will trigger an error or a warning when it encounters comments like this /* I am a CSS style comment */.