Організуйте ваші файли Sass

30

Від автора: організація – великий крок в будь-якому проекті, особливо якщо ви підняли проект через 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 будуть зберігатися наші функції, міксини і змінні. Приклад:

── helpers
├── _functions.scss
├── _mixins.button.scss
└── _parameters.scss
/*** Функції ***/
/**
* Задаємо колір тексту за кольором фону
* source: http://thesassway.com/intermediate/dynamically-change-text-color-based-on-its-background-with-sass
* @param {String} $background — background color — format accepted: # hsla-color 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-color hsla, rgb, #
* @param {Strong} — $color — optionnal — format accepted: # hsla-color 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.8 rem;
$font-size-largest: 2.3 rem;
$font-size-large: 1.2 rem;
$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 будуть зберігатися всі модулі, якими ми будемо користуватися в коді. Приклад:

── components
├── _buttons.scss
├── _cards.scss
├── _comments.scss
├── _footer.scss
├── _header.scss
├── _navigation.scss
└── _pagination.scss
/*** Компоненти кнопки ***/
.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: border color;
}
@generate-button(‘primary’, $color-primary);

Сторінки

У папці pages будуть зберігатися всі стилі певної сторінки. Приклад:

── pages
├── _about.scss
├── _blog.scss
├── _post.scss
├── _projects.scss
├── _reading.scss
├── _tag.scss
└── _works.scss
/*** Сторінка проекту ***/
.section-projects {
padding-top: 100px;
}
.project-item {
padding: 40px 0;
}
.project-item-header {
margin-bottom: 40px;
text-align: center;
}

Макети

У папці макети зберігаються різні макети і правила по адаптивності. Приклад:

── layout
└── _responsive.scss
/*** Адаптивність ***/
@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 в кореневій папці. У цьому файлі зберігається імпорт всіх інших файлів.

/* Style Portfolio
— Версія: 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.

$ npm install gulp gulp-sass —save-dev
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.

$ npm install grunt grunt-sass —save-dev
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.

$ npm install node-sass —save-dev
«build:css»: «node-sass assets/css/ /dist/css/ -r»

Спасибі, що прочитали мою статтю. Якщо ви знаєте, як краще організувати код, пишіть про це в коментарях.