Sass Fundamentals

Sass Fundamentals

Год выпуска: 2017
Производитель: frontendmasters
производителя: frontendmasters/courses/sass/
Автор: Mike North
Продолжительность: 6:38:55
Тип раздаваемого материала: Видеоурок
Язык: Английский
Описание: Leverage the Sass preprocessing to empower your CSS practices and master styling complex applications. Mike will show you how styles can be modularized and reused - avoiding repetition and redundancy while keeping everything readable and maintainable.

Содержание
Sass Fundamentals

0:00:00 - 0:00:57
Introduction
Mike North introduces his Sass Fundamentals course: Sass is a scripting language that is interpreted into Cascading Style Sheets (CSS).
- drive.google/file/d/0B7LIdu29tPZRVmJVeXpvOHhaUW8/view

0:00:58 - 0:05:37
CSS Pitfalls
Reviewing the problems with developing CSS, Mike illustrates the need for a styling scripting language.

0:05:38 - 0:09:59
Preprocesser Benefits
From keeping styles organized and variables, Mike discusses the benefits of using a preprocessor like Sass. A preprocessor is a program that processes its input data to produce output that is used as input to another program.

0:10:00 - 0:13:18
Course Agenda
Mike reviews the agenda for the course including Sass origins, variables, control flow, CSS architecture with BEM, and Sass functions.
Sass Basics

0:13:19 - 0:24:58
Syntax, Nesting, & Selectors
Mike introduces basics of Sass that includes syntax, nesting, and powerful Sass selectors. Mike also takes a question from a student.

0:24:59 - 0:31:53
Challenge 1: Parental Selectors
In this challenge, students write Sass rules that need to be fixed to pass tests. Then Mike takes a question from a student.

0:31:54 - 0:42:13
Challenge 1: Solution
Mike walks through the solution to Challenge 1 and takes questions from students.

0:42:14 - 0:46:32
Challenge 2: Parental Selectors 2
In this challenge, students write Sass rules that allow for two-column switching.

0:46:33 - 1:02:59
Challenge 2: Solution
Mike walks through the solution to Challenge 2 and takes questions from students.
Sass Variables

1:03:00 - 3:18:39
Sass @import and Variables
CSS's @import allows for splitting CSS into smaller, more maintainable portions; however, there is a cost of a separate HTTP request for @import. Sass's @import directive takes those different files and combines them into one file. Also, Sass’s import can include Partials, which are files denoted with a “_” before the file name and contain little snippets of CSS that you can add in other Sass files. Partials are not generated into CSS as-is like like other Sass files.

3:18:40 - 3:19:42
Challenge 3: Imports and Variables
In this challenge, students import a partial with Sass and fix styles with Sass rules.

3:19:43 - 3:29:32
Challenge 3: Solution
Mike walks through the solution to Challenge 3 and takes questions from students.
Sass Mixins

3:29:33 - 3:33:28
Sass Mixins and Arguments
Mike demonstrates using Sass mixins and using arguments with mixins. Sass mixins are groups of CSS declarations to reuse throughout your site's style sheet.

3:33:29 - 3:48:29
Challenge 4: Mixins
In this challenge, students import a partial with Sass and fix styles with Sass rules.

3:48:30 - 3:52:48
Challenge 4: Solution
Mike walks through the solution to Challenge 4 and takes questions from students.

3:52:49 - 3:59:38
Default Argument Values
Passing arguments through mixins, Mike demonstrates how to extend the power of writing CSS rules with Sass.

3:59:39 - 4:01:31
Challenge 5: Mixins 2
In this challenge, students using mixins with arguments to create a cross-browser range inputs
- css-tricks/styling-cross-browser-compatible-range-inputs-css/

4:01:32 - 4:16:57
Challenge 5: Solutions
Mike walks through the solution to Challenge 5.
Sass Functions

4:16:58 - 4:22:52
Introducing Sass Functions
Mike demonstrates some of the predefined functions available in Sass, specifically the color functions.
- //sass-lang/documentation/Sass/Script/Functions.html

4:22:53 - 4:59:07
Challenge 6: Color Functions
In this challenge, students create color themes when styling HTML buttons.

4:59:08 - 5:13:41
Challenge 6: Solutions
Mike walks through the solution to Challenge 6 and takes questions from students.
Control Flow

5:13:42 - 5:15:54
@if Sass Directive
Mike shows that @if directive takes an expression and uses the styles nested beneath it only if the expression returns anything other than false or null.

5:15:55 - 5:17:30
Challenge 7: Control Flow
In this challenge, students use a conditional in their mixin: setting the text color to white for buttons only if the brightness value of the background color is less than 70%.

5:17:31 - 5:21:25
Challenge 7: Solution
Mike walks through the solution to Challenge 7.
Data Structures

5:21:26 - 5:27:14
Data Structures
Reviewing data structures in Sass, Mike demonstrates common programming techniques like loops, lists, each, in Sass.

5:27:15 - 5:29:06
Challenge 8: Nudging Classes
In this challenge, students use @for, @each, and data structures to create CSS rules for moving elements in five-pixel increments.

5:29:07 - 5:47:20
Challenge 8: Solution
Mike walks through the solution to Challenge 8 and takes questions from students.
CSS Architecture

5:47:21 - 5:54:52
BEM Introduction
In discussing CSS architecture, Mike reviews and codes in the Block, Element, Modifier methodology (BEM), which is a naming convention for classes in HTML and CSS.

5:54:53 - 5:56:02
Challenge 9: BEM Buttons
In this challenge, students create CSS rules for buttons in the BEM naming convention.

5:56:03 - 6:06:21
Challenge 9: Solution
Mike walks through the solution to Challenge 9 and takes questions from students.

6:06:22 - 6:13:46
Reusing Style with Mixins
To help keep Sass writing DRY (Don't Repeat Yourself), which is the coding practicing the reducing repetition of information of all kinds, Mike reviews @extend in Sass that allows for sharing of CSS properties from one selector to another.

6:13:47 - 6:15:08
Challenge 10: @extend
In this challenge, students use @extend to modify the visual presentation of buttons.

6:15:09 - 6:21:16
Challenge 10: Solution
Mike walks through the solution to Challenge 10 and takes questions from students.
Working with Sass Functions

6:21:17 - 6:23:48
Writing Sass Functions
Mike demonstrates writing functions in Sass.

6:23:49 - 6:27:25
Challenge 11: Relative Luminance in Sass
In this challenge, students write a Sass function to check a color scheme's legibility by comparing the luminance of the colors.

6:27:26 - 6:37:40
Challenge 11: Solution
Mike walks through the solution to Challenge 11 and takes questions from students.
- css-tricks/snippets/sass/power-function/
Wrapping Up Sass Fundamentals

6:37:41 - 6:38:55
Wrapping Up
Mike answer a question and concludes the course by thanking the students.

Файлы примеров: присутствуют
Формат видео: MP4
Видео: H264, 1920x1090, 16:9, 25 fps, avg 820 kb/s
Аудио: AAC, 48kHz, 201kbps, stereo
Доп. информация: RUS:Лично скачано. Если нужны уроки с данного ресурка пишите в ЛС.