Sass — это расширение языка CSS3, оно может помочь вам писать лучшие таблицы стилей с меньшими трудностями, освободить вас от повторяющейся работы и сделать вашу работу более творческой. Поскольку вы можете быстрее принять изменения, вы также решитесь на инновации в дизайне. Вы пишете таблицы стилей, которые могут обрабатывать изменение цветов или тегов HTML, и компилируете стандартный код CSS для различных производственных сред. Синтаксис Sass относительно прост, но сложность заключается в том, как применить Sass к реальным проектам, чтобы решить болевые точки CSS, тем самым повысив нашу эффективность. После изучения реальных проектов, следующие 14 практических опытов обобщаются и делятся ими, надеясь помочь каждому расширить свое мышление и лучше применять Sass к реальным проектам. В проекте мы используем поддержку традиционного CSS-подобного синтаксиса — Scss, поэтому в следующем обзоре опыта проекта в качестве примера используется Scss.
1. Использование переменной $
Мы можем повторно использовать значения атрибутов через переменные, такие как цвет, размер границы, путь к изображению и т. д., чтобы мы могли изменить одно место, чтобы внести глобальные изменения, чтобы добиться функции «скининга».
Пример 1: Наша библиотека компонентов использует переменную конфигурацию для равномерного изменения цвета, размера шрифта и т. д. компонентов (скиннинг):
$color-primary: #3ecacb;
$color-success: #4fc48d;
$color-warning: #f3d93f;
$color-danger: #f6588e;
$color-info: #27c6fa;Пример 2. Конфигурация образа и глобальный импорт
Использование изображений в Scss может иметь следующие две проблемы:
(1) Если файл стиля и файл vue, использующий файл стиля, не находятся в одном каталоге, изображение не будет найдено.
(2) Если переменная конфигурации пути к изображению написана в стиле vue-файла, но такое написание приводит к разделению образа и стиля
Мы можем записать путь к изображению в качестве файла конфигурации, а затем импортировать его по всему миру, так что путь изображения может быть изменен равномерно (и этот метод будет загружен только при использовании соответствующего изображения, и не приведет к дополнительным проблемам производительности):
$common-path: './primary/assets/img/';
$icon-see: $common-path+'icon-see.png';
$icon-play: $common-path+'icon-play.png';
$icon-comment: $common-path+'icon-comment.png';
$icon-checkbox: $common-path+'icon-checkbox.png';2, @ Импорт файла Импорт SCSS
(1) Правило @import в Css, которое позволяет импортировать другие файлы css в один файл css. Однако следствием этого является то, что браузер будет загружать другие файлы css только при выполнении @import, что приводит к очень медленной загрузке страницы.
(2) Правило @import в Scss, разница в том, что правило @import в scss импортирует соответствующие файлы при создании файла css. Это означает, что все связанные стили группируются в один и тот же файл css без инициирования дополнительного запроса на загрузку.
Пример 1. Импортируйте файл стиля компонента в index.sccs единообразно в библиотеке компонентов., а затем, если в проекте есть место, где библиотека компонентов используется, вам нужно только импортировать файл index.scss при входе в проект и импортировать файлы стилей каждого компонента в файл index.scss как следует:
@import "./base.scss";
@import "./webupload.scss";
@import "./message-hint.scss";3. Использование локального именования файлов
Имя частичного файла scss начинается с подчеркивания. Таким образом, scss не будет компилировать этот файл отдельно для вывода css во время компиляции, а будет использовать этот файл только как импорт. При использовании scss миксины микшера являются наиболее подходящим вариантом использования, потому что микшеру не нужно отдельно компилировать выходные файлы css.
Пример 1: Запишите имя микшера как локальный метод именования файлов, как показано на следующем рисунке.
4. Вложенные функции Scss и идентификаторы родительского селектора
Мы можем использовать вложенные функции и идентификатор родительского селектора, чтобы уменьшить повторяющийся код, особенно если вы используете соглашение об именах БЭМ для классов CSS, именование классов стилей имеет проблемы с многословием. Использование этой функции позволяет решить проблему длинного БЭМ-именования, а стиль становится более читабельным.
Пример 1: Вложенные функции и идентификаторы родительского селектора и решение многословия БЭМ:
.tea-assignhw {
&__top {
margin: 0;
}
&__content {
padding-left: 45px;
}
&__gradeselect {
width: 158px;
}
}
Пример 2:Использование дочерних селекторов, родственных селекторов и селекторов псевдоклассов во вложенности
(1) Подселектор
&__hint {
margin: 20px;
font-size: 14px;
> p:first-child {
font-weight: bold;
}
}(2) Выбор брата
&__input {
width: 220px;
& + span {
margin-left: 10px;
}
}(3) Селектор псевдокласса
&__browse {
background: url($btn-search) no-repeat;
&:hover {
background: url($btn-search) -80px 0 no-repeat;
}
&:visited {
background: url($btn-search) -160px 0 no-repeat;
}
}5. Использование директив @mixin и @extend
Переменные позволяют повторно использовать значения свойств, но что, если вы хотите повторно использовать часть правил? Традиционный подход заключается в том, что если в таблице стилей
Если будут обнаружены дубликаты, общие правила будут извлечены и помещены в новые классы CSS.
Директивы наследования микшера @mixin и @extend можно использовать в Scss для решения упомянутого выше сценария повторного использования большого блока правил. Но в чем разница между двумя сценариями использования?
(1) Основное преимущество @mixin в том, что он может принимать параметры. Если вы хотите передать параметры, вы, естественно, выберете @mixin вместо @extend, потому что @extend не может принимать параметры.
(2) Поскольку правила микшера смешаны с другими классами, невозможно полностью избежать повторения в выходной таблице стилей. Наследование селекторов означает, что селектор может повторно использовать все стили другого селектора, но не выводить повторно эти атрибуты стиля; то есть используйте @extend для генерацииDRY CSSСтилизованный код (не повторяйтесь)
Подводя итог, если вам нужно передать параметры, вы можете использовать только микшер @mixin, в противном случае лучше использовать наследование @extend.
Пример 1: Использование микшера @mixin
@mixin paneactive($image, $level, $vertical) {
background: url($image) no-repeat $level $vertical;
height: 100px;
width: 30px;
position: relative;
top: 50%;
}
&--left-active {
@include paneactive($btn-flip, 0, 0);
}
&--right-active {
@include paneactive($btn-flip, 0, -105px);
}Пример 2: Использование наследования @extend
.common-mod {
height: 250px;
width: 50%;
background-color: #fff;
text-align: center;
}
&-mod {
@extend .common-mod;
float: right;
}
&-mod2 {
@extend .common-mod;
}6. Использование значений параметров по умолчанию для микшеров @mixin
Нет необходимости передавать все параметры при @include микшере, мы можем указать значение по умолчанию для параметра, если передаваемый параметр является значением по умолчанию, то параметр можно опустить при @include; если параметр должен быть передано не значение по умолчанию, новые параметры передаются при использовании @include.
Пример 1: Использование значений параметров микшера @mixin по умолчанию
@mixin pane($dir: left) {
width: 35px;
display: block;
float: $dir;
background-color: #f1f1f1;
}
&__paneleft {
@include pane;
}
&__paneright {
@include pane(right);
}7. Использование интерполяции #{}
Переменные можно использовать в селекторах или именах свойств с помощью оператора интерполяции #{}. Когда есть две страницы с похожими стилями, мы будем извлекать похожие стили в микшеры страниц, но имена двух разных стилей страниц не могут быть одинаковыми в соответствии с соглашением об именах БЭМ, в этом случае мы можем использовать интерполяцию для динамического именования.
Пример 1. Имя класса в микшере уровня страницы задается динамически с использованием интерполяции #{}
@mixin home-content($class) {
.#{$class} {
position: relative;
background-color: #fff;
overflow-x: hidden;
overflow-y: hidden;
&--left {
margin-left: 160px;
}
&--noleft {
margin-left: 0;
}
}
}8. Использование операций
SassScript поддерживает такие операции, как сложение, вычитание, умножение и деление чисел (+, -, *, /, %).
Пример 1: Компонент ввода устанавливает левое и правое заполнение в соответствии с высотой поля ввода следующим образом:
.ps-input {
display: block;
&__inner {
-webkit-appearance: none;
padding-left: #{$--input-height + 10
};
padding-right: #{$--input-height + 10
};
}
}9. Применение связанных функций scss
scss поставляется с некоторыми функциями, такими как hsl, функция микширования и т. д.
Пример 1: Цвет щелчка компонента кнопки должен смешивать несколько цветов вместе в соответствии с определенным соотношением для создания другого цвета.Следующим образом:
&:focus {
color: mix($--color-white, $--color-primary, $--button-hover-tint-percent);
border-color: transparent;
background-color: transparent;}
&:active {
color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
border-color: transparent; background-color: transparent;
}10. Применение связанных функций scss
Инструкция @for может повторять шаблон вывода в ограниченном диапазоне и каждый раз изменять результат вывода в соответствии со значением переменной.
Пример 1: Например, в проекте вам нужно установить стиль дочерних узлов div со 2-го по 8-й в классе hwicon.,Следующим образом:
@for $i from 2 through 8 {
.com-hwicon {
> div:nth-child(#{$i}) {
position: relative;
float: right;
}
}
}11, каждый обход, тип данных карты, микшер @mixin/@include, комбинированное использование интерполяции #{}
Различные классы селекторов могут быть созданы путем объединения каждого обхода, типа данных карты, микшера @mixin/@include, интерполяции #{}, а фоновое изображение в каждом классе селектора отличается, как показано ниже:
$img-list: (
(accessimg, $papers-access),
(folderimg, $papers-folder),
(bmpimg, $papers-bmp),
(xlsimg, $papers-excel),
(xlsximg, $papers-excel),
(gifimg, $papers-gif),
(jpgimg, $papers-jpg),
(unknownimg, $papers-unknown)
);
@each $label, $value in $img-list {
.com-hwicon__#{$label} {
@include commonImg($value);
}
}12. Проверка и проверка кода стиля — плагин stylelint
CSS нельзя рассматривать как язык программирования в строгом смысле этого слова, но нельзя недооценивать его в интерфейсной системе. CSS — это таблица стилей, основанная на описании.Если описание запутанно и не содержит правил, оно должно быть бомбой замедленного действия для других разработчиков, особенно для людей с обсессивно-компульсивным расстройством. CSS может показаться простым, но написать красивый CSS довольно сложно. Поэтому действия по проверке правил CSS неизбежны. stylelint — это мощная современная программа проверки CSS, которая позволяет разработчикам следовать согласованным соглашениям и избегать ошибок в таблицах стилей.
(1) Вам необходимо установить gulp, stylelint, gulp-postscss, postcss-reporter, stylelint-config-standard,Команда установки:
npm install gulp stylelint gulp-postscss postcss-reporter
stylelint-config-standard--save-dev(2) После завершения установки в корневом каталоге проекта будет создан файл gulpfile.js.Файл gulpfile.js настроен как:
var reporter = require('postcss-reporter');
var stylelint = require('stylelint');
var stylelintConfig = {
'extends': 'stylelint-config-standard',
'rules': {
'at-rule-no-unknown': [
true, {
'ignoreAtRules': [
'extend',
'include',
'mixin',
'for'
]
}
]
}
};
gulp.task('scss-lint', function() {
var processors = [
stylelint(stylelintConfig),
reporter({
clearMessages: true,
throwError: true
})
];
return gulp.src(
['src/style/*.scss']// 需要工具检查的scss文件
).pipe(postcss(processors));});
gulp.task('default', ['scss-lint']);(3) правила проверки stylelint-config-standard
stylelint-config-standard — стандартное правило проверки, официально рекомендованное stylelint. Конкретные правила проверки можно найти на официальном сайте.
(4) Запустите команду для проверки стиля,Как показано ниже
13. Плагин автоматического восстановления стилей - плагин stylefmt
stylefmt — это инструмент для исправления кода, основанный на stylelint.Его можно настроить на основе соглашений спецификации кода stylelint, а форматированный вывод можно изменить.
(1) Файл конфигурации gulp.js выглядит следующим образом:
var stylefmt = require('gulp-stylefmt'); // css格式自动调整工具
gulp.task('stylefmt', function() {
return gulp.src(
['src/style/student/index.scss' // 需要工具检查的scss文件
]).pipe(stylefmt(stylelintConfig))
.pipe(gulp.dest('src/style/dest/student'));});
gulp.task('fix', ['stylefmt']);(2) Запустите команду для восстановления стиля, как показано на следующем рисунке.
14. Скомпилируйте синтаксис scss в синтаксис css — плагин gulp-sass
При написании кода scss в первый раз из-за незнания синтаксиса и т. д. эффект страницы, получаемый написанным кодом scss, не тот, что нам нужен. В настоящее время мы можем использовать плагин gulp-sass для мониторинга кода scss и генерации кода css в режиме реального времени, чтобы мы могли судить о правильности написанного кода scss, просматривая код css.
(1) Файл конфигурации gulp.js выглядит следующим образом:
var gulpsass = require('gulp-sass');
gulp.task('gulpsass', function() {
return gulp.src('src/style/components/hwIcon.scss')
.pipe(gulpsass().on('error', gulpsass.logError))
.pipe(gulp.dest('src/style/dest'));});
gulp.task('watch', function() {
gulp.watch('src/style/components/hwIcon.scss', ['gulpsass']);
});(2) Запустите команду для мониторинга файла scss и динамически скомпилируйте код scss для создания файла кода css, как показано на следующем рисунке.
Вышеизложенное является кратким изложением реального боевого опыта 14 SCSS. Я надеюсь, что это может быть для вас ссылкой. Если это вас вдохновляет, пожалуйста, поставьте лайк и поддержите его. Если у вас есть какие-либо вопросы или предложения, пожалуйста, оставьте сообщение для обсуждения.