working on it ...

Filters

Explore Public Snippets

Sort by

Found 3,709 snippets

    public by maholtz  1523  0  5  0

    Wert einer Zelle relativ zur aktuellen Zelle

    Mit der folgenden Formel kann in Google Tabellen ein Wert aus einer anderen Zelle verwendet werden, die um X-Zeilen und Y-Spalten von der aktuellen Zelle versetzt sind.
    // ROW() Gibt die aktuelle Zeile zurück
    // COLUMN() die aktuelle Spalte zurück, allerdings als Zahl, nicht als Buchstaben
    //
    // Der Wert der gewünschten Zelle, die also eine bestimmte Anzahl
    // an Zeilen und Spalten versetzt ist, kann entsprechend mit 
    // ROW()-2 und COLUMN()-4 gewählt werden
    // 
    // via concatenate wird ein Sting in der Form "R41C4" erzeugt,
    // die Schreibweise kann dann an die Funktion indirect übergeben 
    // werden (Parameter FALSE!) und gibt dann den Wert aus.
    //
    // Der Wert kann dann weiter verarbeitet werden.
    indirect(concatenate("R";ROW()-2;"C";COLUMN()-4);FALSE)

    public by JKCPR  2245  2  5  1

    Matching Height - using CSS @element query

    A simple elegant solution to matching element heights using the @element query.
    //  Some html setup required
    /*
        <div id=thing1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, temporibus consequuntur velit dolor! Eos animi molestias  found here <a href="http://codepen.io/tomhodgins/pen/yadeXV"> thanks Tommy </a>aliquid eum error officiis vel et saepe a facilis, voluptate dignissimos nam assumenda, deleniti.</div>
        <div id=thing2>This one doesn't have as much text as id=thing1… so it's set to 100eh, or 100 element height units for #thing1, which makes it the same height.</div>
    */
    
    div {
      margin: 1em 0;
      width: 50%;
      float: left;
      color: black;
      background: lime;
    }
    #thing2 {
      background: red;
    }
    @element '#thing1' {
      #thing2 {
        height: 100eh;
      }
    }

    public by JKCPR  2977  1  5  1

    @each Sass Directive - processing icons

    A nice DRY approach to writing your huge icon collection into stylesheets
    // @each Sass Directive
    $icon-names: (twitter '\e004' ), (facebook '\e005' ), (gplus '\e006' );
    
    %ico-font-base {
        font-family: 'ico-fonts';
        speak: none;
        font-style: normal;
        font-weight: normal;
        line-height: 1;
        text-transform: none;
        
        //Better Font Rendering
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    
    @each $icon-name in $icon-names {
        .icon-#{nth($icon-name, 1)}:after {
            @extend %ico-font-base;
            content: nth($icon-name, 2);
        }
    }        

    public by JKCPR  3089  5  5  1

    SCSS button power @mixin

    one $color variable generates all buttons by @mixin and color @functions also leverages %placeholders and %placeholder-selectors
    //core values
    $font-size:16;
    $primary: #0085B7;
    $success: adjust_hue($primary, 260);
    $warning: saturate(adjust_hue($primary, 188), 43);
    $alert: lighten(saturate(adjust_hue($primary, 162), 12), 1);
    
    // function
    @function em($target, $context:$font-size){
      @return ($target/$context) * 1em;
    }
    
    //!default values
    $button-colour: $primary !default;
    $button-text-color: white !default;
    $button-line-height: 32 !default;
    $button-border-radius: 3 !default;
    $button-padding: 30 !default;
    $button-font-size: 24 !default;
    $button-weight: bold !default;
    
    //the btn mixin
    @mixin default-button($color: $button-text-color,
      $line-height: $button-line-height,
      $radius: $button-border-radius,
      $padding: $button-padding,
      $font-size: $button-font-size,
      $weight: $button-weight){
      
      color: $color;
      line-height: em($line-height);
      border-radius: em($radius);
      padding: 0 em($padding);
      font-size: em($font-size);
      font-weight: $weight;
    }
    
    @mixin flat-button($color: $button-color){
      $highlight-color: lighten($color, 50%);
      $shadow-color: grayscale(transparentize($color, 0.1));
    
      background-color: $color;
      border: 1px solid darken($color, 10%);
      text-shadow: 0px 1px 1px darken($color, 20%);
      box-shadow: 0 em(2) em(6) 0 $shadow-color;
      &:hover{
        background-color: darken($color, 5%);
        text-shadow: 1px 1px 1px darken($highlight-color, 5%);
      }
    }
    
    //placeholder selector
    %default-button{
      @include default-button;
    }
    .primary{
      @extend %default-button;
      @include flat-button($primary);  
    }
    .success{
      @extend %default-button;
      @include flat-button($success);
    }
    .warning{
      @extend %default-button;
      @include flat-button($warning);
    }
    .alert{
      @extend %default-button;
      @include flat-button($alert);
    }

    public by ivanov-yordan  2400  0  3  0

    Font-Face

    Font-Face: font-face.scss
    / Mixin
    @mixin font-face($name, $url) {
      @font-face {
    	font-family: #{$name};
    	src: url("#{$url}.eot");
    	src: url("#{$url}.eot#iefix") format("embedded-opentype"),
    		url("#{$url}.ttf") format("truetype"),
    		url("#{$url}.svg##{$name}") format("svg"),
    		url("#{$url}.woff") format("woff");
     
    	@content;
      }
    }
     
    // Usage
    @include font-face("icons", "../fonts/icons/iconfont");
     
    // Result
    @font-face {
    	font-family: icons;
    	src: url("../fonts/icons/iconfont.eot");
    	src: url("../fonts/icons/iconfont.eot#iefix") format("embedded-opentype"), 
    		url("../fonts/icons/iconfont.ttf") format("truetype"), 
    		url("../fonts/icons/iconfont.svg#icons") format("svg"), 
    		url("../fonts/icons/iconfont.woff") format("woff");
    }
    
    

    external by Nicoxxx  6  0  1  0

    Spacing utility

    Spacing utility : spacer.scss
    $vals: 768px, 992px, 1200px;
    $breaks: sm, md, xl;
    
    $base-space: 0.25rem;
    
    @for $i from 0 through 4 {
      .p-#{$i} {
        padding: ($i * $base-space);
      }
      .pt-#{$i} {
        padding-top: ($i * $base-space);
      }
      .pb-#{$i} {
        padding-bottom: ($i * $base-space);
      }
      .pr-#{$i} {
        padding-right: ($i * $base-space);
      }
      .pl-#{$i} {
        padding-left: ($i * $base-space);
      }
      .px-#{$i} {
        padding-left: ($i * $base-space);
        padding-right: ($i * $base-space);
      }
      .py-#{$i} {
        padding-top: ($i * $base-space);
        padding-bottom: ($i * $base-space);
      }
    }
    
    @for $i from 0 through 4 {
      .m-#{$i} {
        margin: ($i * $base-space);
      }
      .mt-#{$i} {
        margin-top: ($i * $base-space);
      }
      .mb-#{$i} {
        margin-bottom: ($i * $base-space);
      }
      .mr-#{$i} {
        margin-right: ($i * $base-space);
      }
      .ml-#{$i} {
        margin-left: ($i * $base-space);
      }
      .mx-#{$i} {
        margin-left: ($i * $base-space);
        margin-right: ($i * $base-space);
      }
      .my-#{$i} {
        margin-top: ($i * $base-space);
        margin-bottom: ($i * $base-space);
      }
    }
    
    

    external by kosmala007  3  0  1  0

    Bootstrap 4 additional gutter settings 20px, 10px, 0px

    Bootstrap 4 additional gutter settings 20px, 10px, 0px: bootstrap-gutters.scss
    // 20px gutters between collumns 
    .row.gutter-20 {
      margin-right: -10px;
      margin-left: -10px;
    
      .row.gutter-20>.col,
      .row.gutter-20>[class*="col-"] {
        padding-right: 10px;
        padding-left: 10px;
      }
    }
    
    // 10px gutters between collumns
    .row.gutter-10 {
      margin-right: -5px;
      margin-left: -5px;
    
      >.col,
      >[class*="col-"] {
        padding-right: 5px;
        padding-left: 5px;
      }
    }
    
    // No gutters
    .row.no-gutter {
      margin-right: 0px;
      margin-left: 0px;
    
      >.col,
      >[class*="col-"] {
        padding-right: 0px;
        padding-left: 0px;
      }
    }
    
    

    external by mio-U-M  3  0  1  0

    擬似要素のテンプレで書くところを省略するためのmixin

    擬似要素のテンプレで書くところを省略するためのmixin: before-and-after-mixin.scss
    @mixin simple-before {
      &::before {
        content: '';
        @content;
      }
    }
    
    @mixin simple-after {
      &::after {
        content: '';
        @content;
      }
    }
    
    @mixin solid-before {
      &::before {
        display: block;
        content: '';
        @content;
      }
    }
    
    @mixin solid-after {
      &::after {
        display: block;
        content: '';
        @content;
      }
    }
    
    

    external by mio-U-M  3  0  1  0

    absoluteを指定する時いちいち全部書かなくていいようにしたものです

    absoluteを指定する時いちいち全部書かなくていいようにしたものです: position-abs.scss
    @mixin position-ab($top: auto, $right: auto, $bottom: auto, $left: auto) {
      position: absolute;
      margin: auto;
      top: $top;
      right: $right;
      bottom: $bottom;
      left: $left;
    }
    
    

    external by mio-U-M  4  0  1  0

    背景画像を取ってくるscss

    背景画像を取ってくるscss: image-url.scss
    $img_dir: '/img/';
    
    @function image-url ($url) {
        @return url("#{$img_dir}#{$url}");
    }
    
    
    • Public Snippets
    • Channels Snippets