Sass

Поделись знанием:
Перейти к: навигация, поиск
Sass
Тип

Компилирующий обработчик шаблонов

Разработчик

Nathan Weizenbaum, Chris Eppstein, Hampton Catlin

Операционная система

Кроссплатформенная

Последняя версия

3.4.15 (Media Mark)

Лицензия

MIT License

Сайт

[sass-lang.com/ ng.com]

К:Википедия:Статьи без изображений (тип: не указан)

Sass (Syntactically Awesome Stylesheets) — модуль, включенный в Haml. Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS кода и упрощения файлов каскадных таблиц стилей.

Язык Sass имеет два синтаксиса:

  • sass — отличается отсутствием фигурных скобок, в нём вложенные элементы реализованы с помощью отступов;
  • SCSS (Sassy CSS) — использует фигурные скобки, как и сам CSS.




Вложенные правила

Одна из ключевых особенностей Sass — вложенные правила, которые облегчают процесс создания и редактирования вложенных селекторов.

#header
  background: #FFFFFF

  .error
    color: #FF0000
  
  a
    text-decoration: none
    &:hover
      text-decoration: underline

Будет транслировано в:

#header {
   background: #FFFFFF; 
}
#header .error {
   color: #FF0000; 
}
#header a {
   text-decoration: none; 
}
#header a:hover {
   text-decoration: underline; 
}

Переменные в CSS

Sass добавляет к CSS константы и примеси. Это облегчает поддержку целостности данных внутри большого набора стилей. Константы позволяют установить значение и использовать его внутри стилей, с помощью примесей то же самое можно сделать с блоком атрибутов стиля.

$linkColor: #00F

a
  color: $linkColor

Будет транслировано в:

a {
   color: #00F; 
}
Пример использования примесей, подобие функций:
@mixin border-radius($radius,$border,$color) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
    border:$border solid $color
}
.box { @include border-radius(10px,1px,red); }
Будет транслировано:
.box {
   -webkit-border-radius: 10px; 
      -moz-border-radius: 10px; 
       -ms-border-radius: 10px; 
           border-radius: 10px; 
   border: 1px solid red; 
}

См. также

Напишите отзыв о статье "Sass"

Литература

  • Alex Libby. [books.google.ru/books?id=UqZ0dBzm5UEC Instant SASS CSS How-to]. — Packt (англ.), 2013. — 80 p. — ISBN 9781782163794.
  • Ben Frain. [books.google.ru/books?id=shJEwk7y80oC Sass and Compass for Designers]. — Packt (англ.), 2013. — 274 p. — ISBN 9781849694551.
  • Hampton Catlin, Michael Lintorn Catlin. [books.google.ru/books?id=xEfZXwAACAAJ Pragmatic Guide to Sass]. — Pragmatic Bookshelf, 2011. — 112 p. — ISBN 9781934356845.
  • Wynn Netherland, Nathan Weizenbaum, Chris Eppstein, Adam Stacoviak. Sass and Compass in Action. — Manning Publications (англ.), 2013. — 300 p. — ISBN 9781617290145.
  • Брайан Хоган, К. Уоррен, М. Уэбер, К. Джонсон, А. Годин. Глава 5. Рабочий процесс → Рецепт 28. Модульные таблицы стилей с помощью Sass. // [books.google.ru/books?id=DN9o0S9y5W4C Книга веб-программиста: секреты профессиональной разработки веб-сайтов]. — Питер. — С. 197-203. — 288 с. — (Библиотека программиста). — 2000 экз. — ISBN 978-5-459-01510-2.
  • Antony Kennedy, Inayaili de Leon. Ch. 9. Dynamic CSS → SASS // [books.google.ru/books?id=fAKqKhXdvlwC Pro CSS for High Traffic Websites]. — Apress, 2011. — P. 279-293. — 432 p. — (Expert's voice in web design). — ISBN 9781430232896.
  • Jennifer Niederst Robbins. Ch. 18. CSS Techniques → Sass and LESS // Learning Web Design. Fourth Edition. — O'Reilly, 2012. — P. 433. — 621 p. — ISBN 978-1-449-31927-4.
  • Alex Starostin. [www.ibm.com/developerworks/opensource/library/wa-sass/index.html Improve CSS development with Sass]. IBM developerWorks (28 May 2013). Проверено 14 декабря 2013.
  • Ragnar Kurm. [webandphp.com/compile-your-style-part2-structuring-automating-css Compile Your Style: Structuring and automating CSS]. Web & PHP Magazine. Проверено 14 декабря 2013.
  • Jeremy Hixon. [coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/ An Introduction To LESS, And Comparison To Sass]. Smashing Magazine (англ.) (9 сентября 2011). Проверено 31 марта 2012. [www.webcitation.org/67h0O7quT Архивировано из первоисточника 16 мая 2012].

Ссылки

  • [sass-scss.ru Документация на русском языке]
  • [sass-lang.com Официальный вебсайт Sass]
  • [github.com/nex3/sass Репозиторий исходного кода Haml/Sass (Git)]

Отрывок, характеризующий Sass

– Мерзавка, бесстыдница, – сказала она ей. – Слышать ничего не хочу! – Оттолкнув удивленными, но сухими глазами глядящую на нее Наташу, она заперла ее на ключ и приказав дворнику пропустить в ворота тех людей, которые придут нынче вечером, но не выпускать их, а лакею приказав привести этих людей к себе, села в гостиной, ожидая похитителей.
Когда Гаврило пришел доложить Марье Дмитриевне, что приходившие люди убежали, она нахмурившись встала и заложив назад руки, долго ходила по комнатам, обдумывая то, что ей делать. В 12 часу ночи она, ощупав ключ в кармане, пошла к комнате Наташи. Соня, рыдая, сидела в коридоре.
– Марья Дмитриевна, пустите меня к ней ради Бога! – сказала она. Марья Дмитриевна, не отвечая ей, отперла дверь и вошла. «Гадко, скверно… В моем доме… Мерзавка, девчонка… Только отца жалко!» думала Марья Дмитриевна, стараясь утолить свой гнев. «Как ни трудно, уж велю всем молчать и скрою от графа». Марья Дмитриевна решительными шагами вошла в комнату. Наташа лежала на диване, закрыв голову руками, и не шевелилась. Она лежала в том самом положении, в котором оставила ее Марья Дмитриевна.
– Хороша, очень хороша! – сказала Марья Дмитриевна. – В моем доме любовникам свидания назначать! Притворяться то нечего. Ты слушай, когда я с тобой говорю. – Марья Дмитриевна тронула ее за руку. – Ты слушай, когда я говорю. Ты себя осрамила, как девка самая последняя. Я бы с тобой то сделала, да мне отца твоего жалко. Я скрою. – Наташа не переменила положения, но только всё тело ее стало вскидываться от беззвучных, судорожных рыданий, которые душили ее. Марья Дмитриевна оглянулась на Соню и присела на диване подле Наташи.
– Счастье его, что он от меня ушел; да я найду его, – сказала она своим грубым голосом; – слышишь ты что ли, что я говорю? – Она поддела своей большой рукой под лицо Наташи и повернула ее к себе. И Марья Дмитриевна, и Соня удивились, увидав лицо Наташи. Глаза ее были блестящи и сухи, губы поджаты, щеки опустились.
– Оставь… те… что мне… я… умру… – проговорила она, злым усилием вырвалась от Марьи Дмитриевны и легла в свое прежнее положение.
– Наталья!… – сказала Марья Дмитриевна. – Я тебе добра желаю. Ты лежи, ну лежи так, я тебя не трону, и слушай… Я не стану говорить, как ты виновата. Ты сама знаешь. Ну да теперь отец твой завтра приедет, что я скажу ему? А?
Опять тело Наташи заколебалось от рыданий.
– Ну узнает он, ну брат твой, жених!
– У меня нет жениха, я отказала, – прокричала Наташа.
– Всё равно, – продолжала Марья Дмитриевна. – Ну они узнают, что ж они так оставят? Ведь он, отец твой, я его знаю, ведь он, если его на дуэль вызовет, хорошо это будет? А?
– Ах, оставьте меня, зачем вы всему помешали! Зачем? зачем? кто вас просил? – кричала Наташа, приподнявшись на диване и злобно глядя на Марью Дмитриевну.
– Да чего ж ты хотела? – вскрикнула опять горячась Марья Дмитриевна, – что ж тебя запирали что ль? Ну кто ж ему мешал в дом ездить? Зачем же тебя, как цыганку какую, увозить?… Ну увез бы он тебя, что ж ты думаешь, его бы не нашли? Твой отец, или брат, или жених. А он мерзавец, негодяй, вот что!
– Он лучше всех вас, – вскрикнула Наташа, приподнимаясь. – Если бы вы не мешали… Ах, Боже мой, что это, что это! Соня, за что? Уйдите!… – И она зарыдала с таким отчаянием, с каким оплакивают люди только такое горе, которого они чувствуют сами себя причиной. Марья Дмитриевна начала было опять говорить; но Наташа закричала: – Уйдите, уйдите, вы все меня ненавидите, презираете. – И опять бросилась на диван.
Марья Дмитриевна продолжала еще несколько времени усовещивать Наташу и внушать ей, что всё это надо скрыть от графа, что никто не узнает ничего, ежели только Наташа возьмет на себя всё забыть и не показывать ни перед кем вида, что что нибудь случилось. Наташа не отвечала. Она и не рыдала больше, но с ней сделались озноб и дрожь. Марья Дмитриевна подложила ей подушку, накрыла ее двумя одеялами и сама принесла ей липового цвета, но Наташа не откликнулась ей. – Ну пускай спит, – сказала Марья Дмитриевна, уходя из комнаты, думая, что она спит. Но Наташа не спала и остановившимися раскрытыми глазами из бледного лица прямо смотрела перед собою. Всю эту ночь Наташа не спала, и не плакала, и не говорила с Соней, несколько раз встававшей и подходившей к ней.