Sass в примерах, основные синтаксические конструкции

tsumbaluk.in.ua13 Октябрь 2017

Зачем нужны css препроцессоры

Сразу хочу сказать что использую sass практически с самого начала своей карьеры front-end разработчика. Но я как и многие коллеги по цеху задавался вопросом, зачем нужен sass, less или scss препроцессоры если css так понятен и прост. И вообще писать стили так весело и интересно зачем что-то усложнять. Хотеться сказать, я еще никогда так не ошибался). Тот кто хотя бы раз делал что-то более сложное landing page, знает css может разрастись до сумасшедших размеров, который поддерживать стает просто не возможно, а единственным инструментом у нас в распоряжении будет резать его на небольшие файлы и пытаться как то этим управлять. К счастью эти темные времена канули в лету вместе с появлением препроцессоров. Появилась возможность писать модульные стили и импортировать куски для формирования необходимых файлов, появились переменные, наследование, функции и мой фаворит упрощенный синтаксис.

Почему sass

Как я уже писал выше моей любимой фишкой препроцессора является упрощенный синтаксис, как не странно отсутствие фигурных скобок и точек с запятой очень здорово экономит время. А похвастаться такой фишкой может как раз sass. Так же вложенные селекторы, которые опять-таки укорачивают код и экономят ваше время. Вложенные стили есть и у других препроцессоров, но у sass один нюанс он чувствителен к табуляции. По началу это будет скорее напрягать, но в итоге приучит вас скрупулезно относиться к форматированию кода и это касается не только стилей, но и html, javaScript.

Как использовать sass

Браузер не понимает не один из препроцессоров и sass не исключение, поэтому написанный вами код все же нужно превратить в старый добрый css. Есть несколько возможных вариантов. Первым и самым лучшим, как по мне, является использование gulp для компиляции sass и минимизации css подробнее здесь. Но если вы новичок то для вас есть более простой способ, дєсктопные программы отслеживающие файлы и на ходу компилирующие их в css. В свое время я с этого и начинал, эти программы я протестировал, они бесплатны и просты в использовании. Ниже, по моему мнению, несколько самых удачных решений.


Вложенные стили

Ниже пример из обычного css

ul.navigation li{
    display: inline-block;
    vertical-align: middle;
}
ul.navigation li a{
    position: relative;
    display: block;
    line-height: 30px;
}
ul.navigation li a:before{
    position: absolute;
    content: '';
    width: 100%;
    height: 1px;
}

Тот же код в sass. Особенностью является чувствительность к табуляции любой пробел приведет к ошибке компилляции, так что будьте внимательны.

ul.nav li
    display: inline-block
    vertical-align: top
        a
            position: relative
            display: block
            line-height: 30px
            &:before
                position: absolute
                content: ''
                width: 100%
                height: 1px

Переменные sass

Создание переменных начинается со знака доллара, как в языке php, далее название и значение. Все переменные я выношу в отдельный файл "vars.sass" или "theme.sass" далее, на поздних этапах верстки, такой подход помогает очень быстро изменять цветовую схему front-end. Или генерировать несколько новых просто изменяя значения цветов.

$black: #111111
$portfolio: #FFBC24
$green: #009788
$textColor: #666666
$fontBase: 14px
$fontLarge: 22px
$fontSmall: 10px

Пример использования переменных

.label
    color: $textColor
    font-size: $fontSmall
    text-align: left

Подключение внешних sass файлов

У вас уже есть "vars.sass" для доступа ко всем переменным, необходимо внедрить его в основной файл стилей скажем "main.sass". Так же если вы создали отдельно стили для хедера подключаем их вначале "main.sass"

@import "_vars.sass"
@import "_mixins.sass"
@import "_header.sass"

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

Очень мощная вещь, позволяющая использовать повторно повторяющиеся участки кода. Ниже пример из реально проекта, создание градиента и псевдо элементов before, after. Кстати обратите внимание можно комбинировать @extend и переменные, что не может не радовать)

%gradient
	background: $portfolio
	background: -moz-linear-gradient(left, $portfolio 0%, $portfolio 100%)
	background: -webkit-linear-gradient(left, $portfolio 0%,$portfolio 100%)
	background: linear-gradient(to right, $portfolio 0%,$portfolio 100%)
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=$portfolio, endColorstr=$portfolio,GradientType=1 )
%before
    position: absolute
    content: ''

Пример использования наследования в sass

.label:before
    @extend %before
    @extend %gradient
    top: 0
    left: 0
    width: 50px
    height: 50px

Миксины @mixin

Скажу честно сейчас использую редко, раньше с их помощью прописывал вендорные префиксы к новым css3 свойствам сейчас этим занимается gulp.

@mixin border-radius($radius)
	-webkit-border-radius: $radius
	-moz-border-radius: $radius
	-ms-border-radius: $radius
	border-radius: $radius
@mixin transition-delay($delay...)
	-moz-transition-delay:    $delay
	-o-transition-delay:      $delay
	-webkit-transition-delay: $delay
	transition-delay:         $delay

Пример использования @mixin

.label
    @include border-radius(5px)

Циклы в sass

Очень мощная вещь, рекомендую разобраться и использовать экономит кучу времени.

Цикл @for

ul.ruler
    li
        position: absolute
        bottom: 0px
        height: 20px
        background-color: $orange
    $elements: 10;
    @for $i from 0 to $elements
        li:nth-child(#{$i})
            left: $i*10+%

Цикл @each

.tile
    $list: bilberry, blueberry, cherry, honey, mint, pistachio
    @each $macaroon in $list
        &.#{$macaroon}
            background-image: url("../images/macaroon-#{$macaroon}.png")

Условный оператор @if

Пример ниже немного сложнее предыдущих, я специально хотел продемонстрировать как комбинируя синтаксические конструкции sass можно укоротить очень объёмный css код. Так что если вы внимательно все прочитали и разобрались, у вас не должно возникнуть проблем. Ну и немного объясню что здесь происходит. К классу .tile мы применили: @mixin transition, создали переменную $list, запустили цикл @each и внутри цикла сделали проверку если хотя бы один элемент в массиве не равен true тогда вместо картинки присвоить ему другой класс и другие стили.

.tile
  background-position: 50% 50%
  @include transition(all 0.5s)
  $list: bilberry, blueberry, cherry, honey, mint, pistachio, false
  @each $macaroon in $list
    @if $macaroon
      &.#{$macaroon}
        background-image: url("../images/macaroon-#{$macaroon}.png")
    @else
      &.hidden
        width: 20px!important
        height: 20px!important
        background-color: $danger

Структура стилей типового проекта

Так организована моя стартовая сборка для верстки, содержимое файлов можно посмотреть тут.

---sass
--- _vars.sass
--- _mixins.sass
--- _fonts.fass
--- _forms.sass
--- _header.sass
--- _footer.sass
--- main.sass

Также ниже вы найдете небольшой пример того как с помощью цикла можно реализовать красивую анимацию. Хочу отметить написать подобный код в ручную с помощью css практически невозможно.

Результат

See the Pen Particles.js by Alexander Tsymbaluk (@rodan8888) on CodePen

Новое в блоге

Бесплатный хостинг!
tsumbaluk.in.ua || 29.06.2017

Бесплатный хостинг!

e2e тестирование приложений. Используя Protractor
tsumbaluk.in.ua || 30.04.2017

e2e тестирование приложений. Используя Protractor

Modx Revo multilanguage babel
tsumbaluk.in.ua || 05.03.2017

Modx Revo multilanguage babel

Node package manager publish package
tsumbaluk.in.ua || 11.02.2017

Node package manager publish package

Modx перенос на сервер или туда и обратно
tsumbaluk.in.ua || 01.11.2016

Modx перенос на сервер или туда и обратно

Gulp инструмент для удобной и быстрой front-end разработки!
tsumbaluk.in.ua || 05.10.2016

Gulp инструмент для удобной и быстрой front-end разработки!