История самообучения JL № 13
Серия [История самообучения JL]
[Net Ninja] JS Regular Expressions [Net Ninja] Vue JS2 (Part1, Part2, Part3) [Net Ninja] Vuex [Net Ninja] Python3 (Part1, Part2, Part3) [Net Ninja] Django (Part1, Part2, Part3) [Net Ninja] Sass (Part1, Part2(current)) [Sean Larkin] Webpack4 (Part1, Part2, Part3, Part4)
🌲 Это последняя часть моего резюме Sass Tutorial by Net Ninja на YouTube.
6) Importing Files 7) Pseudo Elements & Classes 8) Mathematical Operators 9) Creating a Grid w/ Sass Math 10) Color Functions 11) The @Content Keyword 12) If Statements
6) Импорт файлов (YouTube)
Раньше я сохранял код scss в двух файлах: styles.csss и mixins.scss.
fall 2018 (project name)
- src
|-- components
|-- 1sn
|-- webpage.vue
|-- mainPage.vue
|-- scss
|-- 1sn
|-- mixins.scss
|-- reset.scss
|-- styles.scss
|-- variables.scss
Net Ninja разделил код scss на 4 категории: примеси, сброс, стили и переменные.
[#1 веб-страница.vue]
<style scoped lang="scss"> @import "src/scss/1sn/variables.scss"; @import "src/scss/1sn/reset.scss"; @import "src/scss/1sn/mixins.scss"; @import "src/scss/1sn/styles.scss"; </style>
Порядок важен. Сначала идет первый импортированный файл.
Поскольку Net Ninja не импортировал никаких переменных в reset.scss, он поместил файл «reset» перед файлом «variable». Но я использовал переменную в reset.scss. Итак, я поместил файл «variable» перед файлом «reset».
[ # 2 переменные.scss ]
$deepBlue: #032f3e; $sectionHeading: 24px; $offWhite: #f8f9fb; $bannerHeading: 46px;
[#3 reset.scss]
body {
background: $offWhite;
}
html, body, ul, ol, li, form, fieldset, legend {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
}
fieldset, img {
border: 0;
}
li {
list-style: none;
}
.wrapper {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
› Базовая настройка, которую я скопировал со страницы Net Ninja Sass Tutorial GitHub, прежде чем начать следовать его руководству.
[#4 mixins.scss]
@mixin banner{
width: 100%;
position: relative;
color: white;
.banner-content{
position: absolute;
top: 50px;
width: 100%;
}
img{
width: 100%;
}
span{
font-size: $bannerHeading;
display: block;
text-transform: uppercase;
font-weight: bold;
}
span.title{
font-weight: normal;
margin-bottom: 10px;
}
span.sub-title{
font-weight: normal;
margin-bottom: 30px;
}
}
› Mixins: набор многократно используемых свойств
[ # 5 стилей.scss ]
#main-nav{
background: $deepBlue;
ul{
width: 100%;
}
li{
float: left;
width: 14%;
}
a{
color: $offWhite;
text-decoration: none;
padding: 16px;
display: block;
text-align: center;
}
}
#main-nav ul::after{
content: '';
display: block;
clear: both;
}
section h1{
font-size: $sectionHeading;
color: $deepBlue;
}
.lead-banner{
@include banner;
text-align: right;
}
.lessons-banner{
@include banner;
li{
text-transform: uppercase;
font-size: 20px;
max-width: 700px;
margin: 20px 0;
}
}
Мой репозиторий GitHub можно найти по адресу https://github.com/hlim18/JLbootcamp. Нажмите Ветвь — class-01-ch-06.
7) Псевдоэлементы и классы (YouTube)
В CSS3 использование двух точек с запятой стало стандартом для различения псевдоэлементови псевдоклассы (Alligator.io).
- Псевдокласс CSS — это ключевое слово, добавляемое в конец селектора, которому предшествует двоеточие (
:), которое используется для указания того, что вы хотите стилизовать выбранный элемент, но только когда он находится в определенное состояние. - Псевдоэлементы очень похожи на псевдоклассы, но имеют отличия. Это ключевые слова, которым на этот раз предшествуют два двоеточия (
::), которые можно добавить в конец селекторов для выбора определенной части элемента» (MDN).
[ #1 Псевдокласс «:hover» ]
Чтобы придать эффект наведения в меню навигации в CSS, мы используем следующий код:
#main-nav a:hover{
background: palevioletred
}
В SCSS нам нужно включить «&» перед «:» и код должен быть вложенным.
#main-nav{
a{
&:hover{
background: palevioletred
}
}
}
Если вы хотите создать эффект плавного наложения на изображение при наведении курсора, проверьте это.
[ #2-1 Псевдоэлемент «::after» ]
В главе 4. Вложенные стили мы использовали технику clearfix, которая заставляет элемент самоочищаться от своих дочерних элементов, чтобы отображать панель навигации с помощью после псевдоэлемента. .
#main-nav ul::after{
content: '';
display: block;
clear: both;
}
Попробуем другой метод. Мы можем вложить код внутрь тега «ul».
ul{
&:after{
content: '';
display: block;
clear: both;
}
}
[#2–1 Псевдоэлемент «::after» в качестве примеси]
Что, если мы захотим повторно использовать псевдоэлемент «после» несколько раз? Мы можем легко сделать это, сделав элемент миксином.
[src > scss > 1sn > styles.scss]
#main-nav{
ul{
width: 100%;
@include clearFix;
}
}
-----------------------------------
[src > scss > 1sn > mixins.scss]
@mixin clearFix{
&::after{
content: '';
display: block;
clear: both;
}
}
Мой репозиторий GitHub можно найти по адресу https://github.com/hlim18/JLbootcamp. Нажмите Ветвь — class-01-ch-07.
8) Математические операторы (YouTube)
В настоящее время ширина панели навигации составляет 14%.
[src > scss > 1sn > styles.scss]
#main-nav{
li{
float: left;
width: 14%;
}
}
Чтобы использовать всю ширину панели навигации, мы можем разделить полную ширину на номер тега «a».
[src > scss > 1sn > styles.scss]
#main-nav{
li{
float: left;
width: (100% / 6);
}
}
На данный момент раздел «услуги» выглядит следующим образом:
Давайте стилизуем этот раздел.
[src > scss > 1sn > styles.scss]
#services{
margin: 15px 0 30px 0;
h1{
font-size: 2em;
}
li{
float: left;
box-sizing: border-box;
text-align: center;
width: (100% / 3);
}
img{
width: 60%;
margin: 10px 20%;
}
a{
text-decoration: none;
color: $deepBlue;
font-weight: bold;
&:hover{
color: red;
}
}
ul{
@include clearFix;
}
}
Мой репозиторий GitHub можно найти по адресу https://github.com/hlim18/JLbootcamp. Нажмите Ветвь — class-01-ch-08.
9) Создание сетки с помощью Sass Math (YouTube)
Прежде всего, создайте миксин.
[src > scss > 1sn > mixins.scss]
@mixin grid($columns, $margin){
float: left;
margin-right: $margin;
margin-bottom: $margin;
width: ((100% - (($columns - 1) * $margin)) / $columns);
&:nth-child(#{$columns}n){
margin-right: 0;
}
}
- «
margin-right» и «margin-bottom» разделяют столбцы. - «
width: ((100% — (($columns — 1) * $margin)) / $columns)» равномерно распределяет элементы по каждой строке - «
&:nth-child(#{$columns}n){ margin-right:0 }» назначает «margin-right:0» последнему дочернему элементу в каждой строке.
› Мы можем настроить миксин, передав различные аргументы в styles.scss.
[src > scss > 1sn > styles.scss]
#projects li{
@include grid(4, 2%);
img{
width: 100%;
}
}
[src > scss > 1sn > styles.scss]
#projects li{
@include grid(3, 2%);
img{
width: 100%;
}
}
Мой репозиторий GitHub можно найти по адресу https://github.com/hlim18/JLbootcamp. Нажмите Ветвь — class-01-ch-09.
10) Функции цвета (YouTube)
В Sass есть ряд функций для стилизации кода. Список можно найти здесь.
Давайте создадим эффект наведения на панели навигации, используя цвет светлее, чем темно-синий, который мы использовали вместо бледно-фиолетово-красного цвета.
Мы можем использовать функцию «облегчения». Он принимает два параметра: «цвет» и «количество».
[src > scss > 1sn > styles.scss]
#projects li{
a{
&:hover{
background: lighten($deepBlue, 50)
}
}
}
Изменения, внесенные в репозиторий JL Bootcamp в отношении этой главы, можно найти здесь.
11) Ключевое слово @Content (YouTube)
В настоящее время, когда мы сужаем окно, содержимое панели навигации сжимается и выглядит немного раздавленным.
Давайте наложим их друг на друга, когда размер окна в какой-то момент уменьшится.
[src > scss > 1sn > mixins.scss]
@mixin mediaQuery($arg){
@media screen and (max-width: $arg){
@content;
}
}
› «@content» позволяет нам определять примеси, когда мы их используем.
[src > scss > 1sn > styles.scss]
#main-nav{
li{
@include mediaQuery(600px){
width: 100%;
}
}
}
› Когда размер окна станет меньше 600 пикселей, каждый тег «li» будет иметь ширину 100%.
Изменения, внесенные в репозиторий JL Bootcamp в отношении этой главы, можно найти здесь.
12) Заявления если (YouTube)
Мы можем использовать операторы if в миксинах и запускать другой код в зависимости от количества аргументов.
[src > scss > 1sn > mixins.scss]
@mixin mediaQuery($arg...){
@if length($arg) == 1 {
@media screen and (max-width: nth($arg, 1)){
@content;
}
}
@if length($arg) == 2 {
@media screen and (max-width: nth($arg, 1)) and (min-width: nth($arg, 2)){
@content;
}
}
}
@mixin banner{
span{
@include mediaQuery(3000px, 1024px){
font-size: 5em;
color: black;
}
}
}
› При использовании «…» в аргументе: нам не нужно указывать количество аргументов для этого миксина.
[ # 1 Размер окна: меньше 1024 пикселей ]
[#2 Размер окна: 1024px ~ 3000px]
Мой репозиторий GitHub можно найти по адресу https://github.com/hlim18/JLbootcamp. Нажмите Ветвь — class-01-ch-12.
Если вы хотите прочитать предыдущую часть моего резюме Sass Tutorial от Net Ninja для проекта Vue.js, посетите здесь.
Спасибо за чтение! 💕 Если вам понравилась эта запись в блоге, похлопайте👏
Мой репозиторий GitHub можно найти по адресу https://github.com/hlim18/JLbootcamp. Нажмите Ветвь — class-01-ch-12.
