Learn the basics of Sass (SCSS) or syntactically awesome stylesheets. Sass is a language and complier the can make your CSS code more efficient and programmatic https://fireship.io/tags/css/

#css #webdev #100SecondsOfCode

🔗 Resources

Sass Docs https://sass-lang.com/documentation
CSS Top 10 Pro Tips https://youtu.be/Qhaz36TZG5Y
Bracket Pair Colorizer https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

 🤓 Install the quiz app

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

🔥 Watch more with Fireship PRO

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T05:52:59.425Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
b4e242db-febe-45f6-bee3-ee0c90001d82
ee0afdca35912d0d9ffe217df14977dae15c743d5354153d7fd883fcda2a1b7a
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Syntactically Awesome Stylesheets, or Sass, is a language that can extend your CSS with superpowers.
Modern UIs are extremely complex, and if you attempt to build one with plain CSS, you'll find yourself repeating yourself often.
Sass comes to the rescue by providing a compiler compiler that allows us to write style sheets in a completely different language.
Well, 2 different languages to be exact.
The original indented syntax that you find in dot Sass files removes the exotic salt of semi colons and curly braces.
Oh, sassy.
But the more popular version is the superset syntax that you find in SCSS files.
Here, you can write regular CSS, then extend it with additional bonus features as needed.
Sass has been around for nearly 15 years, and one of its original killer features was variables.
Use a dollar sign to name a variable, then reference it somewhere else in your code.
Now, if that value ever changes, you only have to update one line of code.
CSS They used its own native variables a few years ago, but the advantages don't stop there.
Killer feature number 2 is nesting.
In many cases, classes are used as name spaces, which means they're often duplicated over and over again.
We can avoid this duplication by nesting styles inside the parent.
By default, these classes will apply to descendant elements or they can be applied to a direct sibling by using the ampersand, which itself is a tool that tells Sass to combine the parent selector with the nested child selector.
Comp.
Now, one other issue with CSS is that you'll often find yourself including a similar group of styles on multiple classes.
Mixins allow you to encapsulate a group of styles, then apply those styles anywhere in your code using the include keyword.
Mixins can also take arguments to create a large number of similar classes programmatically, like a bunch of different colored buttons, for example.
In addition, Sass provides a whole suite of tools to help you write more programmatic code.
Use if or else in a mixin for conditional logic poor, create an array of values with a variable, then loop over them with each, and you might even extract all this logic into a reusable function.
Or, Sass might already have a built in function for you ready to go.
If you need to adjust a color, you can use the lighten or darken functions to adjust a color by a predictable value.
When you're finished building a beautiful UI, the compiler will take your code and convert it into valid CSS compressed that can run-in the browser.
This has been Sass in 100 seconds, but before you go here's one more bonus pro tip.
When working with nested code, It can sometimes be hard to figure out exactly which set of braces you're inside of.
And Versus Code enabled a bracket pair colorizer extension to give each set of braces their own unique color.
Make sure to hit The like button if you want to see more short videos like this.
Thanks for watching, and I will see you in the next one.

Speaker 0: Syntactically Awesome Stylesheets, or Sass, is a language that can extend your CSS with superpowers. Modern UIs are extremely complex, and if you attempt to build one with plain CSS, you'll find yourself repeating yourself often. Sass comes to the rescue by providing a compiler compiler that allows us to write style sheets in a completely different language. Well, 2 different languages to be exact. The original indented syntax that you find in dot Sass files removes the exotic salt of semi colons and curly braces.

Oh, sassy. But the more popular version is the superset syntax that you find in SCSS files. Here, you can write regular CSS, then extend it with additional bonus features as needed. Sass has been around for nearly 15 years, and one of its original killer features was variables. Use a dollar sign to name a variable, then reference it somewhere else in your code.

Now, if that value ever changes, you only have to update one line of code. CSS They used its own native variables a few years ago, but the advantages don't stop there. Killer feature number 2 is nesting. In many cases, classes are used as name spaces, which means they're often duplicated over and over again. We can avoid this duplication by nesting styles inside the parent.

By default, these classes will apply to descendant elements or they can be applied to a direct sibling by using the ampersand, which itself is a tool that tells Sass to combine the parent selector with the nested child selector. Comp. Now, one other issue with CSS is that you'll often find yourself including a similar group of styles on multiple classes. Mixins allow you to encapsulate a group of styles, then apply those styles anywhere in your code using the include keyword. Mixins can also take arguments to create a large number of similar classes programmatically, like a bunch of different colored buttons, for example.

In addition, Sass provides a whole suite of tools to help you write more programmatic code. Use if or else in a mixin for conditional logic poor, create an array of values with a variable, then loop over them with each, and you might even extract all this logic into a reusable function. Or, Sass might already have a built in function for you ready to go. If you need to adjust a color, you can use the lighten or darken functions to adjust a color by a predictable value. When you're finished building a beautiful UI, the compiler will take your code and convert it into valid CSS compressed that can run-in the browser.

This has been Sass in 100 seconds, but before you go here's one more bonus pro tip. When working with nested code, It can sometimes be hard to figure out exactly which set of braces you're inside of. And Versus Code enabled a bracket pair colorizer extension to give each set of braces their own unique color. Make sure to hit The like button if you want to see more short videos like this. Thanks for watching, and I will see you in the next one.
Syntactically Awesome Stylesheets, or Sass, is a language that can extend your CSS with superpowers. Modern UIs are extremely complex, and if you attempt to build one with plain CSS, you'll find yourself repeating yourself often.
Sass comes to the rescue by providing a compiler compiler that allows us to write style sheets in a completely different language. Well, 2 different languages to be exact. The original indented syntax that you find in dot Sass files removes the exotic salt of semi colons and curly braces.
languages
Oh, sassy. But the more popular version is the superset syntax that you find in SCSS files. Here, you can write regular CSS, then extend it with additional bonus features as needed. Sass has been around for nearly 15 years, and one of its original killer features was variables. Use a dollar sign to name a variable, then reference it somewhere else in your code. Now, if that value ever changes, you only have to update one line of code. CSS They used its own native variables a few years ago, but the advantages don't stop there. Killer feature number 2 is nesting. In many cases, classes are used as name spaces, which means they're often duplicated over and over again.
We can avoid this duplication by nesting styles inside the parent. By default, these classes will apply to descendant elements or they can be applied to a direct sibling by using the ampersand, which itself is a tool that tells Sass to combine the parent selector with the nested child selector.
parenting
Comp. Now, one other issue with CSS is that you'll often find yourself including a similar group of styles on multiple classes. Mixins allow you to encapsulate a group of styles, then apply those styles anywhere in your code using the include keyword. Mixins can also take arguments to create a large number of similar classes programmatically, like a bunch of different colored buttons, for example. In addition, Sass provides a whole suite of tools to help you write more programmatic code.
Use if or else in a mixin for conditional logic poor, create an array of values with a variable, then loop over them with each, and you might even extract all this logic into a reusable function. Or, Sass might already have a built in function for you ready to go.
logic
logical reasoning
If you need to adjust a color, you can use the lighten or darken functions to adjust a color by a predictable value.
When you're finished building a beautiful UI, the compiler will take your code and convert it into valid CSS compressed that can run-in the browser. This has been Sass in 100 seconds, but before you go here's one more bonus pro tip. When working with nested code, It can sometimes be hard to figure out exactly which set of braces you're inside of.
programming
And Versus Code enabled a bracket pair colorizer extension to give each set of braces their own unique color. Make sure to hit The like button if you want to see more short videos like this. Thanks for watching, and I will see you in the next one.
Syntactically Awesome Stylesheets, or Sass, is a language that can extend your CSS with superpowers. Modern UIs are extremely complex, and if you attempt to build one with plain CSS, you'll find yourself repeating yourself often. Sass comes to the rescue by providing a compiler compiler that allows us to write style sheets in a completely different language. Well, 2 different languages to be exact. The original indented syntax that you find in dot Sass files removes the exotic salt of semi colons and curly braces. Oh, sassy. But the more popular version is the superset syntax that you find in SCSS files. Here, you can write regular CSS, then extend it with additional bonus features as needed. Sass has been around for nearly 15 years, and one of its original killer features was variables. Use a dollar sign to name a variable, then reference it somewhere else in your code. Now, if that value ever changes, you only have to update one line of code. CSS They used its own native variables a few years ago, but the advantages don't stop there. Killer feature number 2 is nesting. In many cases, classes are used as name spaces, which means they're often duplicated over and over again. We can avoid this duplication by nesting styles inside the parent. By default, these classes will apply to descendant elements or they can be applied to a direct sibling by using the ampersand, which itself is a tool that tells Sass to combine the parent selector with the nested child selector. Comp. Now, one other issue with CSS is that you'll often find yourself including a similar group of styles on multiple classes. Mixins allow you to encapsulate a group of styles, then apply those styles anywhere in your code using the include keyword. Mixins can also take arguments to create a large number of similar classes programmatically, like a bunch of different colored buttons, for example. In addition, Sass provides a whole suite of tools to help you write more programmatic code. Use if or else in a mixin for conditional logic poor, create an array of values with a variable, then loop over them with each, and you might even extract all this logic into a reusable function. Or, Sass might already have a built in function for you ready to go. If you need to adjust a color, you can use the lighten or darken functions to adjust a color by a predictable value. When you're finished building a beautiful UI, the compiler will take your code and convert it into valid CSS compressed that can run-in the browser. This has been Sass in 100 seconds, but before you go here's one more bonus pro tip. When working with nested code, It can sometimes be hard to figure out exactly which set of braces you're inside of. And Versus Code enabled a bracket pair colorizer extension to give each set of braces their own unique color. Make sure to hit The like button if you want to see more short videos like this. Thanks for watching, and I will see you in the next one.
Syntactically
syntactically
Awesome
awesome
Stylesheets,
stylesheets
or
or
Sass,
sass
is
is
a
a
language
language
that
that
can
can
extend
extend
your
your
CSS
css
with
with
superpowers.
superpowers
Modern
modern
UIs
uis
are
are
extremely
extremely
complex,
complex
and
and
if
if
you
you
attempt
attempt
to
to
build
build
one
one
with
with
plain
plain
CSS,
css
you'll
you'll
find
find
yourself
yourself
repeating
repeating
yourself
yourself
often.
often
Sass
sass
comes
comes
to
to
the
the
rescue
rescue
by
by
providing
providing
a
a
compiler
compiler
compiler
compiler
that
that
allows
allows
us
us
to
to
write
write
style
style
sheets
sheets
in
in
a
a
completely
completely
different
different
language.
language
Well,
well
2
2
different
different
languages
languages
to
to
be
be
exact.
exact
The
the
original
original
indented
indented
syntax
syntax
that
that
you
you
find
find
in
in
dot
dot
Sass
sass
files
files
removes
removes
the
the
exotic
exotic
salt
salt
of
of
semi
semi
colons
colons
and
and
curly
curly
braces.
braces
Oh,
oh
sassy.
sassy
But
but
the
the
more
more
popular
popular
version
version
is
is
the
the
superset
superset
syntax
syntax
that
that
you
you
find
find
in
in
SCSS
scss
files.
files
Here,
here
you
you
can
can
write
write
regular
regular
CSS,
css
then
then
extend
extend
it
it
with
with
additional
additional
bonus
bonus
features
features
as
as
needed.
needed
Sass
sass
has
has
been
been
around
around
for
for
nearly
nearly
15
15
years,
years
and
and
one
one
of
of
its
its
original
original
killer
killer
features
features
was
was
variables.
variables
Use
use
a
a
dollar
dollar
sign
sign
to
to
name
name
a
a
variable,
variable
then
then
reference
reference
it
it
somewhere
somewhere
else
else
in
in
your
your
code.
code
Now,
now
if
if
that
that
value
value
ever
ever
changes,
changes
you
you
only
only
have
have
to
to
update
update
one
one
line
line
of
of
code.
code
CSS
css
They
they
used
used
its
its
own
own
native
native
variables
variables
a
a
few
few
years
years
ago,
ago
but
but
the
the
advantages
advantages
don't
don't
stop
stop
there.
there
Killer
killer
feature
feature
number
number
2
2
is
is
nesting.
nesting
In
in
many
many
cases,
cases
classes
classes
are
are
used
used
as
as
name
name
spaces,
spaces
which
which
means
means
they're
they're
often
often
duplicated
duplicated
over
over
and
and
over
over
again.
again
We
we
can
can
avoid
avoid
this
this
duplication
duplication
by
by
nesting
nesting
styles
styles
inside
inside
the
the
parent.
parent
By
by
default,
default
these
these
classes
classes
will
will
apply
apply
to
to
descendant
descendant
elements
elements
or
or
they
they
can
can
be
be
applied
applied
to
to
a
a
direct
direct
sibling
sibling
by
by
using
using
the
the
ampersand,
ampersand
which
which
itself
itself
is
is
a
a
tool
tool
that
that
tells
tells
Sass
sass
to
to
combine
combine
the
the
parent
parent
selector
selector
with
with
the
the
nested
nested
child
child
selector.
selector
Comp.
comp
Now,
now
one
one
other
other
issue
issue
with
with
CSS
css
is
is
that
that
you'll
you'll
often
often
find
find
yourself
yourself
including
including
a
a
similar
similar
group
group
of
of
styles
styles
on
on
multiple
multiple
classes.
classes
Mixins
mixins
allow
allow
you
you
to
to
encapsulate
encapsulate
a
a
group
group
of
of
styles,
styles
then
then
apply
apply
those
those
styles
styles
anywhere
anywhere
in
in
your
your
code
code
using
using
the
the
include
include
keyword.
keyword
Mixins
mixins
can
can
also
also
take
take
arguments
arguments
to
to
create
create
a
a
large
large
number
number
of
of
similar
similar
classes
classes
programmatically,
programmatically
like
like
a
a
bunch
bunch
of
of
different
different
colored
colored
buttons,
buttons
for
for
example.
example
In
in
addition,
addition
Sass
sass
provides
provides
a
a
whole
whole
suite
suite
of
of
tools
tools
to
to
help
help
you
you
write
write
more
more
programmatic
programmatic
code.
code
Use
use
if
if
or
or
else
else
in
in
a
a
mixin
mixin
for
for
conditional
conditional
logic
logic
poor,
poor
create
create
an
an
array
array
of
of
values
values
with
with
a
a
variable,
variable
then
then
loop
loop
over
over
them
them
with
with
each,
each
and
and
you
you
might
might
even
even
extract
extract
all
all
this
this
logic
logic
into
into
a
a
reusable
reusable
function.
function
Or,
or
Sass
sass
might
might
already
already
have
have
a
a
built
built
in
in
function
function
for
for
you
you
ready
ready
to
to
go.
go
If
if
you
you
need
need
to
to
adjust
adjust
a
a
color,
color
you
you
can
can
use
use
the
the
lighten
lighten
or
or
darken
darken
functions
functions
to
to
adjust
adjust
a
a
color
color
by
by
a
a
predictable
predictable
value.
value
When
when
you're
you're
finished
finished
building
building
a
a
beautiful
beautiful
UI,
ui
the
the
compiler
compiler
will
will
take
take
your
your
code
code
and
and
convert
convert
it
it
into
into
valid
valid
CSS
css
compressed
compressed
that
that
can
can
run-in
run-in
the
the
browser.
browser
This
this
has
has
been
been
Sass
sass
in
in
100
100
seconds,
seconds
but
but
before
before
you
you
go
go
here's
here's
one
one
more
more
bonus
bonus
pro
pro
tip.
tip
When
when
working
working
with
with
nested
nested
code,
code
It
it
can
can
sometimes
sometimes
be
be
hard
hard
to
to
figure
figure
out
out
exactly
exactly
which
which
set
set
of
of
braces
braces
you're
you're
inside
inside
of.
of
And
and
Versus
versus
Code
code
enabled
enabled
a
a
bracket
bracket
pair
pair
colorizer
colorizer
extension
extension
to
to
give
give
each
each
set
set
of
of
braces
braces
their
their
own
own
unique
unique
color.
color
Make
make
sure
sure
to
to
hit
hit
The
the
like
like
button
button
if
if
you
you
want
want
to
to
see
see
more
more
short
short
videos
videos
like
like
this.
this
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
In this video, the speaker discusses the use of Sass in writing style sheets with a variety of different language. They explain that it is a powerful tool that allows for the development of new styles and features, and that it can be difficult to figure out which style is inside of a given region. The speaker also provides a tip for creating a bracket pair colorizer extension for style sets and thanks the audience for watching.
Sass in 100 Seconds
Syntactically Awesome Stylesheets, or Sass, is a language that can extend your CSS with superpowers. Modern UIs are extremely complex, and if you attempt to build one with plain CSS, you'll find yourself repeating yourself often. Sass comes to the rescue by providing a compiler compiler that allows us to write style sheets in a completely different language. Well, 2 different languages to be exact. The original indented syntax that you find in dot Sass files removes the exotic salt of semi colons and curly braces. Oh, sassy. But the more popular version is the superset syntax that you find in SCSS files. Here, you can write regular CSS, then extend it with additional bonus features as needed. Sass has been around for nearly 15 years, and one of its original killer features was variables. Use a dollar sign to name a variable, then reference it somewhere else in your code. Now, if that value ever changes, you only have to update one line of code. CSS They used its own native variables a few years ago, but the advantages don't stop there. Killer feature number 2 is nesting. In many cases, classes are used as name spaces, which means they're often duplicated over and over again. We can avoid this duplication by nesting styles inside the parent. By default, these classes will apply to descendant elements or they can be applied to a direct sibling by using the ampersand, which itself is a tool that tells Sass to combine the parent selector with the nested child selector. Comp. Now, one other issue with CSS is that you'll often find yourself including a similar group of styles on multiple classes. Mixins allow you to encapsulate a group of styles, then apply those styles anywhere in your code using the include keyword. Mixins can also take arguments to create a large number of similar classes programmatically, like a bunch of different colored buttons, for example. In addition, Sass provides a whole suite of tools to help you write more programmatic code. Use if or else in a mixin for conditional logic poor, create an array of values with a variable, then loop over them with each, and you might even extract all this logic into a reusable function. Or, Sass might already have a built in function for you ready to go. If you need to adjust a color, you can use the lighten or darken functions to adjust a color by a predictable value. When you're finished building a beautiful UI, the compiler will take your code and convert it into valid CSS compressed that can run-in the browser. This has been Sass in 100 seconds, but before you go here's one more bonus pro tip. When working with nested code, It can sometimes be hard to figure out exactly which set of braces you're inside of. And Versus Code enabled a bracket pair colorizer extension to give each set of braces their own unique color. Make sure to hit The like button if you want to see more short videos like this. Thanks for watching, and I will see you in the next one.
In this video, the speaker discusses the use of Sass in writing style sheets with a variety of different language. They explain that it is a powerful tool that allows for the development of new styles and features, and that it can be difficult to figure out which style is inside of a given region. The speaker also provides a tip for creating a bracket pair colorizer extension for style sets and thanks the audience for watching.