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

23 сентября 2009

3.97 из 5

Sass — еще более удобный и логичный 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 довольно сильная вещь. Из того, что я узнал и увидел, можно сделать вывод, что будущее у этой технологии есть. Более легкий синтаксис, логическая структура и возможность использования переменных предоставляют разработчикам отличные возможности и могут существенно ускорить написание и редактирование файлов стилей.

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

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

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

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

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

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

2Андрей: это вообще ни разу не замена CSS. И никогда ей не станет. И ни о какой конкуренции с CSS3 даже речи не идёт :)

Sass в частности и compass в общем - очень крутые штуки. Использую. Опятьже, сам компас умеет отслеживать изменения sass файлов и автоматом компилить их.

+ в компасе поддержка нескольких css фреймворков есть (960.gs, blueprint, ...). Миксины вообще крутая штука - со временем обрастаешь своими css библиотеками

Поддержу отечественного производителя :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 новый проект, пока нравится, довольно удобно :)

Спасибо, Октан!

есть еще less http://lesscss.org/
тоже удобная штука по описанию, но у меня пока попробовать не получается =(

Лично мне синтаксис CSS вполне удобен и привычен. Единственное, чего иногда не хватает, так это переменных.

На первый взгляд, вижу только преимущество вложенности стилей. Время покажет.

Смотрите как хорошо
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. Красота ведь. Используем уже год и довольны.

И я об этом же. Хотя 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;
}

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

А где там PHP? там опять ссылка на руби...

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

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

пс. грамате абучин).

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

=)

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

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

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

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

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

зыы: я не дочитал статью на smg до конца, там есть упоминание о Sass. ;)

Не, технология маст дай имхо
Все надо делать руками и по правилам

>> Для того, чтобы компилировать 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

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

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

Хотя если вшить это в cms получится очень даже, правда процесс вшивание сферическое задротство...

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

Отличная вещь, минус лишь в том, что надо будет долго приспосабливаться, практиковаться чтобы свободно кодить на SASSе, даже опытному верстальщику.

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

ДА, мне тоже что-то типа переменных давно не хватает

Для особо одаренных некоторых:
Плюсы:
+ пользовательские функции(давно пора бы в css ввести)
+ переменные(не всегда)
+ более разбитая структура кода
+ коменты которые не обращаются в css(как здесь не знаю, но в less есть)
+ подключение левых правил, указанных ранее
минусы
- не всегда понятно на кой фиг переменные(особенно для цветов, только код больше)
- огромнейший минус !!!! Просто колоссальный - нельзя строковые переменные вбивать в селекторы
мне было бы намного удобнее так...
- триллион функций для цветов, не знаю, как и для чего столько...(может я как баклан последний не пользовал, не знаю)

Новый комментарий

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

разрешенные теги или посмотреть как будет выглядеть

Имя

Эл. почта используется для Граватарки

Сайт

Имя в Твиттере

Сообщение

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

разрешенные теги или посмотреть как будет выглядеть

Спонсоры

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

Мы в соцсетях

Блогорол

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

Что такое Sass

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

Красота кода

Вложенность

Переменные

Миксины

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

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

Вывод

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

Новый комментарий