Задать вопрос

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

Пока не нагородил полный огород - решил проконсультироваться...
Меня через день бросает из 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 еще что-либо дописать?
  • Вопрос задан
  • 566 просмотров
Подписаться 3 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 3
Ronnie_Gardocki
@Ronnie_Gardocki
Я у мамы фронтендщик.
1) Вкладывать селекторы более чем на 1 уровень - ад и израиль. Вообще вложенные селекторы должны очень редко использоваться, в основном когда дело доходит до глобального изменения состояния какого-нибудь компонента (например добавили класс к блоку, и относительно этого класса изменили стили вложенных элементов блока). Изучите BEM или другие CSS методологии, и проблем станет меньше.
2) Использовать теги в качестве селекторов это почти всегда плохо. Как только вам придется вносить изменения и например то, что раньше у вас было "a" должно будет превратиться в "li", вы резко сядете в лужу со своими тегами. Тут вам снова поможет какая-нибудь css методология.
3) Использование конструкций типа font: {} очень сильно затрудняет чтение стилей, ибо поначалу создается впечатление что это очередной вложенный селектор. Юзайте обычные font-size/font-weight, и если вам очень хочется все это компоновать в один font в финальных стилях, то юзайте плагин для gulp/grunta который будет это делать.
Ответ написан
mikaspell
@mikaspell
Frontender
все про Sass можете почитать тут - sass-scss.ru
Ответ написан
Комментировать
IonDen
@IonDen
JavaScript developer. IonDen.com
Что бы не делать вручную, посмотрите на Grunt.
На счет можно/нельзя смотрите сразу на офф. справку, там всё написано. Например nested_properties видно что пишем и во что компилится в итоге (это на вопрос о font)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы