คืนค่าการตั้งค่าทั้งหมด
คุณแน่ใจว่าต้องการคืนค่าการตั้งค่าทั้งหมด ?
ลำดับตอนที่ #4 : Sass Ⅰ - Sass Fundamentals
Nesting
What
is Sass?
Sass
is a language that allows you to write CSS in a more convenient and efficient
way. There are 2 ways to write Sass, SASS syntax and SCSS syntax. At Progate, we use SCSS syntax,
which is the more common syntax. Note that the file extension is . scss rather than .css .
Why
Sass?
Some of the benefits of using Sass are shown
below. In this lesson, you will learn about these benefits in detail and how to
take advantage of them.
Nested
Structures
First, let's look at the nesting structure that is used very often in
Sass. With nesting, you can rewrite your CSS as shown in the example below. In
this way, Sass allows you to nest selectors in other selectors. So, with Sass,
you don't have to write the
same selector many times.
Benefits
of Nesting
The larger a site becomes, the more useful nesting
becomes. It's especially useful when making changes to class names. If you
wanted to change the class name of the header in the example below, you would
need to make changes in 3 places with normal CSS, but with Sass you only need
to make one change.
The
& Symbol
Review
of :hover
Before learning about the &
symbol, let's review :hover and
:active. The state in
which the cursor is hovering over an element is called hover. In CSS, with selector:
hover, you can apply specific CSS when the cursor is over an element.
Review
of :active
By using active with a selector, CSS can be applied only while an
element is being clicked. This can be done with the syntax: selector: active.
The
& Symbol
With nesting, you can rewrite selector: hover as &:
hover, as shown below. Remember that &
can be used in this way with any selector - hover, active, etc.
Applying
CSS to Specific Elements
When you want to apply CSS to only the second
Referencing
Specific Elements
In the previous page, you learned to reference
specific elements easily with the &
symbol in Sass. With normal CSS, you have to write the same element name
repeatedly, but in Sass you can just write it once, so it's simple and easy to
apply different CSS code to specific elements.
Variables
Next, we will learn about variables in Sass. A variable is like a box that
holds a value. The figure below illustrates how variables work. They are
especially useful in cases when the same value needs to be used many times.
We'll learn about them in more detail in later slides.
Defining
Variables
To use variables, you first need to define them. Variables are
defined with the syntax: $variable-name: value; as
shown below. You can think of it like saying "put the value on the right into
the variable on the left", this is called assignment.
How
to Use Variables
Using variables is easy. Just write the variable
name (i.e. $progate-color) as shown below.
By writing the variable name in the place you want to use it, the value (#26546a) stored in the variable will be
automatically be inserted. This makes it possible to reference the same value
from difference places, making it easy to change.
Placement
of Variable Definitions
Note that a variable must be defined before the line where it is used.
Since the style sheet (CSS) is read from the top down, if you define a variable
after the line where you want to use it, an error will occur because it will be
interpreted as an undefined variable.
Variable
Scope
You can also specify the range in which variables
can be used. This range is called scope. Even if you want to use a variable after defining it,
you can't if it's outside of its scope. This is why we will first define
variables in the outermost part of the nested structure.
mixins
What
are mixins?
Now we'll look at mixins, which is a very powerful feature of
Sass. A mixin is a function that allows you to combine multiple lines of code
and easily re-use it. This removes the need to write the same code over and
over and reduces duplicate code.
Defining
mixins
To use a mixin you need to define it first. The
syntax for defining a mixin is @mixin mixin-name
{code} as shown in the example below.
Calling
mixins
Next, let's see how to use a mixin after it has
been defined. You can use mixins in a Sass file with the syntax @include mixin-name. When you use @include, the code from the mixin will be loaded
into that area. After the mixin is called, the code in the two examples will be
the same.
mixins
with Arguments
Information like color values can be passed to
mixins as arguments.
Arguments can be used to make your code more dynamic and are commonly used in
programming. By passing color values and other data as arguments to a mixin,
they can be used within the mixin.
Passing
Data to mixins
After adding arguments to a mixin, you can use @include to pass values. In the example on the
right, the value passed with include (#ff0000)
is assigned to $color in the mixin. You can
use different values to for each @include,
making your code more flexible.
Functions
Functions are more or less universal in
programming. You can use them in Sass to do things like "make a color %50
brighter" for example.
Common
Useful Functions
Various functions are available in Sass. As a
start, it's useful to remember some very common functions. Functions are
commonly used to manipulate colors as shown below. There are many functions for
the purpose of modifying colors. Let's learn these first.
import
Let's learn how to loads external files with import. In order to allow a file to be imported,
adding an _ to the beginning of the file
name is required. Also, the general syntax for loading a file is filename as shown in the example on the
right.
Abbreviating
Filenames
Note that when importing a file, you can leave out
the _ and the file extension (.scss) as in the example on the right.
Common
Ways of Using import
A popular way of using import is to create a file
with many variable definitions and load it with .
This method makes it easier to refer to and keep track of variables and is used
in the development of many professional websites.
ความคิดเห็น