Основы Sass

SCSS/SASS Блог

Основы Sass

Переменные

SCSS

$font-stack: Helvetica, sans-serif;

$primary-color: #333;

body {

font: 100% $font-stack;

color: $primary-color;

}

CSS

body {

font: 100% Helvetica, sans-serif;

color: #333;

}

Вложенности

SCSS

nav {

ul {

margin: 0;

padding: 0;

list-style: none;

}

li { display: inline-block; }

a {

display: block;

padding: 6px 12px;

text-decoration: none;

}

}
--------------------------------------------------------------------
a {

font-weight: bold;

text-decoration: none;

&:hover {

text-decoration: underline;

}

body.firefox & {

font-weight: normal;

}

}

CSS

nav ul {

margin: 0;

padding: 0;

list-style: none;

}

nav li {

display: inline-block;

}

nav a {

display: block;

padding: 6px 12px;

text-decoration: none;

}
--------------------------------------------------------------------
a {

font-weight: bold;

text-decoration: none;

}

a:hover {

text-decoration: underline;

}

body.firefox a {

font-weight: normal;

}

Фрагментирование

Вы можете создавать фрагменты Sass-файла, которые будут содержать в себе небольшие отрывки CSS, которые можно будет использовать в других Sass-файлах. Это отличный способ сделать ваш CSS модульным, а также облегчить его обслуживание. Фрагмент — это простой Sass-файл, имя которого начинается с нижнего подчеркивания, например, _partial.scss. Нижнее подчеркивание в имени Sass-файла говорит компилятору о том, что это только фрагмент и он не должен компилироваться в CSS. Фрагменты Sass подключаются при помощи директивы @import.

Импорт

Например, у вас есть несколько фрагментов Sass-файлов — _reset.scss и base.scss. И мы хотим импортировать _reset.scss в base.scss.

SCSS

// _reset.scss

html,

body,

ul,

ol {

margin: 0;

padding: 0;

}
--------------------------------------------------------------------
// base.scss

@import 'reset';

body {

font: 100% Helvetica, sans-serif;

background-color: #efefef;

}

CSS

html,

body,

ul,

ol {

margin: 0;

padding: 0;

}

body {

font: 100% Helvetica, sans-serif;

background-color: #efefef;

}

Миксины (примеси)

Некоторые вещи в CSS весьма утомительно писать, особенно в CSS3, где плюс ко всему зачастую требуется использовать большое количество вендорных префиксов. Миксины позволяют создавать группы деклараций CSS, которые вам придется использовать по нескольку раз на сайте. Вы даже можете передавать переменные в миксины, чтобы сделать их более гибкими. Так же хорошо использовать миксины для вендорных префиксов. Пример для transform:

SCSS

@mixin transform($property) {

-webkit-transform: $property;

-ms-transform: $property;

transform: $property;

}

.box { @include transform(rotate(30deg)); }

CSS

.box {

-webkit-transform: rotate(30deg);

-ms-transform: rotate(30deg);

transform: rotate(30deg);

}

Расширение/Наследование

Это одна из самых полезных функций Sass. Используя директиву @extend можно наследовать наборы свойств CSS от одного селектора другому. Это позволяет держать ваш Sass-файл в «чистоте».
Класс-шаблон — особый тип классов, который выводится только при использовании расширения — это позволит сохранить ваш скомпилированный CSS чистым и аккуратным.

SCSS

/* This CSS will print because %message-shared is extended. */

%message-shared {

border: 1px solid #ccc;

padding: 10px;

color: #333;

}

// This CSS won't print because %equal-heights is never extended.

%equal-heights {

display: flex;

flex-wrap: wrap;

}

.message {

@extend %message-shared;

}

.success {

@extend %message-shared;

border-color: green;

}

.error {

@extend %message-shared;

border-color: red;

}

.warning {

@extend %message-shared;

border-color: yellow;

}

CSS

.message, .success, .error, .warning {

border: 1px solid #ccc;

padding: 10px;

color: #333;

}

.success {

border-color: green;

}

.error {

border-color: red;

}

.warning {

border-color: yellow;

}

Математические операторы

Использовать математику в CSS очень полезно. Sass имеет несколько стандартных математических операторов, таких как +, -, *, / и %.

SCSS

.container {

width: 100%;

}

article[role="main"] {

float: left;

width: 600px / 960px * 100%;

}

aside[role="complementary"] {

float: right;

width: 300px / 960px * 100%;

}

CSS

.container {

width: 100%;

}

article[role="main"] {

float: left;

width: 62.5%;

}

aside[role="complementary"] {

float: right;

width: 31.25%;

}

Мы создали простую адаптивную модульную сетку, с шириной в 960 пикселей. Используя математические операторы, мы использовали полученные данные с пиксельными значениями и конвертировали их в процентные, причем без особых усилий.

Вернуться наверх