delphinpro

# SCSS. Style guide

## Formatting
* Four (4) space indents, no tabs.
* 80 character wide columns.

## CSS rules
* Opening brace ({) placement end of line.
* One space before opening brace.
* Closed brace (}) placement on new line.

delphinpro

#Волшебный Eloquent. ##Дисклеймер Данный материал абсолютно не претендует на уникальность, и не является попыткой открыть для кого-то Америку. Все ниже изложенное (прямо или косвенно) можно легко почерпнуть из официального мануала. А для чего же оно тогда написано? Попытка подать информацию в чуть более развернутом виде, систематезировать собственные знания, и снять острый приступ графоманства. Если это вдруг окажется кому-то полезным, то мне будет приятно.

##Введение TL;DR
Так уж сложилось, что слоняясь по "интернетам", в поисках сообщников в ограблении банка единомышленников в изучении framework'a Laravel, я забрел в чат хоть и праздно прозябающего, но (стараниями Алексея) живого и дружелюбного Cообщества, и плотно там осел. А через какое-то время заметил, что отвечаю на чьи-то вопросы гораздо чаще, чем задаю их. Хотя мой замысел был иной: изначально, я хотел добраться до "знающих людей" и, как вампир, высосать через чат все и

delphinpro

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"] {
  -moz-appearance: textfield;
}

delphinpro

// example filename format:
// ../fonts/roboto/roboto_600-semibold-italic.ttf
// ../fonts/roboto/roboto_400-regular.ttf
// ../fonts/roboto/roboto_100-thin-italic.ttf
@mixin addExternalFont($name, $folder, $weight: 400, $style: normal) {
    $ver: 1;
    $weights: (
            100: thin,
            200: extralight,
            300: light,

delphinpro

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  &::-ms-expand { display: none; }
}

delphinpro

<div class="counter">
  <div class="counter-item">
    <div class="counter-digits days"></div>
    <div class="counter-label">дней</div>
  </div>
  <div class="counter-item">
    <div class="counter-digits hours"></div>
    <div class="counter-label">часов</div>
  </div>
  <div class="counter-item">

delphinpro

@import "_font.scss";

html {
  font-size: percentage($_FONT_SIZE_ROOT / 16px);
}

.foo {
  @include font(23px, 30px, bold);
}

delphinpro

$(function () {
    if (location.hash == '#dev') {
        $('body').addClass('dev').attr('id', 'dev');

        $btn = $('<button/>', {
            text: 'Toggle'
        }).css({
            position: 'fixed',
            right   : 0,
            bottom  : 0,

delphinpro

/**
 * File input
 */
$(function () {
    "use strict";

    var file_api = ( window.File && window.FileReader && window.FileList && window.Blob ) ? true : false;

    $('.form-control-upload').each(function () {
        var input = $('.form-control-upload__element', this);

delphinpro

/// Адаптивный размер шрифта.
/// В параметрах миксина указывается минимальный и максимальный размеры шрифта.

@function vw($pixel, $defaultWidth: 1920px) {
    @return $pixel * (100 / $defaultWidth) * 1vw;
}

@function calcVw($minPixel, $pixel) {
    $addPixel: vw($pixel - $minPixel);
    @return #{"calc(#{$minPixel} + #{$addPixel})"};