От автора: организация – большой шаг в любом проекте, особенно если вы подняли проект через 6 месяцев. В Sass есть два синтаксиса. Первый – SCSS (Sassy CSS) является расширенным синтаксисом CSS. То есть любой валидный CSS файл можно считать валидным SCSS файлом. Кроме того, SCSS понимает большую часть CSS хаков и вендорные префиксы, а также старый синтаксис фильтров для IE. Этот синтаксис усиливается возможностями Sass, о которых я расскажу ниже. Файлы с этим синтаксисом имеют расширение .scss.
Создаем несколько файлов
Для лучшей организации мы разделим наш код на несколько папок/файлов. Обычно я создаю папку css, а в ней папку asset. В папке asset я создаю дополнительные папки css, icons, images и js.
Создадим первый и главный файл app.scss. В этом файле будет храниться импорт всех компонентов и других файлов .scss. Пока что оставим его пустым. Готово? Перейдем к созданию папок.
Helpers
Components
Layouts
Pages
Помощники
В папке helpers будут храниться наши функции, миксины и переменные. Пример:
|
1 2 3 4 |
── helpers ├── _functions.scss ├── _mixins.button.scss └── _parameters.scss |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
/*** Функции ***/ /** * Задаем цвет текста по цвету фона * source: //thesassway.com/intermediate/dynamically-change-text-color-based-on-its-background-with-sass * @param {String} $background - background color - format accepted: hsla, rgb, # * @return {String} #color */ @function set-text-color($background) { @if (lightness($background) > 50) { @return #000; // Если фон светлый, возвращаем темный цвет } @else { @return #fff; // Если фон темный, возвращаем светлый цвет } } /*** Button mixins ***/ /** * Generate button style * @param {String} - $name - required * @param {String} - $background - required - format accepted: hsla, rgb, # * @param {Strong} - $color - optionnal - format accepted: hsla, rgb, # * If no $color specify, the 'set-text-color' function is called * go check the _function.scss */ @mixin generate-button($name, $background, $color: '') { .button-#{$name} { background: $background; @if ($color == '') { color: set-text-color($background); } @else { color: $color; } &:hover { background: lighten($background, 10%); } } } /*** Параметры ***/ // Цвета $color-primary: #666; $color-secondary: #888; $color-light: #e0e0e0; $color-lightest: #efefef; $color-brand: #239bf6; // Цвета брендов $color-facebook: #3b5998; $color-feedly: #2bb24c; $color-github: #333; $color-google: #dc4e41; $color-instagram: #3f729b; $color-linkedin: #0077b5; $color-medium: #00ab6b; $color-messenger: #0084ff; $color-rss: #f26522; $color-spotify: #2ebd59; $color-twitter: #55acee; // Рамки $border-light: solid 1px rgba(0, 0, 0, .05); // Размер шрифта $font-size-biggest: 2.8rem; $font-size-largest: 2.3rem; $font-size-large: 1.2rem; $font-size-base: 1rem; $font-size-small: .9rem; $font-size-smallest: .75rem; // Отступы $spacing-small: .75rem; $spacing-single: 1rem; $spacing-double: 2rem; $spacing-triple: 3rem; $spacing-big: 6rem; // Media queries $desktop: 800px; $tablet: 600px; $mobile: 480px; // Шрифты $sans-serif: 'Roboto', sans-serif; $serif: 'Playfair Display', serif; // Анимация $anime-in: .4s; $anime-out: .5s; |
Компоненты
В папке components будут храниться все модули, которыми мы будем пользоваться в коде. Пример:
|
1 2 3 4 5 6 7 8 |
── components ├── _buttons.scss ├── _cards.scss ├── _comments.scss ├── _footer.scss ├── _header.scss ├── _navigation.scss └── _pagination.scss |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/*** Компоненты кнопки ***/ .button { border: solid 1px $color-light; border-radius: 3px; display: inline-block; font-weight: 300; height: 40px; line-height: 40px; padding: 0 10px; text-decoration: none; transition-duration: .4s; transition-property: color border; } @generate-button('primary', $color-primary); |
Страницы
В папке pages будут храниться все стили определенной страницы. Пример:
|
1 2 3 4 5 6 7 8 |
── pages ├── _about.scss ├── _blog.scss ├── _post.scss ├── _projects.scss ├── _reading.scss ├── _tag.scss └── _works.scss |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/*** Страница проекта ***/ .section-projects { padding-top: 100px; } .project-item { padding: 40px 0; } .project-item-header { margin-bottom: 40px; text-align: center; } |
Макеты
В папке layouts хранятся разные макеты и правила по адаптивности. Пример:
|
1 2 |
── layout └── _responsive.scss |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/*** Адаптивность ***/ @media screen and (max-width: $tablet) { .post-cover { width: 100%; } } @media screen and (max-width: $mobile) { .nav-desktop { display: none; } .nav-toggle { display: block; } } |
Один файл, чтоб править всеми
Теперь можно перейти к созданию файла app.scss в корневой папке. В этом файле хранится импорт всех других файлов.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
/* Portfolio Style - Version: 1.2.3 - Author: @ostrenaud_clem */ // Помощники @import 'helpers/parameters'; @import 'helpers/functions'; @import 'helpers/mixins.button'; // Компоненты @import 'components/buttons'; @import 'components/cards'; @import 'components/comments'; @import 'components/footer'; @import 'components/header'; @import 'components/navigation'; @import 'components/pagination'; // Страницы @import 'pages/about'; @import 'pages/blog'; @import 'pages/post'; @import 'pages/reading'; @import 'pages/tag'; @import 'pages/works'; // Макет @import 'layout/responsive'; |
Компилируем наши .scss файлы
Для компиляции Scss кода в понятный язык CSS необходим специальный инструмент. Можно использовать Gulp, Grunt или обычные NPM скрипты.
Gulp
Сперва необходимо установить кое-что: gulp и gulp-sass.
|
1 |
$ npm install gulp gulp-sass --save-dev |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function () { return gulp.src('./assets/css/**/*.scss') .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('./dist/css')); }); gulp.task('sass:watch', function () { gulp.watch('./assets/css/**/*.scss', ['sass']); }); |
Grunt
Для этого таск раннера используем grunt-sass.
|
1 |
$ npm install grunt grunt-sass --save-dev |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
grunt.initConfig({ sass: { options: { sourceMap: true }, dist: { files: { './dist/app.css': './assets/css/app.scss' } } } }); grunt.loadNpmTasks('grunt-sass'); grunt.registerTask('default', ['sass']); |
NPM скрипты
И Gulp и Grunt задачи используют модуль node-sass. Мы можем использовать его напрямую в файле package.json.
|
1 2 |
$ npm install node-sass --save-dev "build:css": "node-sass assets/css/ /dist/css/ -r" |
Спасибо, что прочитали мою статью. Если вы знаете, как лучше организовать код, пишите об этом в комментариях.
Автор: Osternaud Clement
Источник: //medium.com/
Редакция: Команда webformyself.
