О нас
Разработчикам
Заметки
Переводчик
Транслитератор
Сравнить текст
Генератор пароля
Ip и информация
Создать картинку Webp
En
О нас
Разработчикам
En
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; } }
Список
Loading...