working on it ...

Filters

Explore Public Snippets

Sort by

Found 3,252 snippets matching: sass

    public by fabio.nosenzo  4245  0  6  0

    Set a variable in Sass

    How to set a variable in Sass CSS Preprocessor
    /* -- .scss --  */
    $color: #efefef;
    body {background:  $color;}
    
    /* -- resulting css -- */
    body {background:  #efefef;}

    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  2938  1  5  1

    Sass a:pseudo state @mixin

    =linx ($link, $visit, $hover, $active) 
      a 
        color: $link
        font-weight: bolder
        &:visited 
          color: $visit
        
        &:hover 
          color: $hover
        
        &:active 
          color: $active
    $a-tags: 'a, a:link, a:visited'
    $a-tags-hover: 'a:active, a:hover'
     
    #{$a-tags} #{$a-tags-hover} 
      text-decoration: none
      
    ul li
      +linx(#E4EAEA, #0cc, #c0c, #cc0)

    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);
    }

    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 Grawl  289334  5  3  0

    Laravel Elixir + PostCSS + Sass (or Stylus or Less or other preprocessor)

    Laravel Elixir + PostCSS + Sass (or Stylus or Less or other preprocessor): gulpfile.js
    // Task to compile styles with PostCSS
    elixir.extend('processStyles', options=> {
    	var name = 'processStyles'
    	var sourcemaps = require('gulp-sourcemaps')
    	var err = e => {
    		console.log(require('gulp-util').colors.bgRed('PostCSS - Error'))
    		console.log(e.message)
    	}
    	var notification = require('laravel-elixir/Notification')
    	new elixir.Task(name, ()=> {
    		return gulp.src(options.src, {cwd: config.assetsPath})
    			.pipe(gulpif(config.sourcemaps, sourcemaps.init()))
    			.pipe(require('gulp-sass')().on('error', err))
    			.pipe(require('gulp-postcss')(
    				[
    					require('postcss-devtools'),
    					require('autoprefixer'),
    					require('postcss-axis'),
    					require('postcss-short'),
    					require('postcss-import')
    				]
    			).on('error', err))
    			.pipe(gulpif(config.sourcemaps, sourcemaps.write('.')))
    			.pipe(gulp.dest(`${config.publicPath}/${config.css.outputFolder}`))
    			.pipe(new notification().message(name + ' Compiled!'))
    	})
    	.watch(config.assetsPath + '/' + options.watch)
    	.ignore(config.css.outputFolder + '/**/*.css') // not sure about this
    })
    elixir(mix=> {
    	mix.processStyles({
    		src: [
    			'!sass/_*',
    			'sass/*.{scss,sass}'
    		],
    		watch: 'sass/**/*.{scss,sass}'
    	})
    })
    
    

    external by andreasboden  50632  0  4  0

    Sass vs Less

    Sass vs Less: gistfile1.txt
    /* SASS */
    .nav
      @extend .blabla
    
    /* LESS */
    .nav:extend(.blabla)
    
    

    external by Aaron Lademann  68860  0  4  0

    Dot notation extension for SassyMap's map-get-deep Sass function

    Dot notation extension for SassyMap's map-get-deep Sass function: _map-get-deep-dot.scss
    /**
     * Fetch a deeply nested value in a multi-level map using object dot-notation string OR a list of keys.
     *
     * @requires sassy-maps
     * @requires SassyLists
     * @requires is-map
     * @requires is-string
     * @requires is-list
     *
     * @param {map}           $map
     * @param {string | list} $keys         object dot-notation string representing the nesting order of the desired key
     * @param {string}        $delimiter    string used to identify the individual keys within the string
     *
     * @throws if any of the `$required-functions` do not exist
     * @throws if `$map` param is not a map
     * @throws if `$keys` param is not a string or a list
     *
     * @return {*} value at nesting level requested via `$keys` param
     */
    @function get($map, $keys, $delimiter: '.') {
        $required-functions: is-map, is-string, is-list, sl-explode, map-get-deep;
        @each $function in $required-functions {
            @if not function-exists($function) {
                @warn "`#{$function}()` is required by `get()`.";
                @return null;
            }
        }
        @if not is-map($map) {
            @warn "`get` function expecting a map; #{type-of($map)} given.";
            @return null;
        }
        @if not is-string($keys) and not is-list($keys) {
            @warn "`get` function expecting a list or a string; #{type-of($keys)} given.";
            @return null;
        }
        // END error-checking
    
        @if is-list($keys) {
            //
            // its already a list, no need to split it
            //
            @return map-get-deep($map, $keys);
        } @else {
            @if not str-index($keys, $delimiter) {
                //
                // a single key has been requested - no recursion necessary
                // (no `$delimiter` found in `$keys`)
                //
                @return map-get($map, $keys);
            } @else {
                //
                // a `$delimiter` was found in the `$keys` string
                // lets split it on the delimiter so we can pass a valid list of keys to `map-get-deep()`
                //
                $key-list: sl-explode($keys, $delimiter);
    
                @return map-get-deep($map, $key-list)
            }
        }
    }
    
    

    external by pedrogpimenta  581  0  3  0

    Convert SASS to SCSS and delete .sass files (applies to all files in current folder)

    Convert SASS to SCSS and delete .sass files (applies to all files in current folder): convert sass to scss
    sass-convert -R ./ -F sass -T scss && rm *.sass
    
    

    external by pixelchar  86  1  1  0

    Sass Speech Bubble Mixin from http://www.paulund.co.uk/speech-bubble-sass-mixin

    Sass Speech Bubble Mixin from http://www.paulund.co.uk/speech-bubble-sass-mixin: speech-bubble-mixin.scss
    @mixin speech-bubble($size, $background) {
      background: $background;
      display: inline-block;
      padding: $size;
      position: relative;
      margin-left: $size;
    
      &:before {
        content: '';
        position: absolute;
        left: -$size;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        border-top: ($size / 2) solid transparent;
        border-right: $size solid $background;
        border-bottom: ($size / 2) solid transparent;
      }
    }
    
    
    • Public Snippets
    • Channels Snippets