sass_study

sass_study

1. Установка
Самый популярный способ испльзования sass - в тандеме с gulp и node.js
Перед началом использования надо убедиться что установлены последние версии оных.
gulp -v
nmp -v
В папке проекта запускаем терминал и выполняем npm init
При создании манифеста-файла (packege.json) можно многое оставить по умолчанию.
Сюда же устанавливаем gulp и gulp-css
npm i --save-dev gulp pulp-sass
В папке проекта создана папка модулей node.js - node_modules
Создаем файл gulpfile.js в корне и прописываем в нем:
var gulp = require('gulp'),
	sass = require('gulp-sass');

gulp.task('sass', function(){
	return gulp.src(['sass/**/*.sass', 'sass/**/*.scss']) // берем исходные файлы
	.pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError)) // компилируем файлы -> в css 
	// outpetStyle: 'expanded' - указываем чтобы на выходе получить развернутый css 
	// еще может быть нестед (вложенный - по умолчанию),
	// компакт - когда селектор и его свойства выводятся в одну строку
	// компрест - сжатый
	.on('error', sass.logError)) - используя.. при возникновении ошибки не придется перезапускать команду выполнения gulpfile и увидим в какой строке sass файла - ошибка
	.pipe(gulp.dest('css')) // указываем куда нужно выгрузить откомпилированные файлы
});

gulp.task('watch', function(){
	gulp.watch(['sass/**/*.sass', 'sass/**/*.scss'], ['sass']);
	// сначала указали за какими файлами надо следить..
	дальше указали что если изменения в файлах были.. то выполняем таск 'sass'
});

gulp.task('default', ['watch']); - к дефолтному таску мы приравниваем таск watch чтобы он у нас выполнялся по умолчанию. Теперь можно запускать не только как gulp watch.. но и просто gulp
8:56
Создаем папки css и sass-(исходники которые будут компилироваться в css)

Два синтаксиса..
Старый вариант: синтаксис отступов и близкий по стилю к css - scss.
Требует очень четкого соответствия отступов.. может вызывать ошибки..
При использование табов и пробелов одновременно, компилятор выдаст ошибку!
Либо испльзуем только табы, либо только пробелы!
От scss также sass различается написанием некоторых функций.
Если надо подключить стороннюю библиотеку написанную с использованием синтаксиса .scss?
то можно подключить этот файл с помощью import не меняя его синтаксис и расширение.
Например так: @import "karousel"
Также можно и в обратной ситуации.
sass позволяет сократить количество написания кода засчет синтаксиса. 
Расширить родительский селектор не создавая нового правила:
----------------------------------------------
body
  color: lightblue
  &:hover
    text-decoration: underline
Эта запись будет скомпилирована в:
body {
  color: lightblue; }
  body:hover {
    text-decoration: underline; }
-------------------------------------------
#main
  color: red
  a
    font-weight: bold
  &-sidebar
    border: 1px solid
Скомпилируется в 
#main {
  color: red; }
  #main a {
    font-weight: bold; }
  #main-sidebar {
    border: 1px solid; }
-------------------------------------------

Составные сущьности могут быть разбиты на вложения, для удобства:

.selector
  margin:
    top: 10px
    bottom: 15px
    left: 20px
    right: 30px

Скопмилируется в : 

.selector {
  margin-top: 10px;
  margin-bottom: 15px;
  margin-left: 20px;
  margin-right: 30px; }

-------------------------------------------

Если несколько элелементов на странице содержат одинаковый набор свойств
Данный базовый набор правил можно оформить ввиде селектора шаблона для использования 
в нескльких местах.
Делается это при помощи селектора @extend

// базовые правила для элемента
%item-base
  display: inline-block
  transition: all .5s ease
  max-width: 320px

// Далее экстендом подключаем этот блок-набор свойств
.item-type-one
  @extend %item-base
  margin-top: 15px

.item-type-two
  @extend %item-base
  margin-top: 25px

 Откомпилируется как
 .item-type-one, .item-type-two {
  display: inline-block;
  ... и прочие наборы правил

-------------------------------------------

Использование пользовательских переменных и функций. Можно генерировать новые селекторы и свойства, использовать канкатенацию и пр.

// переменная
$summ: (10 + 20) / 2
$cn: content

.selector
  margin:
    top: $summ + px
    bottom: 12px + 8px
  background-color: trans + parent
  #{$cn}: "con" + "tent"

$in: интер

.interpol
  content: "#{$in}поляция"

Откомпилируется в:

.selector {
  margin-top: 15px;
  margin-bottom: 20px;
  background-color: transparent;
  content: "content"; }

.interpol {
  content: "интерполяция"; }

Цвета можно складывать и производить другие математические преобразования
преобразования протекают для каждого цвета отдельно Red Green Blue пр. #550506

// операции с цветом
$color1: #440203 + #550506
$color2: #010203 *2
$color3: rgba(180, 0, 0, .75) + rgba(20, 255, 0, .75)
// значения прозрачности не должны отличатся..иначе будет ошибка!

div
  color: $color1
  background: $color2
  border-bottom: 1px solid $color3

  /---- скомпилируется в 
  div {
  color: #990709;
  background: #020406;
  border-bottom: 1px solid rgba(200, 255, 0, 0.75); }

 // если нужно изменить степень прозрачности rgba (альфаканал)
// можно использовать :opasyfy()

$translucent-red: rgba(255, 0, 0, 0.5)
p
  color: opasyfy($translucent-red, 0.3)
  background-color: transparentsize($translucent-red, 0.25)

  /---- скомпилируется в
  p {
  color: opasyfy(rgba(255, 0, 0, 0.5), 0.3);
  background-color: transparentsize(rgba(255, 0, 0, 0.5), 0.25); }

// управление Hex цветом при помощи функции
.selector
  background-color: rgba(#333, 0.75)

/---- скомпилируется в
.selector {
  background-color: rgba(51, 51, 51, 0.75); }


Директивы и правила... @import

Импортировать с помощью @import можно sass scss и css файлы

@import "foo.css"
@import "foo screen"
@import "http://foo.com/bar"
@import url(foo)

При этом все миксины и переменные будут работать в основном файле в который производится импорт. Импорт происходит в обычный css если указаны:
- расширение .css
- в пути присутствуют медиазапросы
- в пути присутствует http
- в пути присутствует url
В таком случае будет произведен обычный импорт файлов как css (файлы загружены не будут!)

Для того чтобы файл (sass или scss) был полноценно импортирован в основной файл sass, необходимо чтобы было прописано его расширение

@import "foo.sass"
@import "foo.scss"

Если импортируем файл css, то не указываем его расширение:

@import "foo" // в таком случае css файл будет полноценно включен в sass файл и скомпилирован

Файлы начинающиеся с подчеркивания называются фрагменты, например: _media.sass
Импортируем такие файлы без нижнего подчеркивания и без расширения: @import "media"

! Импорт происходит в том месте, где мы указываем директиву @import
.selector
  background-color: rgba(#333, 0.75)
  @import "foo"
  - здесь все импортированные стили будут дочерними для родительского селектора .selector


Дитективы и правила @at-root

@at-root - поднимает содержимые в ней правила в корень, отменяя цепочку от родителя

.selector
  background-color: rgba(#333, 0.75)
  //@import "foo"
  @at-root
    .item
      background: #ccc
 - здесь свойство .item поднимется на уровень выше и будет на одном уровне с .selector

 Выражения if()
Использование выражений и функций.. циклов и пр.
$var: 5
.selector
  @if $var >= 5
    content: '>=5'
  @else if $var < 5
    content: '<=5'
  @else
    content: ''

  /----- выведет

.selector {
  content: '>=5'; }

Директива for
Выводит блок со стилями определенное количество раз

@for $i from 1 to 11
  .item-#{$i}
    background-image: url(img/#{$i}.jpg)

выведет 10 правил для классов которые создаст
.item-9 {
  background-image: url(img/9.jpg); }
  ... и т.д.

Если надо пройти включительно последнюю итерацию, пишем through
@for $i from 1 through 11

Если надо пройтись по списку значений а не просто чисел, можно испльзовать @each

@each $name in carousel, block, vertical, reviews, footer
  .section-#{$name}
    background-image: url(img/#{$name}.jpg)

Результат:
.section-carousel {
  background-image: url(img/carousel.jpg); }

.section-block {
  background-image: url(img/block.jpg); }

Директива while

// циклично выводим пока выражение истинно
$i: 7
@while $i > 0
  .item-#{$i}
    width: 1em * $i
  $i: $i - 3

Выведет:

.item-7 {
  width: 7em; }

.item-4 {
  width: 4em; }

.item-1 {
  width: 1em; }


Миксины - блоки sass кода которые могут принимать аркументы (аналог функции)

@mixin border($color)
  border: $color 1px solid

p
  @include border(#333)

@mixin transition($time)
  -webkit-transition: all $time ease
  -moz-transition: all $time ease
  -o-transition: all $time ease
  transition: all $time ease

p
  @include transition(.25s)

Результат:

p {
  border: #333 1px solid; }

p {
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease; }