SCSS шпаргалка

категория: SCSS
Очередная шпаргалка по для меня новой приятной штуке как SCSS, как оказалось он по круче Less, а так как нам надо самое лучшее - то пробуем. Но так как я не верстаю особо, мне оно в общем и не надо, но люблю что-то свеженькое попробовать, так что можете не читать - чисто чтоб побаловаться :) Но если вполне устроит - то буду использовать на всех проектах. Начнемс... Переменные
$font: Helvetica, sans-serif;
body {
  font: 14px $font;
}
Вложенность
nav {
  ul {
    ...
  }
  li {... }
  a {
    ...
  }
}
Модульность
@import 'reset';
если файл назвать _reset.scss то Sass поймет, что это только модуль и его не нужно генерировать в отдельный css файл Примеси
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}
.box { @include border-radius(10px); }
Расширение
.message {
  border: 1px solid #ccc;
}
.success {
  @extend .message;
  border-color: green;
}
в css будет:
.message, .success {
  border: 1px solid #cccccc;
}
.success {
  border-color: green;
}
Операторы
article[role="main"] {
  width: 600px / 960px * 100%;
}
На этом основы закончились, пока мне этого думаю хватит, буду практиковать


blog comments powered by Disqus