Sass — еще более удобный и логичный CSS

23 сентября 2009, 18:43 Павел Марковнин HTML и CSS рейтинг

Saas и CSS Привет!

Несколько раз при написании CSS кода я ловил себя на мысли, что было бы круто, если бы в CSS можно было использовать что-то вроде переменных и функций — это бы избавило от необходимости повторять участки кода и сильно ускорило бы работу. Увы, такого в CSS делать нельзя.

Недавно Саша спросил меня: «Ты знаком с Sass?». Оказалось, что это специальный язык написания стилей, но более удобный и предоставляющий массу новых возможностей, которых нет в привычном CSS.

Что такое Sass

Авторы называют его мета-языком описания стилей. Синтаксис построен на стандартном синтаксисе CSS, с той лишь разницей, что Sass более простой, логический и удобный язык. Его авторами и разработчиками являются Хамптон Катлин и Натан Вайценбаум.

В чем прелесть

Sass предоставлять вам больше возможностей и свободы при написании CSS. Это как программный язык внутри CSS. Вы можете использовать что-то вроде функций с переменными, логически структурировать ваш код (сложенность стилей и классов). Вот главные возможности Sass с примерами:

Красота кода

Saas

В Sass нет точек с запятой и фигурных скобок, свойства располагаются непосредственно после селектора и по одному на строке.

Вложенность

Saas

Теперь для вложенных селекторов не нужно повторять селекторы родителей, достаточно просто расположить дочерний селектор внутри родительского. Это применимо и для свойств.

Переменные

Saas

Если какое-то значение свойства повторяется у многих элементов — занесите его в переменную и используйте сколько угодно раз. При изменении значения необходимо будет поменять его только в одно месте. Математические операции с численными значениями так же возможны (пропорции шрифтов скажем).

Миксины

Saas

Что-то вроде функций, которые могут содержать целые куски CSS кода вместе с селекторами и свойствами. Зачем писать одно и то же по сто раз?

Как это работает

Изначально есть файлы, в которых вы пишете на Sass. Как вы догадываетесь, браузер не понимает (по крайней мере пока) такой язык, так как он не является стандартизированным. Браузер понимает только CSS и следовательно ему нужно отдать ваши стили в формате CSS. Как это сделать? Да взять и скомпилировать. Но для этого вам понадобиться специальный фреймворк на том языке, на котором у вас написаны серверные приложения (ASP.NET, Ruby, PHP).

Лучше всего с Sass работает Ruby, для которого на официальном сайте есть инструкция по установке и работе со специальным дополнением. Для того, чтобы компилировать Sass с помощью PHP вам понадобиться другой фреймворк — Compass.

Примеры работы

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

Вывод

На первый взгляд Sass довольно сильная вещь. Из того, что я узнал и увидел, можно сделать вывод, что будущее у этой технологии есть. Более легкий синтаксис, логическая структура и возможность использования переменных предоставляют разработчикам отличные возможности и могут существенно ускорить написание и редактирование файлов стилей.

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

css, sass, стили.

Автор статьи: Павел Марковнин

Понаписал еще 106 статей.

Рекламное место, которое может стать вашим

Понравилась статья?

Тогда подпишись на обновления через RSS или воспользуйся
другими способами подписки.

Теоретически похожие статьи

Также обратите внимание на другие статьи раздела «HTML и CSS».

Комментарии — 30

RSS

23 сентября 2009 в 19:10 ]]>sergy]]>

Как-то уж слишком накрутили. Мне кажется написать таблицу стилей стандартными средствами будет куда быстрее чем мудрить с функциями и компиляторами. Во всяком случае пока....пока браузеры не понимают этого самого Sass.
Вобщем если и начинать пользоваться то после html5 точно.
23 сентября 2009 в 19:11 Андрей [t]

Ничего так, жаль только попробовать на «специальной страничке» не получилась — 503.
Но судя из статьи Sass — вполне достойная замена CSS, которая может составить конкуренцию CSS 3.
Ладно, подожду пока сервис снова откроют, попробую его на зуб, а там будет видно)
23 сентября 2009 в 19:13 Андрей [t]

sergy, а что там мудрить-то с компиляцией? Прикрутил фреймворк один раз, а потом файлы автоматически компилируешь и отдаешь браузеру.
И тем более верстка строится не из одной таблицы, а часто из гараздо сложных объектов.
23 сентября 2009 в 19:32 Антон

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

2Андрей: это вообще ни разу не замена CSS. И никогда ей не станет. И ни о какой конкуренции с CSS3 даже речи не идёт :)
23 сентября 2009 в 19:37 ]]>Pavel Reznikov]]> [t]

Sass в частности и compass в общем - очень крутые штуки. Использую. Опятьже, сам компас умеет отслеживать изменения sass файлов и автоматом компилить их.
23 сентября 2009 в 19:39 ]]>Pavel Reznikov]]> [t]

+ в компасе поддержка нескольких css фреймворков есть (960.gs, blueprint, ...). Миксины вообще крутая штука - со временем обрастаешь своими css библиотеками
23 сентября 2009 в 22:45 ]]>Octane]]>
Поддержу отечественного производителя :D Есть немного более простое решение на PHP, называется ExtCSS.

Использование переменных:
```
    $vars {
    	$bgcolor = #efefef;
    	$alink = #414141;
    	$avisited = #999;
    	$ahover = #01a5e4;
    }
```
Вложенные конструкции:
```
    .post {
            font-size: 0.875em;
            p, ul, ol {
                    margin: 0 0 14px;
            }
            ul, ol {
                    padding: 0;
                    li {
                            display: list-item;
                    }
            }
    }
```
Описание псевдоэлементов во вложенных конструкциях:
```
.nav a.current {
	&:link {…}
	&:visited {…}
}
```
Есть аналог php-инклуда:
```
@import_extcss "ext-filename.css";
```
Корректно обрабатывает @media и игнорирует @font-face.
В папке с css работаем с файлом ext-filename.css, после обработки скриптом появляется файл filename.css.

Документации пока нет, автор ленится :(

Начал делать с помощью ExtCSS новый проект, пока нравится, довольно удобно :)
23 сентября 2009 в 23:13 ]]>Grin]]> [t]

Спасибо, Октан!
24 сентября 2009 в 8:27 Dan

есть еще less http://lesscss.org/
тоже удобная штука по описанию, но у меня пока попробовать не получается =(
24 сентября 2009 в 9:46 ]]>Den Kulikoff]]> [t]

Лично мне синтаксис CSS вполне удобен и привычен. Единственное, чего иногда не хватает, так это переменных.
24 сентября 2009 в 10:29 kolyuchii

На первый взгляд, вижу только преимущество вложенности стилей. Время покажет.
24 сентября 2009 в 10:50 Алексей [t]
Смотрите как хорошо
SASS:
```
.block_1
  .block_2
    .inner_block_1, inner_block_2, .innerblock_3
      :margin
        :left aut
        :right auto
```
И такой же CSS:
```
.block_1 .block_2 .inner_block_1, .block_1 .block_2 inner_block_2, .block_1 .block_2 .innerblock_3 {
  margin-left: auto;
  margin-right: auto; }
```
Вы ведь согласитесь с тем что первый вариант намного более читаемый. И это самая главная и нужная фича данной штуки. А аще эти табы как в питоне и не надо скобок как в lesscss. Красота ведь. Используем уже год и довольны.

24 сентября 2009 в 11:02 kolyuchii

И я об этом же. Хотя SASS-вариант смотрится (пока) непривычно.
А CSS можно переписать так:


.block_1 .block_2 .inner_block_1, 
.block_1 .block_2 .inner_block_2, 
.block_1 .block_2 .innerblock_3{
	margin: 0 auto;
}

или так:


.block_1 
	.block_2 
		.inner_block_1, 
.block_1 
	.block_2 
		.inner_block_2, 
.block_1 
	.block_2 
		.innerblock_3 
{
	margin: 0 auto;
}

24 сентября 2009 в 11:15 ]]>adw0rd]]> [t]

>Для того, чтобы компилировать Sass с помощью PHP вам
>понадобиться другой фреймворк — Compass.

А где там PHP? там опять ссылка на руби...
24 сентября 2009 в 11:36 KIVagant

Пока браузеры не научатся это поддерживать - в принципе мало-полезная вестч. А когда научатся - ещё конфликтов будет как всегда вагончик. Эх, мечта вебмастера - чтобы все само делалось и денешки капали...
24 сентября 2009 в 15:45 Андрей [t]

2Антон: на счет костыля совершенно не согласен. Так же полагаю, что вы используете тот же JQuery, Mootools и др. фреймворки в своих проектах. Вся разница в том, что их не нужно компилировать перед использованием.
Тут суть не в грамоте, а в удобстве.

пс. грамате абучин).
24 сентября 2009 в 18:29 ]]>Elfet]]>

Вот это победит всё:

=)
24 сентября 2009 в 23:24 ]]>Viktor]]>

Интересная вещь, вообще впервые слышу, возможно и полезная, но соглашусь с первым постом, мне тоже быстренько все написать и не заморачиваться лишний раз-проще.
25 сентября 2009 в 1:10 Антон

Да. согдашусь с некоторыми постами в том что использование чего-то нового (пусть даже удобного и простого) связано с проблемой его изучения. Но если вы делаете несколько десятков проектов в год, то на изучение можно потратить пару дней. Вторая проблема данной технологии - использование для её работы дополнительных средств (благо ещё плагин к браузеру не заставили качать как у флеша). Конечно недолго установить на сервер фреймворк и работать но как мы знаем люди не любят тратить время на подготовительные процессы (Новый Год - исключение :) ). А в остальном - удобно использование переменных (для меня) сродни php создаёшь один файл в него пишешь все переменные и общие скрипты (например соединение с mysql), а потм крепишь его к странице с кодом и меняешь всё в одном месте. Я поддерживаю данный проект и не жалею те две минуты которые у меня заняло написание данного поста :)
26 сентября 2009 в 18:02 AngryCAT

Мне понравилось. Попробовал на тестовой страничке, поковыряю ещё и буду использовать.
27 сентября 2009 в 14:37 Koc

На тему развития CSS есть статья на смешингмегезин. Только там рассуждения "как было б круто, если б это было", а тут вот уже реальный работающий инструмент.
27 сентября 2009 в 14:37 serho

Если Вам приглянулся Sass, то вероятно понравится и Haml (язык разметки для генерации (X)HTML ). О Haml можно посмотреть тут (http://haml-lang.com), для использования c PHP есть описание тут (phphaml.sourceforge.net). Сам использовать с PHP не пробовал, но с Ruby-фреймворки даже очень...
P.S. сорри за линки, просто с тегами не распарсились
27 сентября 2009 в 15:22 Koc

зыы: я не дочитал статью на smg до конца, там есть упоминание о Sass. ;)
4 октября 2009 в 13:59 джон

Не, технология маст дай имхо
Все надо делать руками и по правилам
5 октября 2009 в 10:58 artoodetoo

>> Для того, чтобы компилировать Sass с помощью PHP вам понадобиться другой фреймворк — Compass.
Это ошибка! Compass на Ruby

Кое-что про Haml & Sass на php начали делать в проекте http://phphaml.sourceforge.net/ но он кажется умер.

Пришлось делать самому :) http://pyha.ru/forum/topic/3466.msg71339#msg71339
Исходники: http://code.assembla.com/qb7/subversion/nodes/cuts/smartcss
7 октября 2009 в 17:46 ]]>чики]]> [t]

Мне понравилось, очень доставляет питоновский синтаксис и вообще я за, буду использовать
21 марта в 3:49 троль

не привычно как то с вложенностью(

Хотя если вшить это в cms получится очень даже, правда процесс вшивание сферическое задротство...
17 апреля в 23:33 Евгений

Уже на втором скриншоте видно самый огромный минус:
селектор визуально путается со свойством предыдущего селектора.
Наверное сложно придумать что то, что усложняло бы поиск нужного селектора сильнее.
1 июля в 12:36 SeemSign

Отличная вещь, минус лишь в том, что надо будет долго приспосабливаться, практиковаться чтобы свободно кодить на SASSе, даже опытному верстальщику.
1 июля в 15:34 ]]>Pavel Reznikov]]> [t]

@SeemSign у них сейчас новый синтаксис. Причем он обратно совместим с CSS, т.е. затраты на вхождение нулевые. Очклево.

Имя (надо бы заполнить это поле)
дополнительная информация

Эл. почта (используется для Граватарки)
Домашняя страница
Имя в Твиттере

Разрешенные теги Текст сообщения (надо бы заполнить это поле)

как выглядит	какой тег
жирный текст	<b>жирный текст</b>
курсивный тект	<i>курсивный тект</i>
~~зачеркнутый текст~~	<s>зачеркнутый текст</s>
подчеркнутый текст	<u>подчеркнутый текст</u>
ссылка	<a href="адрес">ссылка</a>
`function foo() { ... }`	<pre><code>function foo() { ... } </code></pre>

уведомлять о новых комментариях к статье

Sass — еще более удобный и логичный CSS

Что такое Sass

В чем прелесть

Красота кода

Вложенность

Переменные

Миксины

Как это работает

Примеры работы

Вывод

Автор статьи: Павел Марковнин

Понравилась статья?

Теоретически похожие статьи

Комментарии — 30

Спонсоры

Последние комментарии

Последние ответы на вопросы

Популярные статьи

Совершенно случайные статьи

Блогорол