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

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

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

── 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: color border;
}
@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;
}

Макеты

В папке layouts хранятся разные макеты и правила по адаптивности. Пример:

── 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 в корневой папке. В этом файле хранится импорт всех других файлов.

/* 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.

$ 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"

Спасибо, что прочитали мою статью. Если вы знаете, как лучше организовать код, пишите об этом в комментариях.

Автор: Osternaud Clement

Источник: https://medium.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree