working on it ...

Filters

Explore Public Snippets

Sort by

Found 4,163 snippets matching: scss

    public by JKCPR  3041  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 JKCPR  2938  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  3109  2  7  6

    Gulp 'production pipeline' by gulpFile.js

    Tasks are executed concurrently hence the need to establish dependancy of tasks so the CONCATSCRIPTS task can complete before the MINIFYSCRIPTS task begins and COMPILESASS will run in parallel during BUILD task which is executed in the ANON_CALLBACK function copying all the output production ready files into the 'dist' folder as per the DEFAULT ta
    "use strict";
    //BASIC GULP REQUIREMENTS FROM NPM
     var gulp = require('gulp'),
         concat = require('gulp-concat'),
         uglify = require('gulp-uglify'),
         rename = require('gulp-rename'),
         sass = require('gulp-sass'),
         maps = require('gulp-sourcemaps'),
         del = require('del');
    
    
    //USAGE :     gulp concatScripts   -- makes single app.js file
         gulp.task("concatScripts", function() {
         	return gulp.src([   //return is being used because this task is a dependancy of minifyScripts
         		  'js/jquery.js',
             	'js/sticky/jquery.sticky.js',
          		'js/main.js'])
         	  .pipe(maps.init())        //makes the browser able to show which js file contains the js error after compiled.
          	.pipe(concat("app.js"))
          	.pipe(maps.write("./"))
          	.pipe(gulp.dest("js"));
         });
    
    //USAGE :     gulp minifyScripts   -- minifies app.js file && renames to app.min.js
         gulp.task("minifyScripts", ["concatScipts"] ,function(){
    	return gulp.src("js/app.js")
         		.pipe(uglify())
         		.pipe(rename('app.min.js'))
         		.pipe(gulp.dest('js'));
         });
    
    //USAGE :    gulp compileSass     -- compiles all Sass files imported by scss/application.scss && maps the source files && writes their routes relative to base folder hereby (./scss/) && outputs into 'css' folder
         gulp.task("compileSass",function(){
         	return gulp.src("scss/application.scss")
         		.pipe(maps.init())  //makes the browser able to show which scss file contains the css style after compiled.
         		.pipe(sass())
         		.pipe(maps.write("./"))
         		.pipe(gulp.dest('css'));
         });
    
    //USAGE: gulp build --Runs all tasks listed in array below in sequence provided
    //NOTE:  'concatScripts' isnt listed in build task because its already listed as a dependancy of minifyScripts i.e it must finish before minifySCripts can start.
         gulp.task( "build" , [ 'minifyScripts' , 'compileSass' ] , function(){
         	return gulp.src(["css/application.css" , "js/app.min.js" , "index.html"  , "img/**", "fonts/**" ] , { base: './' }) // all the production files
         		.pipe(gulp.dest('dist')); // get piped to 'dist' folder once build tasks have run. READY TO UPLOAD TO PRODUCTION SERVER.
         	});
    
    //USAGE: gulp watchSass         --This automatically compiles your scss files upon changes
         gulp.task('watchSass', function(){
         	gulp.watch( [ 'scss/**/*.scss' , 'scss/*.scss' ], ['compileSass'] ); // Provide either an array of files locations or alternatively GLOBBING PATTERNS...
         });
    
    //USAGE gulp clean    	--This automatically removes old 'dist' and processed OUTPUT files so that BUILD will have a clean space to write them in the default task's anon callback fn
         gulp.task('clean', function(){
         	del(['dist' , 'css/application.css*' , 'js/app*.js*']);
         });
    
    //DEFAULT GULP TASK TO RUN
    //USAGE:  essentially just GULP to trigger workflow pipeline.
         gulp.task("default", ["clean"] , function(){
         	gulp.start('build');
         	console.log("The default task has been executed !! :) ");
         });
         //========================================================================//
         //						GULP TASK PIPELINE:
         //========================================================================//
         //	|> DEFAULT task
         //		|_CLEAN task
         //		|_ANONYMOUS CALLBACK FN
         //			|_BUILD task
         //			 	|_MINIFYSCRIPTS task
         //			 	|	|_CONCATSCRIPTS task
         //			 	|_COMPILESASS task
         //========================================================================//
         /*
         Tasks are executed concurrently hence the need to establish dependancy of tasks so the CONCATSCRIPTS task
         can complete before the MINIFYSCRIPTS task begins and COMPILESASS will run in parallel during BUILD task
         which is executed in the ANON_CALLBACK function copying all the output production ready files into the 
         'dist' folder as per the DEFAULT task. 
          Everything is run by using :  GULP
    
         ___Required Folder Structure:
         	|>    css
              	|>    dist
              	|>    fonts
              	|>    img
              	|>    js
              	|>    node_modules
              	|>    scss
    
         ___Required Node Modules:
         	|>    gulp
         	|>    gulp-concat
         	|>    gulp-uglify
         	|>    gulp-rename
         	|>    gulp-sass
         	|>    gulp-sourcemaps
         	|>    del
    
         */   

    public by ivanov-yordan  2371  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");
    }
    
    

    public by JKCPR  2195  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 maholtz  1428  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)

    external by hbuchel  434366  2  4  0

    Using ng-animate with ng-show/ng-hide to transition the opacity of an element. (extendible sass class)

    Using ng-animate with ng-show/ng-hide to transition the opacity of an element. (extendible sass class): NGShowHideOpacity.scss
    /*************************************************
     * Structure for ng-show/ng-hide animations
     * .animationName {
     	// CSS While ng-show is true
     *	&.ng-hide-add, &.ng-hide-remove {
     *	 display: block !important;
     *	}
     *	&.ng-hide {
     *	 // CSS while ng-hide is true
     *	}
     * }
     *************************************************/
    
    /* Transitioning the opacity of an ng-show-item  */
    %opacityShowHide {
    	@include single-transition(opacity,.3s,ease-in-out);
    	opacity: 1;
    	&.ng-hide-add, &.ng-hide-remove {
    	 	display: block !important;
    	}
    	&.ng-hide {
    		opacity: 0;
    	}
    }
    
    

    external by Andrew Ford  123892  0  3  0

    SCSS line comment

    SCSS line comment: comment_line.sublime-snippet
    <snippet>
    	<content><![CDATA[
    //----------- ${1:Comment}
    ]]></content>
    	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    	<tabTrigger>///</tabTrigger>
    	<!-- Optional: Set a scope to limit where the snippet will trigger -->
    	<scope>source.scss</scope>
    </snippet>
    
    

    external by BrettBukowski  53969  0  3  0

    Perfect vertical+horizontal centering (in SCSS + Bourbon)

    Perfect vertical+horizontal centering (in SCSS + Bourbon): gistfile1.scss
    // Perfect vertical+horizontal centering.
    
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    @include prefixer(box-align, center, webkit moz ms spec);
    -ms-flex-align: center;
    @include prefixer(align-items, center, webkit spec);
    @include prefixer(box-pack, center, webkit moz);
    -ms-flex-pack: center;
    @include prefixer(justify-content, center, webkit spec);
    
    
    
    

    external by xyfeng  51716  0  3  0

    Flexbox grid scss with custom gutter

    Flexbox grid scss with custom gutter: grid.scss
    /**
     * Grid Setup
     * Modified from http://matthewsimo.github.io/scss-flex-grid/
     */
    $ps-columns: 12 !default;
    $ps-gutter: 0.5rem !default;
    
    /**
     * Break point namespace object
     *
     * Set the default namespace object with these defaults with the
     * understanding that you can pass in whatever you might require for your site.
     *
     * $ps-breakpoints is a Sass list with nested lists inside. Each sub list defines two things.
     * 1. The namespace for that breakpoint. (Required) (i.e. xs, sm, md, lg)
     * 2. The min-width measurement for the breakpoint for that namespace. (i.e. 48em, 62em, 75em)
     * 3. The gutter-width measurement for the breakpoint for that namespace.
     *
     * Note: These should be in the proper order (at least till libsass handles map keys properly).
     *
     */
    $ps-breakpoints: ( (xs), (sm, 768px, 16px), (md, 1020px, 20px), (lg, 1440px, 24px) ) !default;
    
    /**
     * Calculate column size percentage
     */
    @function get-col-percent($column-num) {
      @return $column-num / $ps-columns * 100%;
    }
    
    /**
     * Spacing mixin to create uniform margin/padding
     */
    @mixin spacing( $value, $type: margin, $orientation: vertical ) {
      @if $orientation == vertical {
        #{ $type }-top: $value;
        #{ $type }-bottom: $value;
      }
      @else {
        #{ $type }-left: $value;
        #{ $type }-right: $value;
      }
    }
    
    /**
     * Row wrapper class, flex box parent.
     */
    .row {
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      flex: 0 1 auto;
    }
    %col {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      flex-grow: 0;
      flex-shrink: 0;
    }
    %col-flex {
      @extend %col;
      flex-grow: 1;
      flex-basis: 0;
      max-width: 100%;
    }
    
    /**
     * Generate a set of grid column classes using a namespace
     */
    @mixin grid-sizes( $namespace, $gutter ) {
      .col {
        @include spacing( ( $gutter / 2), padding, horizontal );
      }
      .row {
        @include spacing( ( -$gutter / 2 ), margin, horizontal );
      }
      .start-#{$namespace} {
        justify-content: flex-start;
        text-align: start;
      }
      .center-#{$namespace} {
        justify-content: center;
        text-align: center;
      }
      .end-#{$namespace} {
        justify-content: flex-end;
        text-align: end;
      }
      .top-#{$namespace} {
        align-items: flex-start;
      }
      .middle-#{$namespace} {
        align-items: center;
      }
      .bottom-#{$namespace} {
        align-items: flex-end;
      }
      .around-#{$namespace} {
        justify-content: space-around;
      }
      .between-#{$namespace} {
        justify-content: space-between;
      }
      .first-#{$namespace} {
        order: -1;
      }
      .last-#{$namespace} {
        order: 1;
      }
      @for $i from 1 through $ps-columns {
        .#{$namespace}-#{$i} {
          @extend %col;
          flex-basis: get-col-percent($i);
          max-width: get-col-percent($i);
        }
        @if ( $i != $ps-columns ) {
          .off-#{$namespace}-#{$i} {
            margin-left: get-col-percent($i);
          }
        }
      }
    }
    
    /**
     * Build Grid
     */
    @each $val in $ps-breakpoints {
      $namespace: nth($val, 1);
      $gutter: $ps-gutter;
      .#{$namespace} {
        @extend %col-flex;
      }
      .container {
        overflow: hidden;
      }
      .row.reverse {
        flex-direction: row-reverse;
      }
      .col.reverse {
        flex-direction: column-reverse;
      }
    
      @if length($val) == 1 {
        @include grid-sizes( $namespace, $gutter );
      }
      @else {
        $size: nth($val, 2);
        @if length($val) == 3 {
          $gutter: nth($val, 3);
        }
        @media only screen and (min-width: #{$size}) {
          @include grid-sizes( $namespace, $gutter );
        }
      }
    }
    
    
    
    • Public Snippets
    • Channels Snippets