SASS

Вложенность

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Еще немного вложенности

.navbar-inverse {
  min-height: 70px;

  .navbar {
    &__nav {
      padding: 25px 15px 0 0;

      li {
        margin-left: 12px;

        a {
          background: none;

          &:hover {
            border: 2px solid red;
          }
        }
      }
    }
  }
}
.navbar-inverse {
  min-height: 70px;
}

.navbar-inverse .navbar__nav {
  padding: 25px 15px 0 0;
}

.navbar-inverse .navbar__nav li {
  margin-left: 12px;
}

.navbar-inverse .navbar__nav li a {
  background: none;
}

.navbar-inverse .navbar__nav li a:hover {
  border: 2px solid red;
}

Импорт

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}

_reset.scss

@import 'reset';

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

base.scss

Обратите внимание: файл называется _reset.scss, т.е. именно с символа "_" начинается. А подключается просто

'reset' файл. Символ "_" и расширение не указываются.

Пример из жизни

@import 'vendor/bootstrap';
@import 'vendor/bootstrap-sprockets';
@import 'vendor/bootstrap-mincer';
@import 'vendor/bootstrap-compass';
@import 'vendor/flex';

@import 'variables';
@import 'layout';
@import 'module';

entry.scss

Миксины

 

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

.box { @include border-radius(10px); }
.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
@mixin border-radius($radius:4px) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }
.box { /* переданное значение = 10px  */
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.box { /* дефолтное значение */
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

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

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}
.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

Наследованные свойства

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}
.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold;
}
.funky {
  font: 20px/24px fantasy {
    weight: bold;
  }
}
.funky {
  font: 20px/24px fantasy;
  font-weight: bold;
}

Операторы

.container { width: 100%; }


article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}
.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

В SASS можно использовать операторы +, -, *, / и %.

Комментарии

/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */

// These comments are only one line long each.
// They won't appear in the CSS output,
// since they use the single-line comment syntax.
/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */

SASS убирает однострочные комментарии. Более того, если комментарий начинается с символа "!", то комментарий останется даже после сжатия.

Переменные

$colorRed: #ff0000;

$mainColor: $colorRed;

main {
  background: $mainColor;
}
main {
  background: #ff0000;
}
$version: "1.2.3";

/* This CSS is generated by My Snazzy
 * Framework version #{$version}. */
/* This CSS is generated by My
 * Snazzy Framework version 1.2.3. */

Переменные (global)

#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}
#main {
  width: 5em;
}

#sidebar {
  width: 5em;
}
p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

Переменные в формате #{...}

p {
  font: 12px/30px;
}

Цвет

darken(hsl(25, 100%, 80%), 30%)   =>   hsl(25, 100%, 50%)
darken(#800, 20%)   =>   #200
  • darken
  • lighten
  • desaturate
  • grayscale
  • mix
  • opacify
  • saturate
  • etc.

@media

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}
.sidebar {
  width: 300px; }
  @media screen and (orientation: landscape) {
    .sidebar {
      width: 500px;
  }
}
@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px;
  }
}

Циклы

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
p {
  color: green;
}

@if

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}

@if

Циклы

@each $animal in puma, sea-slug,
                 egret, salamander {
  .#{$animal}-icon {
    background-image:
      url('/images/#{$animal}.png');
  }
}
.puma-icon {
  background-image:
    url('/images/puma.png'); }
.sea-slug-icon {
  background-image:
    url('/images/sea-slug.png'); }
.egret-icon {
  background-image:
    url('/images/egret.png'); }
.salamander-icon {
  background-image:
    url('/images/salamander.png'); }

@each

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}
.item-6 {
  width: 12em; }

.item-4 {
  width: 8em; }

.item-2 {
  width: 4em; }

@while

Jedi-style

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}

@include firefox-message(".header");
body.firefox .header:before {
  content: "Hi, Firefox users!";
}
$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}
@media screen and
  (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px;
  }
}
#fake-links .link {
  @extend a;
}

a {
  color: blue;
  &:hover {
    text-decoration: underline;
  }
}
a, #fake-links .link {
  color: blue; }
  a:hover, #fake-links .link:hover {
    text-decoration: underline;
  }
}
.parent {
  ...
  @at-root .child { ... }
}
.parent { ... }
.child { ... }

@at-root

SASS

By Serge Zdobnov

SASS

  • 2,109