Sass scss

                                // Импорм без нижнего слеша и без расширения
@import 'config';


// Переменная
$grey: #333;

// Map
$theme-colors: (
    primary: #ccc,
    white: #fff,
    black: #000
);

// Получить значение map
color: map-get($theme-colors, primary);


math.div(100px, 5); // Операция деления


// Миксины
@mixin link() {
	a {
		color: #ccc;
	}
}
// Использование миксина
.test {
	@include link(); // Имя миксина
}

@mixin radius($radius: 5px) {
	border-radius: $radius;
}

// Использование в миксине тегов
@mixin tag($tag: 'a') {
	#{$tag} {
		color: #ccc;
	}
}

@mixin radius($shadow...) { //... означает что можно писать несколько параметров через запятую (например у тени) и они будут приняты как один параметр
	box-shadow: $shadow;
}

// Border-radius
@mixin bdrs($bdrs: $border-radius) {
  -webkit-border-radius: $bdrs;
  -moz-border-radius: $bdrs;
  border-radius: $bdrs;
}


// Transition
@mixin trs($args: 0.2s) {
  @each $pref in -webkit-, -moz-, -ms-, -o- {
    #{$pref + transition}: $args;
  }
  transition: $args;
}


@mixin apply-li {
	li {
		@content; // Означает, что стили будут применяться к вложенному тегу li
	}
}


// Миксин медиазапроса breakpoint
@mixin large-screen() {
	@media only screen and (max-width: 960px) {
		@content;
	}
}

// Вызов миксина для медиазапроса
p {
	font-size: 14px;
	@include large-screen() {
		font-size: 13px;
	}
}


@mixin google-font-load($font: Roboto) {
	@import url('https://fonts.googleapis.com/css?family=#{$font}:300,400,700'); // Миксин для шрифтов
}


h1 {
	color: darken(#333, 10%); // Затемняем цвет
	background-color: lighten(#ccc, 10%); // Осветляем цвет
}


// Функции
@function sum($from, $to) {
	@return $from + $to;
}

@function px-to-em($px, $context: 16px) {
	@return ($px / $context) * 1em;
}
h1 {
	margin: px-to-em(30px);
}


// Если не известно, что передаётся px или ещё что-то, то можно сбрость единицы измерения
@function strip-value($value) {
	@return $value / (($value * 0) + 1);
}
h1 {
	margin: pstrip-value(30px) * 1px;
}


// Наследовать класс
.error {
	color: red;
}
.critical-error {
	@extend .error;
	font-weight: bold;
}


// Пути
$image_dir: 'images/web/';
$page: 12;
.some 
{ 
  background-image: url($image_dir + 'pen.gif'); 
  &:before {
  	content: "Страница #{$page}!";
  }
}


// Не компилируются
%no-compile {
	color: #ccc;
}
h1 {
	@extend %no-compile;
}


// Условия (можно 3 <= 5)
$theme: theme-1;
body {
	@if $theme == theme-1 {
		color: red;
	} @else if $theme == theme-2 {
		color: blue;
	} @else {
		color: green;
	}
}


// Поменять контент для темы 1
@mixin theme-1 {
	background-color: #fff;
	@if $theme == theme-1 {
	@content; // Означает, что к миксину можно добавить дополнительные стили
	}
}
body {
	@include theme-1 {
		font-size: 20px; // Здесь может быть множество дополнительных стилей, т.к. в миксине задали @content 
	}
}


// Циклы
@for $i from 1 through 12 {
	.col-xs-#{$i} {
		width: $i * 2em;
	}
}

$people: (vanya, petya, igor);
@each $person in $people {
	.#{$person}-profile {
		background-image: url('img/#{$person}.jpg');
	}
}

$fonts: (tiny: 8px, medium: 10px, large: 13px); 
@each $name, $value in $fonts {
	.#{$name} {
		font-size: $value;
	}
}

$i: 1;
@while $i <= 10 {
	.picture-#{$i} {
		width: $i * 15%;
	}
	$i: $i * 2;
}


// Классы для отступов
$offsetsQty: 5; // Кол-во классов
$offsetsStep: 10; // Шаг между классами
$offsetUnit: px; // Единицы измерения
$offsets: (margin, padding);
$offsetSizes: (top, right, bottom, left);

@each $offset in $offsets {

  @each $size in $offsetSizes {

    @for $i from 1 through $offsetsQty {

      // Определим букву
      $letter: x;
      @if $size == top {
        $letter: t;
      } @else if ($size == right) {
        $letter: r;
      } @else if ($size == bottom) {
        $letter: b;
      } @else if ($size == left) {
        $letter: l;
      }

      @if $offset == margin {
        .m#{$letter}-#{$i} {
          #{$offset}-#{$size}: #{$i * $offsetsStep}#{$offsetUnit};
        }
      } @else if ($offset == padding) {
        .p#{$letter}-#{$i} {
          #{$offset}-#{$size}: #{$i * $offsetsStep}#{$offsetUnit};
        }
      }
    }
  }
}


// Цвет иконок .fill-color
$colors: map-merge(
	(
        'white': $white,
        'primary': $primary,
        'secondary': $secondary,
        'success': $success,
        'info': $info,
        'warning' : $warning,
        'danger': $danger,
        'light': $light,
        'dark': $dark,
        'black': $black
	),
	$theme-colors
);
@each $color, $value in $theme-colors {
	.fill-#{$color} {
		fill: $value;
	}
}
Список