Примеры хорошего SCSS

[leshiple]

Здравствуйте, скачал макет, начал верстать. Для написания стилей использовал SCSS. Стал наводить порядок в SCSS и столкнулся с проблемой организации цветов и шрифтов.

Мои цвета:

 

Мои шрифты:

 

Цветов много, какова вероятность того что дизайнер при создании макета ошибся на пару тонов и такие цвета как #808080, #868585, #8b8b8b, #8d8c8c можно объеденить? Как лучше их организовать? Использовать функцию darken или математические вычисления или присваивать переменные grey_dark, grey_very_dark, grey_superdark?

 

Вариаций сочетананий шрифтов тоже много. Как их правильно организовать? В некоторых случаях размер, начертание и семейство совпадает, а line-height нет. Или отчилается размер. Как вы боритесь со шрифтами?

 

Где можно посмотреть примеры хорошего SCSS в проектах (не библиотеках)?

[kidrock]

Вставлю своё нубское мнение, если оно кому нибудь вообще интерсно :Р

 

Организовывать цвета в любом случае нужно так, как удобно вам, но что касается функций типа darken они, имхо, подходят только тогда, когда конкретное значение цвета неизвестно, а вам нужно всего навсего заховерить объект, например. ТО есть все известные явно цвета нужно выносить в переменные. Можно ли объединить - это интересный вопрос, во всяком случае можно попробовать, но в том случае если вы уверены, что ваш монитор хорошо откалиброван и все эти цвета действительно на глаз практически не различимы.

 

Шрифты, имхо, прописывать наиболее часто встречающиеся значения, остальные значения по факту дописывать.

[leshiple]

ТО есть все известные явно цвета нужно выносить в переменные. 

А как называть эти переменные? По какому принципу?

 

Можно ли объединить - это интересный вопрос, во всяком случае можно попробовать, но в том случае если вы уверены, что ваш монитор хорошо откалиброван и все эти цвета действительно на глаз практически не различимы.

Наверное вопрос относительный. У всех глаза разные. И решать скорее всего человеку создававшему дизайн.

 

Шрифты, имхо, прописывать наиболее часто встречающиеся значения, остальные значения по факту дописывать.

У меня 4 пары повторяющихся значений. И какие им(переменным) имена давать? По типу именования классов в БЭМ?

 

 

Где можно посмотреть примеры хорошего SCSS в проектах (не библиотеках)?

[kidrock]

А как называть эти переменные? По какому принципу?

 

Зависит от того, что перед этим принимали. Например, выпив пару пива, я называю цвета жизнеутверждающими лозунгами, типа: deep_purple, blue_cosmos, orange_heaven и т.д., на светлую голову с утра, после чашечки кофе, несколько иначе. Шутка, конечно, но с долей правды. Всё индивидуально, если не оговорено конкретно. Например в больших проектах в команде на этот счёт могут быть определённые установки, в самостоятельных проектах вы сам себе начальник - пишете как нравится. Лишь бы это можно было нормально понять человеку, который будет после вас в этом коде ковыряться.

 

Наверное вопрос относительный. У всех глаза разные. И решать скорее всего человеку создававшему дизайн.

Именно. В любом случае действует правило - не уверен, не косячь.

 

У меня 4 пары повторяющихся значений. И какие им(переменным) имена давать? По типу именования классов в БЭМ?

Лично я называю так-же, как и шрифт, чаще всего.

[leshiple]

Лично я называю так-же, как и шрифт, чаще всего.

 

Ты создаешь миксины или включения? Напиши пожалуйста пример.

[kidrock]

Включения это %something? Можно и так и так. Есть разница особая в этом случае? 

%OpenSansRegular {   font: 15px "OpenSansRegular";  color: #ccc;  line-height: 1.5em;  letter-spacing: 1px;}

Хотя, можно и так, даже лучше, чёт я раньше об этом не задумывался ))) Но мне простительно, я не волшебник, только учусь.

@mixin OpenSansRegular($size) {font: $size "OpenSansRegular", sans-serif;color: #ccc;line-height: 1.5em;letter-spacing: 1px;}.main {  @include OpenSansRegular(15px);  max-width: 1600px;  margin: 0 auto;  overflow: hidden; }

 

Edited May 16, 2015 by kidrock

[leshiple]

kidrock,  спасибо. Буду пробовать.

[leshiple]

Придумал пока вот что:

@mixin arial ($font-size, $line-height: $font-size) {    font: $font-size + px + "/" + $line-height "Arial", sans-serif;}

Единицу измерения подставлять свою.

Edited May 17, 2015 by leshiple

[kidrock]

тогда уж вот так: 

@mixin arial ($font-size, $line-height, $letter-spacing, $color) {    font: $font-size + px + "/" + $line-height + px "Arial", sans-serif;	color: $color;	letter-spacing: $letter-spacing + px;}

$color-skyblue: #00aeef;.main { 	@include arial(15,20,1, $color-skyblue); 	 }

Edited May 17, 2015 by kidrock

[leshiple]

 

тогда уж вот так: 

@mixin arial ($font-size, $line-height, $letter-spacing, $color) {    font: $font-size + px + "/" + $line-height + px "Arial", sans-serif;	color: $color;	letter-spacing: $letter-spacing + px;}

letter-spacing....  В твоем случае нельзя пропускать значения. А если устанавливать значения по умолчанию то тогда на выходе получим лишний код. Нудно будет помот искать где letter-spacing: normal сбрасывает унаследованное значение, а где и побочный эффект от примеси.

[kidrock]

Идеального ничего не бывает. Под каждый проект всё равно нужно корректировать. В вашем случае также неизбежно устанавливается высота строки, названная почему-то letter-spacing.

[leshiple]

Исправил, спасибо.