CSS и SASS

@helard · Регистрация: 04.09.2017

Студворк — интернет-сервис помощи студентам

Здравствуйте.
Я начинающий верстальщик и меня интересует вопрос.
Что можно сделать такого на SASS чего нельзя сделать на CSS?
Ведь все то что показывают, например переменные, легко реализуемо на CSS с помощью обычных классов.
Так в чем же "фишка"? Просветите.

@mrtoxas · 04.09.2017, 14:38

SASS - это CSS-препроцессор, который упрощает разработку. На выходе получаем тот же CSS, только на его написание вы тратите меньше времени и сил. Поэтому, сравнивать CSS c SASS некорректно. SASS можно сравнивать с другими препроцессорами - LESS или Stylus и т.п.

@SiarheiSiarhei · 04.09.2017, 14:56

"упрощает разработку"... ха! ха.. если, сам себе не упростишь - в css... и, на фик "кузнец"

@mrtoxas · 04.09.2017, 16:36

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

@Ares111 · 04.09.2017, 17:04

Есть мнение, что при изучении материалов по профессии "верстальщик" препроцессоры (типа SASS, LESS и т.д.) можно поставить на последнее место в очередь изучения. Первое время можно прекрасно обходиться без них. Единственное исключение - если препроцессоры обязательны на той вакансии, куда стремитесь устроиться работать.

@andrey7287 · 05.09.2017, 22:18

Сейчас по моему даже на стартовую позицию требуется знание препроцессоров.

@Evgeniy55 · 06.09.2017, 18:47

Сообщение от SiarheiSiarhei

"упрощает разработку"... ха! ха.. если, сам себе не упростишь - в css... и, на фик "кузнец"

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

@Mailo · 10.09.2017, 22:42

переменные не могут реализоваться в css с помощью классов, т.к. в css нет переменных))) в sass они есть. Вообще путь молодого верстальщика звучит примерно так: css, sass, gulp/pug ну и тому подобное.

@mrtoxas · 10.09.2017, 22:47

Сообщение от Mailo

в css нет переменных

CSS
1
2
3
4
5
6
:root {
  --main-color: red;
}
body{
  color:var(--main-color);
}

Вуаля

Правда, с IE, как всегда.

@Mailo · 11.09.2017, 15:32

Ого не знал, наврятли право этим много кто пользуется

@rodigy · 11.09.2017, 15:48

скоро и препроцессоры будут хранить свои переменные непосредственно в css коде

@andrey7287 · 12.09.2017, 21:14

Сообщение от Mailo

Ого не знал, наврятли право этим много кто пользуется

Пользуются уже довольно давно, postcss позволяет внедрять новые фичи уже сейчас. А то что вы называете переменными в sass/less это ерунда, _переменных_ в препроцессорах Нет !

@rodigy · 12.09.2017, 21:58

Сообщение от andrey7287

А то что вы называете переменными в sass/less это ерунда, _переменных_ в препроцессорах Нет !

А что же это такое по вашему, да их нет(пока нет) в итоговом css коде, но это переменные

@andrey7287 · 12.09.2017, 22:35

Ok, если по вашему это переменные, почему я не могу сделать вот так ?

CSS
1
2
3
$padding: 35px;
 
@media (max-width: 760px) { $padding: 15px }

@mrtoxas · 13.09.2017, 00:36

Переменная — это идентификатор, определяющий данные. Обычно это имя, скрывающее за собой область памяти, куда могут помещаться данные
Переменная (программирование)

andrey7287, что не так? Вот вам даже с областью видимости:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*SCSS-code*/
 
$padding: 35px;
 
.block {
  padding: $padding;
}
@media (max-width: 760px) {
  $padding: 15px;
  .block {
    padding: $padding;
  }
}
.block2 {
  padding: $padding;
}

На выходе получаем

CSS
1
2
3
4
5
6
7
8
9
10
11
12
.block {
  padding: 35px;
}
 
@media (max-width: 760px) {
  .block {
    padding: 15px;
  }
}
.block2 {
  padding: 35px;
}

Вот, аналогичный пример с JS

JavaScript
1
2
3
4
5
6
7
var padding = 35;
console.log(padding); // 35
(function() {
  var padding = 15;
  console.log(padding); // 15
})(); 
console.log(padding); // 35

В javascript тоже нет переменных?

@Mailo · 13.09.2017, 02:33

andrey7287, если я могу в рамках одного только css файла объявить переменную, скажем цвет текста и использовать её потом много раз в других местах css в сокращённом виде, тогда для меня это уже переменная, т.к. она ускорила написания кода со стороны человека и упорядочила вычисления со стороны машины (поместила классы через запятую в css, хотя в scss я писал всё это в разных местах). Где то здесь должна быть фишка.

@andrey7287 · 13.09.2017, 21:50

mrtoxas, отличный пример ! а как это коррелируется с моим вопросом ? С тем же успехом можно написать вот это.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*SCSS-code*/
 
$padding: 35px;
 
.block {
  padding: $padding;
}
@media (max-width: 760px) {
  $small-padding: 15px;
  .block {
    padding: $small-padding;
  }
}
.block2 {
  padding: $padding;
}

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

JavaScript
1
2
3
4
var padding = 35px;
if ( window.matchMedia("(max-width: 760px)").matches ) {
 padding = 15px;
}

Добавлено через 4 минуты
Mailo, Вопрос не в том что можно сделать а в том чего нельзя !

А почему нельзя ? Потому что переменные фейковые

@mrtoxas · 13.09.2017, 22:41

andrey7287, вы сказали, что в препроцессорах нет переменных. Я вам на примере показал, что переменные есть. Привел аналогию с работой в js.
А ваш пример говорит о том, что sass\less имеют ограниченные возможности, в.ч. и невозможность создавать подобного рода конструкции, что вполне логично, т.к. препроцессоры это не язык программирования. Но в любом случае, к самим переменным это никакого отношения не имеет. Переменную не характеризуют способы изменения ее значений, это уже возможности среды.

Переменные:
1. принимают значения.
2. хранят значения.
3. отдают значения.

Или у вас другое понимание переменной?

Добавлено через 6 минут

Сообщение от andrey7287

Потому что переменные фейковые

Главное, что они есть. А по какому признаку вы определяете фейковость, это уже такое дело.

@andrey7287 · 13.09.2017, 23:40

Я хотел сказать, что у нас есть не ограниченные возможностями среды переменные прям в css! А большинство подключает препроцессор что бы пользоваться ограниченными. Но главное, конечно, что это всё таки переменные, это прям в корне всю ситуацию меняет !

@rodigy · 14.09.2017, 01:35

Сообщение от andrey7287

А большинство подключает препроцессор что бы пользоваться ограниченными.

Препроцесоры это не только переменные, a много чего еще , что в css находиться только в разработке

Добавлено через 8 минут
Да и появились css var сравнительно недавно

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .

@helard 0 / 0 / 0 Регистрация: 04.09.2017 Сообщений: 1

	CSS и SASS 04.09.2017, 14:10. Показов 1374. Ответов 19 Метки css, sass (Все метки) Здравствуйте. Я начинающий верстальщик и меня интересует вопрос. Что можно сделать такого на SASS чего нельзя сделать на CSS? Ведь все то что показывают, например переменные, легко реализуемо на CSS с помощью обычных классов. Так в чем же "фишка"? Просветите. 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	04.09.2017, 14:38
	SASS - это CSS-препроцессор, который упрощает разработку. На выходе получаем тот же CSS, только на его написание вы тратите меньше времени и сил. Поэтому, сравнивать CSS c SASS некорректно. SASS можно сравнивать с другими препроцессорами - LESS или Stylus и т.п. 1

@SiarheiSiarhei 26 / 36 / 15 Регистрация: 15.01.2017 Сообщений: 311
	04.09.2017, 14:56
	"упрощает разработку"... ха! ха.. если, сам себе не упростишь - в css... и, на фик "кузнец" 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	04.09.2017, 16:36
	SiarheiSiarhei, не совсем понятно о чем вы, но если вы не разобрались с инструментом, или не нашли ему применение в своих проектах, то это не в инструменте проблема и это вовсе не означает то, что данный инструмент не интересен, и не упрощает работу тому, кто в нем разобрался и использует его. 0

@Ares111 59 / 22 / 12 Регистрация: 30.05.2017 Сообщений: 73
	04.09.2017, 17:04
	Есть мнение, что при изучении материалов по профессии "верстальщик" препроцессоры (типа SASS, LESS и т.д.) можно поставить на последнее место в очередь изучения. Первое время можно прекрасно обходиться без них. Единственное исключение - если препроцессоры обязательны на той вакансии, куда стремитесь устроиться работать. 1

@andrey7287 30 / 28 / 14 Регистрация: 06.01.2016 Сообщений: 161
	05.09.2017, 22:18
	Сейчас по моему даже на стартовую позицию требуется знание препроцессоров. 0

@Mailo 178 / 226 / 31 Регистрация: 18.02.2010 Сообщений: 2,313
	10.09.2017, 22:42
	переменные не могут реализоваться в css с помощью классов, т.к. в css нет переменных))) в sass они есть. Вообще путь молодого верстальщика звучит примерно так: css, sass, gulp/pug ну и тому подобное. 0

@Mailo 178 / 226 / 31 Регистрация: 18.02.2010 Сообщений: 2,313
	11.09.2017, 15:32
	Ого не знал, наврятли право этим много кто пользуется 0

@rodigy 90 / 40 / 17 Регистрация: 24.10.2015 Сообщений: 577
	11.09.2017, 15:48
	скоро и препроцессоры будут хранить свои переменные непосредственно в css коде 0

@Mailo 178 / 226 / 31 Регистрация: 18.02.2010 Сообщений: 2,313
	13.09.2017, 02:33
	andrey7287, если я могу в рамках одного только css файла объявить переменную, скажем цвет текста и использовать её потом много раз в других местах css в сокращённом виде, тогда для меня это уже переменная, т.к. она ускорила написания кода со стороны человека и упорядочила вычисления со стороны машины (поместила классы через запятую в css, хотя в scss я писал всё это в разных местах). Где то здесь должна быть фишка. 0

@andrey7287 30 / 28 / 14 Регистрация: 06.01.2016 Сообщений: 161
	13.09.2017, 23:40
	Я хотел сказать, что у нас есть не ограниченные возможностями среды переменные прям в css! А большинство подключает препроцессор что бы пользоваться ограниченными. Но главное, конечно, что это всё таки переменные, это прям в корне всю ситуацию меняет ! 0