SCSS — новая порция глазури от Sass

    imageПоследнее время я практически не занимался версткой, и пропустил выход Sass3, в котором реализовано расширение SCSS (Sassy CSS). Это именно расширение для CSS без «искажения» синтаксиса — то есть любой валидный CSS документ является и полностью валидным SCSS документом. В посте я проведу сравнение с уже существующими препроцессорами такими как Sass и Less. О которых уже писалось на хабре: Sass, Less. Но та информация немного устарела: в частности изменился синтаксис Sass.



    Введение


    Самым первым из препроцессоров был создан Sass, многих он напугал своим синтаксисом, хотя бы тем, что правила указывались с двоеточиями в начале. Это была своеобразная дань типу Symdol в Ruby, но ведь CSS код пишут не программисты на Ruby. Поэтому группой энтузиастов был создан Less, возможности Sass (Перменные, Mixins, Наследование, Арифметика) + нативный синтаксис. Позже команда Sass изменило синтаксис и создала SCSS. Также как и Less это был язык с синтаксисом CSS и возможностями Sass.

    Ниже приведен список возможностей и их реализация на каждом из препроцессоров.

    Переменные


    Sass

    $blue: #3bbfce
    $margin: 16px
    .border
      padding: $margin / 2
      margin: $margin / 2
      border-color: $blue

    Less

    @brand_color: #4D926F;
    #header {
      color: @brand_color;
    }

    SCSS

    $blue: #3bbfce;
    $margin: 16px;
    .border {
      padding: $margin / 2;
      margin: $margin / 2;
      border-color: $blue;
    }

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

    Наследование


    CSS

    table.hl {
      margin: 2em 0;
    }
      table.hl td.ln {
        text-align: right;
      }

    Less/SCSS

    table.hl {
      margin: 2em 0;
      td.ln {
        text-align: right;
      }
    }

    Sass

    table.hl
      margin: 2em 0
      td.ln
        text-align: right

    По моему, наследование это здорово.

    Mixins


    CSS

    Подмешывание в рамках CSS — это просто создание класса который будет присвоен нескольким HTML элементам.
    Пример с clearfix:

    .clearfix:after {
      content: ".";
      display: block;
      clear: both;
      visibility: hidden;
      line-height: 0;
      height: 0;
    }
    .clearfix {
      display: inline-block;
    }
    html[xmlns] .clearfix {
      display: block;
    }
    * html .clearfix {
      height: 1%;
    }

    <div class="clearfix">

    Less

    .rounded_corners (@radius: 5px) {
      -moz-border-radius: @radius;
      -webkit-border-radius: @radius;
      border-radius: @radius;
    }
    #header {
      .rounded_corner;
    }
    #footer {
      .rounded_corners(10px);
    }

    SCSS

    @mixin rounded_corners ($radius) {
      -moz-border-radius: $radius;
      -webkit-border-radius: $radius;
      border-radius: $radius;
    }
    #footer {
      @include rounded_corners(10px);
    }


    Sass

    @mixin rounded_corners ($radius)
      -moz-border-radius: $radius
      -webkit-border-radius: $radius
      border-radius: $radius
    #footer
      @include rounded_corners(10px)


    Как мы видим в mixin можно передавать параметр, что порой может быть очень полезно.

    Арифметика


    Less

    @the-border: 1px;
    #header {
      border-left: @the-border;
      border-right: @the-border * 2;
    }


    SCSS

    $the-border: 1px;
    #header {
      border-left: $the-border;
      border-right: $the-border * 2;
    }


    Sass

    $the-border: 1px
    #header
      border-left: $the-border
      border-right: $the-border * 2


    Это самый примитивный пример. Я думаю у вас уже есть несколько вариантов где это можно применить.

    Вывод


    Как мы видим синтаксис Less, SCSS схож с синтаксисом CSS, и в этих препроцессорах лишь ненавязчиво предоставляются дополнительные плюшки, но немного по разному. Например переменные и mixins объявляются разными способами. В свою очередь Sass и Less сжожи между собой по синтаксису только в Sass блоки правил селектора формируются отступами, а не кавычками, а также нет точек с запятой в конце строк. Я считаю, что это отличная замена, она позволяет экономить по строке на каждом блоке.

    Препроцессоры распространяются в виде джемов для Ruby.

    SCSS, Sass
      gem install haml

    Less
      gem install less
    Share post

    Similar posts

    Comments 37

      0
      Была бы полезной возможность доступа к свойствам определенного селектора: font-size: #header.font-size
      +4
      Мне больше по душе синтаксис SASS (обязательные кавычки — это оскорбление от синтаксического анализатора, компьютер сам должен догадываться, что перевод строки — тоже разделение команд). Но SCSS/SASS/LESS — это реально удобный инструмент, упрощающий вёрстку.
        0
        Автору тоже, информация 100% ;)
        0
        C sass как-то еще не успел плотно поработать, а вот haml просто великолепен, после него erb шаблоны читать противно, хотя привык не сразу
        • UFO just landed and posted this here
            +2
            SCSS как и Sass распространяется с haml
            +3
            Картина получается такая: программисты визжат от удовольствия, а верстальщики до сих пор не понимают этого безумия. Я из последних.
              +2
              Странно – у нас верстальщики визжат. Хотя наверное вы много поработали c Sass что бы делать такие выводы.
                +3
                Не могу сказать много, но достаточно для того, чтобы сделать выводы. Область применения этой штуки крайне узкая. Я о тех случаях, когда она помогает работе, а не мешает.

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

                А остальные делают красоту ради красоты — расставляют 4-5 цветов по переменным и считают, что это круто повлияло на эффективность работы.
                  0
                  Вы давите на то, что смысл Sass в том, что-бы определить переменные с цветами. Вы удивитесь но это одна из самых редко используемых функций Sass.

                  Смысл в читаемости кода и скорости написания оного.

                  Вместо растущего при каждом уровне вложенности CSS:
                  #some-long-id-name {
                    background: red;
                    color: green;
                  }
                  
                  #some-long-id-name .other-really-long-class-name {
                    font-style: italic;
                  }
                  
                  #some-long-id-name .other-really-long-class-name blockquote {
                    border-left: 2px solid black;
                  }


                  Чистый Sass:
                  #some-long-id-name
                    background: red
                    color: green
                  
                    .other-really-long-class-name
                      font-style: italic
                  
                      blockquote
                        border-left: 2px solid black
                    +3
                    Я не давлю, я просто рассказал о том, как это дело используют знакомые мне верстальщики. Для повышения читаемости есть и другие способы:

                    #some-long-id-name {
                        background:red;
                        color:green;
                        }
                        #some-long-id-name
                        .other-really-long-class-name {
                            font-style: italic;
                            }
                            #some-long-id-name
                            .other-really-long-class-name
                            blockquote {
                                border-left: 2px solid black;
                                }

                    Я об этом недавно рассказывавал, надеюсь скоро смонтировать видео:
                    CSS-менеджемент. Три года спустя (осторожно, трафик)
                      0
                      Я смотрел ваше выступление, но поправде многим лучше не стало.

                      А ориентироваться только на знакомых верстальщиков использующих Sass, это как-то неправильно.
                        +3
                        Личный опыт + опыт знакомых тебе людей (адекватность которых ты можешь оценить) — вот вам и представление о любой технологии.

                        В общем, повторюсь, я не давлю — просто не вижу смысла в этих заморочках, кроме как описанных случаях.
                          0
                          Я не давлю на то, что вы давите :-)

                          Простите, но заморочки это множественное повторение и точки с запятой.

                          Я просто не понимаете почему вы считаете удобство и безболезненная сопровожаемость – заморочки.

                          Стало сложней? Нет. Проще? В разы.

                          Что главное дешевле.
                        0
                        По сути этот пример — тот же Sass, только с кучей не несущих слысловой нагрузки символов и повторений
                        +1
                        …а если уровень вложенности у вас вырос больше, чем до трёх — значит вы что-то делаете не так. Тот же яндексовский BEM в принципе не подразумевает вложенности селекторов.
                          0
                          И к слову говоря, большая вложенность селекторов отрицательно влияет на скорость рендера страницы. Так что этим лучше не увлекаться.
                          +3
                          использование подобных штук в курпных проектах мне показалось ацким адом по двум причинам:
                          1) практически полное отсутствие поддержки со стороны наиболее популярных IDE (eclipse, netbeans, idea, phpstorm), а в крупных проектах без таких IDE никуда. Фактически редактирование идет в блокноте. Все IDE-расширения и плагины, которые я видел для SASS крайне убоги даже в плане автодополнения кода (автодополнения переменных я не встретил нигде). Возможно сейчас ситуация поправилась, но до уровня редактирования CSS в IDE SASS и компания врядли доберется.
                          2) про дебаг css-кода в фаербаге можно забыть. То что вы увидете в фаербаге (стандартный css) будет в корне отличаться от файла SASS, который вы редактируете: строки будут разные, иерархия селекторов другой. Поможет только поиск и то, если не используется вложенность. Когда мне по наследству достался большой (но кривой) проект написанный с использованием SASS, я не придумал ничего лучше, чем заменить все SASS на CSS (копированием из браузера), что бы можно было работать с фаербагом.
                          Вобщем безумия этого я тоже не понимаю. CSS довольно гибкий и вполне достаточный даже для крупных проектов, а его интеграция с IDE и др. редакторами делает его в разы удобнее любого SASS
                            0
                            1) Vim, TextMate. Emacs
                            2) https://addons.mozilla.org/en-US/firefox/addon/103988/
                              0
                              Кстати, верные замечания. Нормальной поддержки LESS в IDEA даже не обещают, хотя в RubyMine вроде бы уже сделали.
                                0
                                согласен. больше всего бесит именно неудобство поиска в уже готовом less/sass. то ли ты нашел по номеру строки то ли ты ищешь поиском в деревьях. похоже что идет less лесом.
                                  0
                                  Забавно читать подобные комментарии в начале 2018 года :-)
                              +3
                              А не об этом ли «безумии» вы мечтали? pepelsbey.net/2008/02/css-variables/
                                0
                                Я ж не говорю, что это крайне бесполезно. Но не настолько ценно, чтобы идти на другие проблемы, с этим связанные (речь о Sass).
                                +3
                                Вадим, я очень советую взять node.js, плагин less.js и попробовать писать на less. Это действительно удобно для вёрстки.
                                Часто используемые модули выносятся в миксины и собираются в собственную библиотеку, а всё что нужно дописать — дописывается быстрее чем в чистом CSS (для меня основная причина этого — вложенные селекторы).
                                +3
                                По-моему, вероятность запутаться в таком синтаксисе еще больше.
                                  0
                                  Активно развивается порт Less под .NET: dotless.
                                    0
                                    Мне кажется что less.js будет актуальнее, тем более что его создаёт и поддерживает cloudhead — автор оригинального less. Думаю, что с выполнением node.js-скриптов на .net проблем нет :)
                                      +1
                                      Зато dotless будет роднее для asp.net, чем less.js + node.js + mingw :)
                                      Для обработки less-файлов у него есть следующие фишки:
                                      — библиотечка для вызова препроцессора из .net кода;
                                      — HTTP handler для получения стилей на лету;
                                      — отдельный бинарь для формирования стилей, например, при компиляции релиза проекта.
                                        0
                                        Ок, тогда удачи этому проекту :)
                                    +1
                                    возможность использовать переменные, конечно, радует. но вот чисто эстетически css мне больше по душе.
                                      0
                                      Фантазии у них не хватает как можно расширить css.
                                        0
                                        есть мнение что все относительно, кому нравится то все равно будет ставить и юзать haml, кому не нравится\не пишет на RoR не будет. Остальное холивар
                                          0
                                          Хочу! Заверните две пожалуйста.
                                          Действительно удобный способ. Привыкать всего ничего, а время экономит в разы, как при создании, так и в дальнейшей работе с.

                                          Only users with full accounts can post comments. Log in, please.