SCSS (Sass) Basics. Flex vs Grid Layout
Пример того, как не надо делать https://www.w3schools.com/css/css_website_layout.asp Grid Layout https://www.w3schools.com/css/css_grid.asp https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Grid_Layout Flex Layout https://www.w3schools.com/css/css3_flexbox_responsive.asp Иконки https://www.w3schools.com/cssref/pr_grid-auto-flow.asp https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap Карточки https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox white_check_mark Документация и учебные материалы по scss https://sass-lang.com/guide https://www.w3schools.com/sass/default.php
Video Chapters
- 0:05 Kicking off the project: Grid or Flexbox?
- 0:45 Why use a CSS Preprocessor like Sass?
- 2:40 Your First SCSS File: Writing & Compiling
- 5:38 Structuring the HTML for our Animal Cards
- 8:10 Supercharge your CSS with Variables
- 9:48 Cleaner Code with Nested Selectors
- 12:30 Centering elements perfectly with Flexbox
- 14:00 Reusable Styles with the Mixin Feature
- 16:20 The Big Difference: @extend vs @include
Original Output
0:05 Kicking off the project: Grid or Flexbox? 0:45 Why use a CSS Preprocessor like Sass? 2:40 Your First SCSS File: Writing & Compiling 5:38 Structuring the HTML for our Animal Cards 8:10 Supercharge your CSS with Variables 9:48 Cleaner Code with Nested Selectors 12:30 Centering elements perfectly with Flexbox 14:00 Reusable Styles with the Mixin Feature 16:20 The Big Difference: @extend vs @include Timestamps by StampBot 🤖 (295-scss-sass-basics-flex-vs-grid-layout)
Unprocessed Timestamp Content
0:05 Introducing the shelter project and comparing grid vs flexbox layouts 0:45 What are CSS preprocessors and why should you use them 1:36 Setting up your code editor with the Live Sass Compiler 2:40 Creating and compiling your first SCSS file into standard CSS 3:30 Linking the compiled CSS file to your HTML document correctly 5:38 Building the basic HTML structure for our animal card project 8:10 How to use variables in SCSS to make styles reusable 9:48 A look at nesting selectors for cleaner and organized code 12:30 Using flexbox to perfectly center the card elements vertically 14:00 Creating reusable style blocks of code using the mixin feature 15:00 How preprocessors automatically handle browser compatibility with vendor prefixes 16:20 Understanding the key difference between using @extend and @include Timestamps by StampBot 🤖 (295-scss-sass-basics-flex-vs-grid-layout)