IT & Software Exam > IT & Software Videos > Introduction to Software as a Service (SaaS): Beginners Guide > Sass Tutorials #8 - Using Lists and @each
Sass Tutorials #8 - Using Lists and @each Video Lecture | Introduction to Software as a Service (SaaS): Beginners Guide - IT & Software
FAQs on Sass Tutorials #8 - Using Lists and @each Video Lecture - Introduction to Software as a Service (SaaS): Beginners Guide - IT & Software
| 1. What is Sass? |  |
Ans. Sass, short for Syntactically Awesome Stylesheets, is a preprocessor scripting language that is used to enhance the functionality of CSS. It allows for the use of variables, nested rules, mixins, and functions, making it easier to write and manage CSS code.
| 2. What are lists in Sass? | |
Ans. Lists in Sass are a data type that allows you to group multiple values together. They are similar to arrays in other programming languages and can contain any type of data, such as numbers, strings, or other lists. Lists can be accessed, manipulated, and iterated over using Sass functions and operations.
| 3. How can I use lists in Sass? | |
Ans. To use lists in Sass, you can define a list by separating values with commas and enclosing them within parentheses. For example, `(1, 2, 3)` is a list with three values. You can then access individual values using the `nth()` function, manipulate them using list functions like `append()` or `join()`, and iterate over them using the `@each` directive.
| 4. What is the `@each` directive in Sass? | |
Ans. The `@each` directive in Sass allows you to iterate over a list and perform a set of operations for each item in the list. It is commonly used to generate repetitive CSS code or apply styles to multiple elements with different values. The `@each` directive takes the form `@each $variable in <list>` and can be used within a CSS rule or a mixin.
| 5. Can I use Sass lists to create custom functions? | |
Ans. Yes, Sass lists can be used to create custom functions by leveraging the power of the `@each` directive and list manipulation functions. You can define a custom function that takes a list as an argument, iterates over its values using `@each`, performs calculations or operations, and returns a modified or new list. This allows you to create reusable and modular code in Sass.
Text Transcript from Video
hey what's up this is Scott with level
up Tut's
and today I'm going to get started in
our SAS advanced series and this I'm
pretty much picking up right where we
left off with the basics however we're
going to get into some really
interesting features of SAS in this
series all sorts of really cool things
some stuff that you might not think of
some stuff that you probably already
thought of but today we're going to be
talking about a really cool use of lists
so what SAS allows you to do is SAS
allows for the use of lists and a
declared list it's sort of just like
declaring a variable you know you do
your dollar sign and then your list name
so we're going to what we're going to do
today the end result is we're going to
take these social links here and we are
going to with only a couple lines assess
output all of their background images
generated from a list so the only thing
we really have different is we have in
our HTML document we just have an
unordered list of social links it's
clearing and each of our anchor tags has
a class of whatever that icon is going
to be in our images folder we just have
four icons they're both they're all 65
by 65 pixels you know pretty basic so to
get going
first we're going to declare our list
and what our list I guess is going to be
is going to be icons so we're going to
call it icons and it's going to be colon
and then in parentheses you're going to
add the items to your list so our list
is going to have the four different
social outputs so we're going to do
Twitter Facebook YouTube and RSS so as
we can see as saving net Sassa said
that's alright so no problem
all right so what we're going to be
doing is we're going to be basically
doing a we're going to be using a
command called each and we're going to
go through each item in the list and
output that item as the class name and
use that list item for the background
image as well
so to get it started actually I'm going
to add in our anchor tag right up here
I'm going to add a width of 65 pixels
and a height 65 pixels okay so that gets
it already for the icons okay so to do
the each statement we're going to do at
each and we're going to say for each of
this and this is a new variable you're
making here so show so we're just going
to call this for each social in the list
icons and then we're going to do a
bracket so to call each class we're
going to do dot for the class and next
we do pound bracket and then inside of
the brackets you do your variable so
dollar signs social so this is basically
going through the list of icons and
every single one it's assigning it to
social and then here it's outputting as
a class social and then inside of social
just like CSS we're going to declare the
properties of this class so here we're
going to do just background and this is
going to be the same as normal just like
you would normally do quotes and then in
here again to call your list item we do
pound bracket dollar sign social bracket
and then because this is just pulling in
the name Facebook our icon is Facebook
or Twitter or whatever dot PNG and then
outside of here we're going to do just a
no-repeat Pete alright so this should be
good
and so you can see SAS gave us no errors
I'm going to go and refresh our page and
as you can see our icons all showed up
let's do a text indent all right with
the refresh you can see all of our icons
showed up this is really great because
um it's going through this list if you
ever had more more icons you know still
having to write a bunch of more lines of
CSS you could just edit you know comma
whatever your other one is here in in
your CSS or in your SAS and it takes no
time let's actually take a look at the
CSS to see what it's outputting because
it is pretty cool scroll down here and
so yeah it's pretty much doing this work
for us
Twitter background is Twitter PNG
Facebook PNG whatever perfect just how
you would write it quote so that's it
for a the first lesson in the SAS
advanced working with lists to do this
each statement as always if you have any
questions feel free to let us know leave
a comment send us an email just hit us
up anyway you can feel free to subscribe
we're going to be doing lots more videos
with some really cool stuff coming up
thanks for watching
up Tut's
and today I'm going to get started in
our SAS advanced series and this I'm
pretty much picking up right where we
left off with the basics however we're
going to get into some really
interesting features of SAS in this
series all sorts of really cool things
some stuff that you might not think of
some stuff that you probably already
thought of but today we're going to be
talking about a really cool use of lists
so what SAS allows you to do is SAS
allows for the use of lists and a
declared list it's sort of just like
declaring a variable you know you do
your dollar sign and then your list name
so we're going to what we're going to do
today the end result is we're going to
take these social links here and we are
going to with only a couple lines assess
output all of their background images
generated from a list so the only thing
we really have different is we have in
our HTML document we just have an
unordered list of social links it's
clearing and each of our anchor tags has
a class of whatever that icon is going
to be in our images folder we just have
four icons they're both they're all 65
by 65 pixels you know pretty basic so to
get going
first we're going to declare our list
and what our list I guess is going to be
is going to be icons so we're going to
call it icons and it's going to be colon
and then in parentheses you're going to
add the items to your list so our list
is going to have the four different
social outputs so we're going to do
Twitter Facebook YouTube and RSS so as
we can see as saving net Sassa said
that's alright so no problem
all right so what we're going to be
doing is we're going to be basically
doing a we're going to be using a
command called each and we're going to
go through each item in the list and
output that item as the class name and
use that list item for the background
image as well
so to get it started actually I'm going
to add in our anchor tag right up here
I'm going to add a width of 65 pixels
and a height 65 pixels okay so that gets
it already for the icons okay so to do
the each statement we're going to do at
each and we're going to say for each of
this and this is a new variable you're
making here so show so we're just going
to call this for each social in the list
icons and then we're going to do a
bracket so to call each class we're
going to do dot for the class and next
we do pound bracket and then inside of
the brackets you do your variable so
dollar signs social so this is basically
going through the list of icons and
every single one it's assigning it to
social and then here it's outputting as
a class social and then inside of social
just like CSS we're going to declare the
properties of this class so here we're
going to do just background and this is
going to be the same as normal just like
you would normally do quotes and then in
here again to call your list item we do
pound bracket dollar sign social bracket
and then because this is just pulling in
the name Facebook our icon is Facebook
or Twitter or whatever dot PNG and then
outside of here we're going to do just a
no-repeat Pete alright so this should be
good
and so you can see SAS gave us no errors
I'm going to go and refresh our page and
as you can see our icons all showed up
let's do a text indent all right with
the refresh you can see all of our icons
showed up this is really great because
um it's going through this list if you
ever had more more icons you know still
having to write a bunch of more lines of
CSS you could just edit you know comma
whatever your other one is here in in
your CSS or in your SAS and it takes no
time let's actually take a look at the
CSS to see what it's outputting because
it is pretty cool scroll down here and
so yeah it's pretty much doing this work
for us
Twitter background is Twitter PNG
Facebook PNG whatever perfect just how
you would write it quote so that's it
for a the first lesson in the SAS
advanced working with lists to do this
each statement as always if you have any
questions feel free to let us know leave
a comment send us an email just hit us
up anyway you can feel free to subscribe
we're going to be doing lots more videos
with some really cool stuff coming up
thanks for watching
About this Video
4.94/5
Rating
Sep 23, 2025
Last updated
Related Exams
Video Description: Sass Tutorials #8 - Using Lists and @each for IT & Software 2025 is part of Introduction to Software as a Service (SaaS): Beginners Guide preparation.
The notes and questions for Sass Tutorials #8 - Using Lists and @each have been prepared according to the IT & Software exam syllabus.
Information about Sass Tutorials #8 - Using Lists and @each covers all important topics for IT & Software 2025 Exam.
Find important definitions, questions, notes, meanings, examples, exercises and tests below for Sass Tutorials #8 - Using Lists and @each.
Introduction of Sass Tutorials #8 - Using Lists and @each in English is available as part of our Introduction to Software as a Service (SaaS): Beginners Guide for IT & Software & Sass Tutorials #8 - Using Lists and @each in
Hindi for Introduction to Software as a Service (SaaS): Beginners Guide course. Download more important topics related with notes, lectures and mock test series for
IT & Software Exam by signing up for free.
Description
Video Lecture & Questions for Sass Tutorials #8 - Using Lists and @each Video Lecture | Introduction to Software as a Service (SaaS): Beginners Guide - IT & Software - IT & Software full syllabus preparation | Free video for IT & Software exam to prepare for Introduction to Software as a Service (SaaS): Beginners Guide.
Information about Sass Tutorials #8 - Using Lists and @each
Here you can find the meaning of Sass Tutorials #8 - Using Lists and @each defined & explained in the simplest way possible.
Besides explaining types of Sass Tutorials #8 - Using Lists and @each theory, EduRev gives you an ample number of questions to practice Sass Tutorials #8 - Using Lists and @each tests,
examples and also practice IT & Software tests.
Related Searches
Objective type Questions
,Sass Tutorials #8 - Using Lists and @each Video Lecture | Introduction to Software as a Service (SaaS): Beginners Guide - IT & Software
,Summary
,shortcuts and tricks
,practice quizzes
,ppt
,mock tests for examination
,Extra Questions
,Semester Notes
,video lectures
,MCQs
,past year papers
,study material
,Viva Questions
,Exam
,Sass Tutorials #8 - Using Lists and @each Video Lecture | Introduction to Software as a Service (SaaS): Beginners Guide - IT & Software
,Free
,Previous Year Questions with Solutions
,Important questions
,Sample Paper
,Sass Tutorials #8 - Using Lists and @each Video Lecture | Introduction to Software as a Service (SaaS): Beginners Guide - IT & Software
;
Study Sass Tutorials #8 - Using Lists and @each on the App
Students of IT & Software can study Sass Tutorials #8 - Using Lists and @each alongwith tests & analysis from the EduRev app,
which will help them while preparing for their exam. Apart from the Sass Tutorials #8 - Using Lists and @each,
students can also utilize the EduRev App for other study materials such as previous year question papers, syllabus, important questions, etc.
The EduRev App will make your learning easier as you can access it from anywhere you want.
The content of Sass Tutorials #8 - Using Lists and @each is prepared as per the latest IT & Software syllabus.
|
© EduRev
|
Education Revolution
|
|
Signup on EduRev and stay on top of your study goals
10M+ students crushing their study goals daily