CSS에 날개를 달아주는 Sass (SCSS)
DEvSIGNER
스마트한 CSS의 작성! Sass (SCSS) Sass (Syntactically Awesome Style Sheets)
Basic
HTML/CSS, Sass
Create CSS utilities using SCSS
Learn 100% usable SCSS skills that you can use right away in practice. Your CSS will be much faster and more organized.
What you will learn!
Frequently used rules and values, built-in modules in SCSS
SCSS Debugging
Learn together by practicing with real-time code typing👯
This lecture explains things in easy terms so even beginners can understand!
Let's learn together through live coding 💪
Special features of this course ✨
[Easy to understand explanation]
I'll explain it in terms that even beginners can understand.
[Live Coding]
By typing the code in real time rather than using pre-prepared code ,
This is a hands-on lecture where students watch lecture videos and write code together .
I recommend this to these people 🙋♀️
For publishers, writing CSS styles takes up a large portion of your work!
🎓 Students' concerns
" I'm worried that I won't understand the lecture content since I've only written CSS."
🎓 How to solve students' concerns
If you know SCSS variables and basic grammar, it will help you understand quickly, but
Even if you only know CSS, you will have no trouble understanding the lecture.
In this lecture, we will look at and understand the built-in module features of SCSS that we need one by one.
Since it is applied to practice, just turn on the editor and follow along step by step ;)
Learn things like this 📚
🌿 Section 1. Setting learning goals
Before we begin our full-fledged learning, let's take a look at what the CSS utilities we'll be building in this lecture are and why they're needed, based on our experience in a real work environment.
🌿 Section 2. Let's learn about the core variables and functions of SCSS.
Learn about Map and List values that are frequently used in SCSS, and learn how to utilize these values in actual code using each statements through coding.
🌿 Section 3. Let's create a CSS utility generator
By utilizing the variables and functions of SCSS that we learned earlier, we will create a generator that automatically creates CSS utilities without having to write them one by one.
Changes in students after attending the lecture 📜
*You can create CSS utilities using SCSS.
*You can utilize various functions provided by SCSS.
Expected Questions Q&A 💬
Q. How are classes conducted?
1. Learn about the built-in features and rules of SCSS required to create CSS utilities.
2. Apply the rules and functions of SCSS you learned above to actual code to make sure you understand the concepts.
3. Using what we learned above, let’s create a final CSS utility class.
Q. Is there anything I need to prepare before attending the lecture?
All you need is the VSCode editor and an internet connection.
Q. Why should I take this course?
A big part of a publisher's job is probably writing style.
Writing each and every piece of commonly used CSS can be a very simple and tedious task, repetitive.
Can't we make these repetitive tasks more efficient?
SCSS is a great CSS preprocessor that suits our needs!
Are you using SCSS simply for its syntactic convenience?
If so, you're not even using SCSS halfway.
If you can make good use of the features provided by SCSS, you can organize your CSS more automatically and systematically.
Experience the power of SCSS through this lecture and give wings to your CSS!
Introducing the knowledge sharer ✒️
Park Ga-hyeon_Inpix/Front-end Development Group Manager
7 years of publishing experience
Recommended for
these people
Who is this course right for?
If you want to write CSS styles efficiently
If you are writing styles with SCSS but feel you are not using it properly
Need to know before starting?
JavaScript Basics
Curriculum
All
15 lectures ∙ (2hr 4min)
Published:
Last updated:
Reviews
All
1 reviews
Limited time deal
$82,500.00
25%
$84.70
Similar courses
Explore other courses in the same field!
![[코드캠프] 강력한 CSSCourse Thumbnail](https://cdn.inflearn.com/public/courses/329921/cover/325131ea-9c57-427e-98b9-4e207a1dff98/thumbnail-css.png?f=avif&w=420)
![[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드Course Thumbnail](https://cdn.inflearn.com/public/courses/324878/course_cover/12211037-e74b-46b3-8942-46d465b81bba/webdesign-cover-02.png?f=avif&w=420)
![부트스트랩을 활용한 반응형 웹제작 [실전편] 부트캠프Course Thumbnail](https://cdn.inflearn.com/public/courses/333141/cover/2e0b10d5-7e3c-4dd9-ace8-b3374cb55007/333141.jpg?f=avif&w=420)
![웹디자인개발기능사 [2025년] 실기전체 (카톡질문가능)Course Thumbnail](https://cdn.inflearn.com/public/courses/332868/cover/3a2245ca-bb9f-414a-ba67-403cfcb2b7c9/332868.jpg?f=avif&w=420)
![모던 웹 인터렉티브 CSS3 [PART2/3]Course Thumbnail](https://cdn.inflearn.com/public/courses/335745/cover/db39333d-68a5-4ca7-9629-dac891711a94/335745.jpg?f=avif&w=420)
![[환상의족발] 디자인부터 코딩까지Course Thumbnail](https://cdn.inflearn.com/public/courses/332845/cover/5d0ef569-50e5-4300-96ed-3205d526795b/332845.png?f=avif&w=420)
