IT & Software Exam > IT & Software Videos > Introduction to Software as a Service (SaaS): Beginners Guide > Sass Tutorials #2 - The Basics of Variables in Sass
Sass Tutorials #2 - The Basics of Variables in Sass Video Lecture | Introduction to Software as a Service (SaaS): Beginners Guide - IT & Software
FAQs on Sass Tutorials #2 - The Basics of Variables in Sass Video Lecture - Introduction to Software as a Service (SaaS): Beginners Guide - IT & Software
| 1. What are variables in Sass? |  |
Variables in Sass are used to store reusable values that can be used throughout the stylesheet. They are defined with a dollar sign ($) followed by the variable name, an equal sign (=), and the value. These variables can be updated later in the stylesheet, allowing for easy customization and maintenance.
| 2. How can I declare a variable in Sass? | |
To declare a variable in Sass, you need to use the dollar sign ($) followed by the variable name, an equal sign (=), and the value. For example, to declare a variable named "primary-color" with a value of "#FF0000", you would write: $primary-color: #FF0000;
| 3. How can I use variables in Sass? | |
To use variables in Sass, you simply need to reference the variable name wherever you want to use its value. For example, if you have a variable named "primary-color" with a value of "#FF0000", you can use it in your styles like this: color: $primary-color;
| 4. Can I update the value of a variable in Sass? | |
Yes, you can update the value of a variable in Sass. Once a variable is declared, you can simply assign a new value to it later in the stylesheet. This allows you to easily update the value of a variable and have it reflect throughout the entire stylesheet.
| 5. Are variables in Sass scoped? | |
Yes, variables in Sass are scoped. This means that a variable declared within a certain scope, such as inside a mixin or a nested rule, will only be accessible within that scope. Variables declared outside of any scope, at the top level of the stylesheet, are considered global variables and can be accessed from anywhere in the stylesheet.
Text Transcript from Video
hey what's up this is Scott with level
up Tut's and today I'm going to be
talking about sass variables and your
second sass tutorial variables are
really powerful because they allow you
to change the code very quickly and do
some computation with all sorts of stuff
to make your life a little bit easier so
what we're going to start out with this
is just a basic HTML document as you can
see has no Styles right now looks like
this the reason it has no Styles is
because I only have a style that s CSS
file and I haven't created the CSS file
which it's looking for yet as you can
see in my directory right here so we're
going to go to terminal to start sass
we're going to browse to our directory
so it's a desktop says CSS check to make
sure it's there okay so now we're going
to do sass - - watch style dot s CSS :
style dot CSS and what this is saying is
sass watch the file style that's s CSS
and then either update style dot CSS or
create it if it's not already created so
we're going to go ahead and hit enter
here and it's now created that uh CSS
file and if we refresh our page it
should have the stylings that I gave it
by default cool so as you can see I just
have some real basic you know heading
heading and then an anchor tag is all
the same color have a really faint
gradient going on the back here in just
a paragraph so what I'm going to show
you first is we're going to go over just
a very basic example using color and
variables so I'm going to uncomment out
this first one and so let's say you know
you have a let's say you have a client
in in they basically they like this
color but they would like to change it
and if you've given many different
things that color in your CSS
as you can imagine they get very large
then you'll have to go through and
change it for all of them what's great
about sass is that if you use variables
you can only change it once or you'll
change it once and I'll update
throughout your entire CSS document so
what I've done up here is that just done
dollar sign then your variable name
colon and then your variable itself in
this case I'm using you know the hex
color so you do have to put you know the
pound if this was just you know color
you could just write black in here or
whatever and then you're finished off
with semicolon so if we want to apply
this variable to all of our all of our
items that we want to give this color to
to call this we just have to say you do
color or whatever I mean you can do
background color whatever but since
we're changing the color here color and
then dollar sign blue so you blue okay
no brows nothing okay blue okay so now
if we were to save this document what it
would do is anytime that this word shows
up it's going to be using this color and
if we go ahead here and edit all the
places we save refresh you can see all
of them have updated now you know let's
say they wanted to change it back that
color after all that it'd be really nice
and easy you just have to grab that hex
code and then now all you have to do is
change your variable here paste it in
refresh and you can see it updated all
of them at once this is really powerful
it's really easy it takes no time at all
so next we're going to talk about
another application and so you can use
it for more than just colors you can use
it for pretty much any property of CSS
this comes in handy you can with margins
so what we've done here is that I have
the header as a margin on the right or
on the left of 5% paragraphs on the left
of right left and right 5% and then the
h2 tags have a margin of temper
left and right so we're going to go
ahead and do is we're going to declare a
variable called margin by uncommenting
this out you see dollar sign margin
colon 5% and then semicolon anytime that
we're using 5% we can say say margin I'm
just going to copy this and paste this
into the other places where I'm using 5%
looks like it's just the paragraph tag
where you're fresh and nothing should
have changed well let's say all of a
sudden we want this to be 25% for some
reason you would save it and it would be
25% so well let's say what if you want
this h2 to move in proportionally to
your changes that you're making here you
could say this is 25% but this is still
10% no matter what this one's not
changing if you want to you know you
could set up another variable that would
be margin - you know is equal to you
know whatever and then it would update I
you know whatever you want it to be or
you can do some neat tricks with sass
and have it do it for you so let's say
we want this to be 5% and we always want
this to be whatever
everything else is plus 5% so what you
could do here is you could do dollar
sign margin and you could do plus 5% and
what this is going to do is it's going
to add 5 percent to 5 percent giving you
at 10 percent left and right margin so
as you can see it's a little bit more
than before if we get rid of this back
to if we change this back to well this
is actually the same as before so now if
we make this 10 percent refresh this is
going to be a 15 percent margin and this
is going to be a 10 percent margin we
can inspect that to double check so you
can see it's calculated out 10 plus 5 15
percent so that's really useful if you
want to keep things proportionate or if
you just want to do some you know you
know steps to save you time so you don't
have to go back
change things later alright so something
else well let's put this back at 5%
first alright so another really cool
thing you can do with color is adding
and subtracting what I have here is this
really basic gradient it's just going
from this cream color to a white what
I've done up here is I have to click two
variables so if I uncomment these out
I've cream is equal to the cream color
we have before and then cream 2 is equal
to cream minus 100 and what this is
going to do is it's going to produce a
darker version of the cream that we
originally had and since we're using in
all these places instead of having to do
cream minus 100 every time here we can
just declare the second variable so I'm
going to go ahead and multi select all
of these cream and then cream 2 and so
if I did this correctly it should give
us a darker color here as you can see
it's now going from the cream to a
darker version of that cream and if we
want to look at our CSS file let's go to
that and I have that Satan here we pull
up that and all of our CSS is using the
normal hex values so let's say you do
all your work incest and then later you
need to make an edit and it's you know
quick on the fly or something you can
set it your normal CSS document like
usual and it's you know update fine so I
mean this takes your your s CSS file and
converts it completely into something
that you're used to with the normal CSS
file well that's the basics for
variables in the next tutorial we're
going to get talking to more about
nixon's and nesting and all sorts of
really cool stuff you can do with sass
alright this is a Scott with level up
tuts you know subscribe if you like if
you want to see more if you have any
questions let us know
Thanks
up Tut's and today I'm going to be
talking about sass variables and your
second sass tutorial variables are
really powerful because they allow you
to change the code very quickly and do
some computation with all sorts of stuff
to make your life a little bit easier so
what we're going to start out with this
is just a basic HTML document as you can
see has no Styles right now looks like
this the reason it has no Styles is
because I only have a style that s CSS
file and I haven't created the CSS file
which it's looking for yet as you can
see in my directory right here so we're
going to go to terminal to start sass
we're going to browse to our directory
so it's a desktop says CSS check to make
sure it's there okay so now we're going
to do sass - - watch style dot s CSS :
style dot CSS and what this is saying is
sass watch the file style that's s CSS
and then either update style dot CSS or
create it if it's not already created so
we're going to go ahead and hit enter
here and it's now created that uh CSS
file and if we refresh our page it
should have the stylings that I gave it
by default cool so as you can see I just
have some real basic you know heading
heading and then an anchor tag is all
the same color have a really faint
gradient going on the back here in just
a paragraph so what I'm going to show
you first is we're going to go over just
a very basic example using color and
variables so I'm going to uncomment out
this first one and so let's say you know
you have a let's say you have a client
in in they basically they like this
color but they would like to change it
and if you've given many different
things that color in your CSS
as you can imagine they get very large
then you'll have to go through and
change it for all of them what's great
about sass is that if you use variables
you can only change it once or you'll
change it once and I'll update
throughout your entire CSS document so
what I've done up here is that just done
dollar sign then your variable name
colon and then your variable itself in
this case I'm using you know the hex
color so you do have to put you know the
pound if this was just you know color
you could just write black in here or
whatever and then you're finished off
with semicolon so if we want to apply
this variable to all of our all of our
items that we want to give this color to
to call this we just have to say you do
color or whatever I mean you can do
background color whatever but since
we're changing the color here color and
then dollar sign blue so you blue okay
no brows nothing okay blue okay so now
if we were to save this document what it
would do is anytime that this word shows
up it's going to be using this color and
if we go ahead here and edit all the
places we save refresh you can see all
of them have updated now you know let's
say they wanted to change it back that
color after all that it'd be really nice
and easy you just have to grab that hex
code and then now all you have to do is
change your variable here paste it in
refresh and you can see it updated all
of them at once this is really powerful
it's really easy it takes no time at all
so next we're going to talk about
another application and so you can use
it for more than just colors you can use
it for pretty much any property of CSS
this comes in handy you can with margins
so what we've done here is that I have
the header as a margin on the right or
on the left of 5% paragraphs on the left
of right left and right 5% and then the
h2 tags have a margin of temper
left and right so we're going to go
ahead and do is we're going to declare a
variable called margin by uncommenting
this out you see dollar sign margin
colon 5% and then semicolon anytime that
we're using 5% we can say say margin I'm
just going to copy this and paste this
into the other places where I'm using 5%
looks like it's just the paragraph tag
where you're fresh and nothing should
have changed well let's say all of a
sudden we want this to be 25% for some
reason you would save it and it would be
25% so well let's say what if you want
this h2 to move in proportionally to
your changes that you're making here you
could say this is 25% but this is still
10% no matter what this one's not
changing if you want to you know you
could set up another variable that would
be margin - you know is equal to you
know whatever and then it would update I
you know whatever you want it to be or
you can do some neat tricks with sass
and have it do it for you so let's say
we want this to be 5% and we always want
this to be whatever
everything else is plus 5% so what you
could do here is you could do dollar
sign margin and you could do plus 5% and
what this is going to do is it's going
to add 5 percent to 5 percent giving you
at 10 percent left and right margin so
as you can see it's a little bit more
than before if we get rid of this back
to if we change this back to well this
is actually the same as before so now if
we make this 10 percent refresh this is
going to be a 15 percent margin and this
is going to be a 10 percent margin we
can inspect that to double check so you
can see it's calculated out 10 plus 5 15
percent so that's really useful if you
want to keep things proportionate or if
you just want to do some you know you
know steps to save you time so you don't
have to go back
change things later alright so something
else well let's put this back at 5%
first alright so another really cool
thing you can do with color is adding
and subtracting what I have here is this
really basic gradient it's just going
from this cream color to a white what
I've done up here is I have to click two
variables so if I uncomment these out
I've cream is equal to the cream color
we have before and then cream 2 is equal
to cream minus 100 and what this is
going to do is it's going to produce a
darker version of the cream that we
originally had and since we're using in
all these places instead of having to do
cream minus 100 every time here we can
just declare the second variable so I'm
going to go ahead and multi select all
of these cream and then cream 2 and so
if I did this correctly it should give
us a darker color here as you can see
it's now going from the cream to a
darker version of that cream and if we
want to look at our CSS file let's go to
that and I have that Satan here we pull
up that and all of our CSS is using the
normal hex values so let's say you do
all your work incest and then later you
need to make an edit and it's you know
quick on the fly or something you can
set it your normal CSS document like
usual and it's you know update fine so I
mean this takes your your s CSS file and
converts it completely into something
that you're used to with the normal CSS
file well that's the basics for
variables in the next tutorial we're
going to get talking to more about
nixon's and nesting and all sorts of
really cool stuff you can do with sass
alright this is a Scott with level up
tuts you know subscribe if you like if
you want to see more if you have any
questions let us know
Thanks
Related Exams
About this Video
|
4.62/5 Rating |
|
Dec 22, 2024 Last updated |
Video Description: Sass Tutorials #2 - The Basics of Variables in Sass for IT & Software 2024 is part of Introduction to Software as a Service (SaaS): Beginners Guide preparation.
The notes and questions for Sass Tutorials #2 - The Basics of Variables in Sass have been prepared according to the IT & Software exam syllabus.
Information about Sass Tutorials #2 - The Basics of Variables in Sass covers all important topics for IT & Software 2024 Exam.
Find important definitions, questions, notes, meanings, examples, exercises and tests below for Sass Tutorials #2 - The Basics of Variables in Sass.
Introduction of Sass Tutorials #2 - The Basics of Variables in Sass in English is available as part of our Introduction to Software as a Service (SaaS): Beginners Guide for IT & Software & Sass Tutorials #2 - The Basics of Variables in Sass 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 #2 - The Basics of Variables in Sass 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 #2 - The Basics of Variables in Sass
Here you can find the meaning of Sass Tutorials #2 - The Basics of Variables in Sass defined & explained in the simplest way possible.
Besides explaining types of Sass Tutorials #2 - The Basics of Variables in Sass theory, EduRev gives you an ample number of questions to practice Sass Tutorials #2 - The Basics of Variables in Sass tests,
examples and also practice IT & Software tests.
|
Explore Courses for IT & Software exam
|
|
Signup for Free!
Signup to see your scores go up within 7 days! Learn & Practice with 1000+ FREE Notes, Videos & Tests.
Related Searches
Sass Tutorials #2 - The Basics of Variables in Sass Video Lecture | Introduction to Software as a Service (SaaS): Beginners Guide - IT & Software
,Viva Questions
,practice quizzes
,Previous Year Questions with Solutions
,Objective type Questions
,Summary
,Free
,Sass Tutorials #2 - The Basics of Variables in Sass Video Lecture | Introduction to Software as a Service (SaaS): Beginners Guide - IT & Software
,Semester Notes
,Exam
,Extra Questions
,Sass Tutorials #2 - The Basics of Variables in Sass Video Lecture | Introduction to Software as a Service (SaaS): Beginners Guide - IT & Software
,MCQs
,past year papers
,study material
,Important questions
,ppt
,mock tests for examination
,video lectures
,shortcuts and tricks
,Sample Paper
;
Study Sass Tutorials #2 - The Basics of Variables in Sass on the App
Students of IT & Software can study Sass Tutorials #2 - The Basics of Variables in Sass alongwith tests & analysis from the EduRev app,
which will help them while preparing for their exam. Apart from the Sass Tutorials #2 - The Basics of Variables in Sass,
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 #2 - The Basics of Variables in Sass is prepared as per the latest IT & Software syllabus.
|
© EduRev
|
Education Revolution
|
|
Signup to see your scores
go up within 7 days!
Access 1000+ FREE Docs, Videos and Tests
Takes less than 10 seconds to signup