JS-Sass Loops

@for
@for is used in two ways: "start through end" or "start to end". The main difference is that "start to end" excludes the end number, and "start through end" includes the end number.



"Start through end" example:

<style type='text/sass'>
@for $i from 1 through 5 {
.text-#{$i} { font-size: 10 * $i; }
}
</style>
<p class="text-1">Hello</p>
<p class="text-2">Hello</p>
<p class="text-3">Hello</p>
<p class="text-4">Hello</p>
<p class="text-5">Hello</p>


f-s will be 10px, 20px, 30px, 40px 50px respectively.



@each

On each iteration, the variable gets assigned to the current value from the list or map.

<style type='text/sass'> @each $color in blue, black, red { .#{$color}-bg {background-color: $color;} } div { height: 200px; width: 200px; } </style>
<div class="blue-bg"></div> <div class="black-bg"></div> <div class="red-bg"></div>

We Wrote an @each directive that goes through a list:
blue, black, red and assigns each variable to a .color-bg class,
where the "color" part changes for each item.



@while



<style type='text/sass'>
$x: 1;
@while $x < 4{
.text-#{$x} { font-size: 5px * $x;}
$x: $x + 1;
}
</style>

<p class="text-1">Hello</p>
<p class="text-2">Hello</p>
<p class="text-3">Hello</p>

Comments

Post a Comment

Popular posts from this blog

Tech Duos For Web Development

Complete Guide to Web Development Technology Stacks Complete Guide to Web Development Technology Stacks Choosing the Right Technology Stack Selecting the appropriate technology stack is one of the most critical decisions in web development. Your choice impacts: Development speed - How quickly you can build and iterate Scalability - How well your application can grow Performance - The speed and responsiveness of your app Maintainability - How easy it is to update and extend your code Team expertise - The skills your developers need to have Cost - Both development and hosting expenses Pro Tip: Consider your project requirements, team skills, and long-term maintenance needs when choosing a stack. Popular Technology Stacks MERN Stack The MERN stack is one of the most po...
Read more

CIFAR-10 Dataset Classification Using Convolutional Neural Networks (CNNs) With PyTorch

CIFAR-10 Image Classification with CNN (PyTorch) - Complete Guide CIFAR-10 Image Classification Using CNN with PyTorch This comprehensive guide demonstrates how to classify images from the CIFAR-10 dataset using Convolutional Neural Networks (CNNs) built with PyTorch. The project covers the entire machine learning pipeline from data loading to model deployment, including advanced techniques for improving performance. 🚀 Key Features Complete PyTorch implementation Data augmentation techniques Multiple CNN architectures Training visualization Model evaluation metrics Hyperparameter tuning Model saving/loading Deployment options 📊 Performance Baseline model: ~70% accuracy Improved mod...
Read more

Long-short-term-memory (LSTM) Word Prediction With PyTorch

LSTM Text Generation with PyTorch - Complete Guide LSTM Text Generation with PyTorch A comprehensive guide to building word-level language models with Long Short-Term Memory networks Introduction to LSTM Text Generation Long Short-Term Memory (LSTM) networks are a special kind of recurrent neural network (RNN) capable of learning long-term dependencies. They are particularly useful for sequence prediction problems like text generation, where the context from previous words is crucial for predicting the next word. Key Concepts Word-level modeling : Predicts the next word given previous words Embeddings : Dense vector representations of words ...
Read more