Верно ли начал использовать SASS(scss)?

Question

[dk-web]

Пока не нагородил полный огород - решил проконсультироваться...
Меня через день бросает из php в дизайн, но так получается.. сегодня вернулся к оформлению css при помощи SASS (SCSS).
Только вот уроки, которые использую, применяют SASS файлы - то есть отступы - без скобочек и точек с запятыми - смотрится органично..
Но я решил использовать SCSS синтаксис... и если честно, то смотрится огородом, когда используешь вложенные селекторы?
Делаю header

header {
	height:450px;
	background-color:$bg-color;
	
	.logo {
		width:50px;
		height:50px;
		background-color:#999;
	}
	nav {
		a {
			display: inline-block;
			margin-left: 20px;
			color:$white;
			text-decoration: none;

			font: {
				size:14px;
				weight:700;
			}
			text-transform: uppercase;
			&:hover{
				color:blue;
			}
		}
	}
}

Особенно смутил font.. так разве можно?

и еще, пожалуй, самое большое неудобство - каждый раз вручную сохранять файл mystyle.scss - хотя в нем ничего не меняю.. там только несколько @ import.
Может кроме compass watch еще что-либо дописать?

Answer 1

[Nikolay Talanov]

1) Вкладывать селекторы более чем на 1 уровень - ад и израиль. Вообще вложенные селекторы должны очень редко использоваться, в основном когда дело доходит до глобального изменения состояния какого-нибудь компонента (например добавили класс к блоку, и относительно этого класса изменили стили вложенных элементов блока). Изучите BEM или другие CSS методологии, и проблем станет меньше.
2) Использовать теги в качестве селекторов это почти всегда плохо. Как только вам придется вносить изменения и например то, что раньше у вас было "a" должно будет превратиться в "li", вы резко сядете в лужу со своими тегами. Тут вам снова поможет какая-нибудь css методология.
3) Использование конструкций типа font: {} очень сильно затрудняет чтение стилей, ибо поначалу создается впечатление что это очередной вложенный селектор. Юзайте обычные font-size/font-weight, и если вам очень хочется все это компоновать в один font в финальных стилях, то юзайте плагин для gulp/grunta который будет это делать.

Comments

[Сергей Протько]

Synoptic: это бездумное использование селекторов называется, поддерживать такие стили боль и унижение. А скоупинг sass позволяет не только селекторы вложенные делать. А делать новые на основе предыдущих, но находящиеся на одном уровне вложенности.

.foo {

    &--mod {
    
     }
}

// будет

.foo {}
.foo--mod {}

что до тегов в качестве селекторов - почти всегда, в подавляющем большинстве случаев. Есть очень редкие исключения.

[dk-web]

Сергей Протько: простите, мне что каждой ссылке класс прописывать вместо тега а? нет - я понимаю, когда на серьезном уровне подготовки можно все красиво усложнять...
Nikolay Talanov - ну мне показалось, что во-многом для этого препроцессоры и сделали - можно удобно прописать стили для каждого из блоков и потом это все красиво соединить в один css файл.

[dk-web]

и потом я пока просто разбираю урок...
стили будут применяться к div class=header с вложенным или это тоже неверно?

[Сергей Протько]

dk-web: да, ибо сегодня это ссылка, завтра это span, после завтра еще что-нибудь. Я не говорю что нужно отказаться от каскадирования, но скажем зачем меню навигации знать что-то о том где оно находится? Вы так связываете руки. Вот захочу я точно такую же менюшку в футер запихнуть и мне придется уже делать лишнюю работу.

[Nikolay Talanov]

Synoptic: А если вам захочется юзать именно этот select где то в другом месте, то что? Копипастить стили будете?

[Сергей Протько]

Synoptic: ну с таблицами все просто - тут по семантике ничего другого не лезет, и это довольно редкий нынче кейс - таблица. Я вот не помню когда в последний раз их юзал (стараюсь избегать таблиц в UI).

Что до производительности - меня больше заботит DRY.

[Nikolay Talanov]

Synoptic: БЭМ - официальная рекомендация гугла. То есть не только "какого-то там яндекса". Так что нынче православно все делать классами и об этом твердят на каждом шагу.

[Сергей Протько]

Synoptic: legacy в контексте вопроса мы не рассматриваем. Да и BEM бывает разный, я вот использую чуть упрощенную схему сохраняя основную идею разделения на компоненты. В контексте использования web-компонентов (или директив в angularjs) это очень даже удобно.

что до таблиц - у каждого свои задачи. Я не переношу всякие там гриды и прочее и избегаю их. В админках у меня списки в основном, никаких гридов. А "обычных сайтов" я не делаю, и табличные данные вывожу только в виде каких-то репортов. И там да, можно.

[Сергей Протько]

Synoptic: опять же, я сам иногда делаю селекторы по тегам, в этом нет ничего сильно плохого если все изолировано. Но вложенности более одного элемента (не учитывая псевдоэлементы) я стараюсь не делать.

[Nikolay Talanov]

Synoptic: если человек будет работать с legacy кодом, то значит что он будет работать по устоявшимся на том проекте стайлгайдам. Так что это никак не относится к этому обсуждению. Мы тут обсуждаем как новые здания строить, а не как ремонт и запиливание балкона в конкретном доме делать.

По поводу БЭМ для всех - никто не мешает адаптировать методологию под себя с допущениями под определенный проект.

[Сергей Протько]

Synoptic: повторюсь, я последние полтора года при проектировании UI админок (работаю преимущественно в корпаративном секторе) не использую гриды. Есть намного более удачные варианты.

[Сергей Протько]

Synoptic: ну тут у меня преимущество - дизайн админок никто мне никуда не спускает, да и с верхами я могу спокойно поспорить.

Answer 2

[Дима]

все про Sass можете почитать тут - sass-scss.ru

Answer 3

[Денис Инешин]

Что бы не делать вручную, посмотрите на Grunt.
На счет можно/нельзя смотрите сразу на офф. справку, там всё написано. Например nested_properties видно что пишем и во что компилится в итоге (это на вопрос о font)

Comments

[dk-web]

за ссылку спасибо - на нашел сходу верной документации...
а по поводу Grunt - не уверен. На каждый плагин еще плагины - я уже тупо запутался что куда .. рано еще( потыкаю ctrl-s если это единственный способ

[Денис Инешин]

dk-web: пройдите по ссылке на грунт, там очень простой и понятный туториал. Поверьте мне, освоите за пару часов, потом только радоваться будете.

[dk-web]

Денис Инешин: установил, запустил... медленнее чем прямой компас работает -( может настройки не совсем те?

module.exports = function(grunt) {

grunt.initConfig({
compass: { // Task
dist: { // Target
options: { // Target options
sassDir: 'sass',
cssDir: 'stylesheets/',
environment: 'production'
}
},
},
watch: {
css: {
files: ['sass/partials/*.scss'],
tasks: ['compass'],
options: {
spawn: false
},
}
}
});

grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');

grunt.registerTask('default', ['compass']);


};

[dk-web]

dk-web: Денис Инешин: сорри за такой формат(

[Денис Инешин]

dk-web: я лично не силен в SASS, а пользуюсь LESS, так что тут вам не подскажу.