Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • DigitalOcean
  • DO Community
Search

Articles Tagged
loops

7 Articles
{
,

}
Direct link to the article How to Map Mouse Position in CSS
cursor custom properties loops

How to Map Mouse Position in CSS

Let’s look at how to get the user’s mouse position and map it into CSS custom properties: --positionX and --positionY.

We could do this in JavaScript. If we did, we could do things like make make an element …

Avatar of Amit Sheen
Amit Sheen on Mar 1, 2021
Direct link to the article How to Write Loops with Preprocessors
loops preprocessing

How to Write Loops with Preprocessors

Loops are one of those features that you don’t need every day. But when you do, it’s awfully nice that preprocessors can do it because native HTML and CSS cannot. …

Avatar of Chris Coyier
Chris Coyier on Nov 4, 2020
Direct link to the article Do CSS Custom Properties Beat Sass Loops?
custom properties loops Sass

Do CSS Custom Properties Beat Sass Loops?

I reckon that a lot of our uses of Sass maps can be replaced with CSS Custom properties – but hear me out for a sec.

When designing components we often need to use the same structure of a component …

Avatar of Robin Rendle
Robin Rendle on Mar 1, 2019 (Updated on Mar 2, 2019)
Direct link to the article You might not need a loop
JavaScript loops

You might not need a loop

Direct Link

Ire Aderinokun has written a nifty piece using loops and when we might consider replacing it with another method, say .map() and .filter(). I particularly like what she has to say here:

As I mentioned earlier, loops are a

…
Avatar of Robin Rendle
Shared by Robin Rendle on Nov 26, 2018
Direct link to the article A Bunch of Options for Looping Over querySelectorAll NodeLists
JavaScript loops

A Bunch of Options for Looping Over querySelectorAll NodeLists

A common need when writing vanilla JavaScript is to find a selection of elements in the DOM and loop over them. For example, finding instances of a button and attaching a click handler to them.

const buttons = document.querySelectorAll(".js-do-thing");
// 
…
Avatar of Chris Coyier
Chris Coyier on Nov 12, 2018 (Updated on Jan 30, 2019)
JavaScript loops template literal

Reactive UI’s with VanillaJS – Part 1: Pure Functional Style

Last month Chris Coyier wrote a post investigating the question, “When Does a Project Need React?” In other words, when do the benefits of using React (acting as a stand-in for data-driven web frameworks in general), rather than server-side templates …

Avatar of Brandon Smith
Brandon Smith on May 29, 2017 (Updated on Jun 21, 2017)
css preprocessors less loops Sass stylus

Loops in CSS Preprocessors

If you’ve ever watched old sci-fi flicks, you know how powerful loops can be. Feed your robot nemesis an infinite loop, and kaboom. Robo dust.

Preprocessor loops will not cause dramatic explosions in space (I hope), but they are …

Avatar of Miriam Suzanne
Miriam Suzanne on Dec 2, 2016 (Updated on Apr 10, 2019)

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • DigitalOcean
  • DigitalOcean Community
  • About DigitalOcean
  • Legal
  • Free Credit Offer
Minisites
  • The Power of Serverless
  • Upcoming Conferences
  • Coding Fonts
  • The Greatest CSS Tricks
Contact
  • Email
  • Guest Writing
Follow
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • iTunes
  • RSS
Back to Top