working on it ...

Filters

Explore Public Snippets

Sort by

Found 948 snippets

    public by JKCPR  2947  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  2951  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 fabio.nosenzo  4259  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;}

    external by all4site  21  0  1  0

    Delete background autofill

    Delete background autofill: _home.sass
    \:-webkit-autofill
    	box-shadow: 0 20px 0 #E0F4EA inset
    	-webkit-text-fill-color: currentColor
    
    

    external by gioalo  12  0  1  0

    Sass Px2Em function

    Sass Px2Em function: primalcss-px2em-function
    // PX to EM
    @function em($pixels, $context: $font-base-size) {
      @if (unitless($pixels)) {
        $pixels: $pixels * 1px;
      }
    
      @if (unitless($context)) {
        $context: $context * 1px;
      }
    
      @return $pixels / $context * 1em;
    }
    
    

    external by larismourullo  21  0  1  0

    CSS Tip: Use :not to Save Time and Lines of Code - Code 3

    CSS Tip: Use :not to Save Time and Lines of Code - Code 3: csstipsavetime3.sass
    .posts {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    
    .post:not(:last-of-type) {
      border-bottom: 1px solid #eee;
      margin-bottom: .5rem;
      padding-bottom: .5rem;
    }
    
    

    external by larismourullo  18  0  1  0

    CSS Tip: Use :not to Save Time and Lines of Code - Code 2

    CSS Tip: Use :not to Save Time and Lines of Code - Code 2: csstipsavetime2.sass
    .posts {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    
    .post {
      border-bottom: 1px solid #eee;
      margin-bottom: .5rem;
      padding-bottom: .5rem;
      
      &:last-child {
        border-bottom: 0;
        margin-bottom: 0;
        padding-bottom: 0;
      }
    }
    
    

    external by George  29  0  1  0

    zoom efect of img

    zoom efect of img: main.sass
    .galary-section-left__img-holder	
    	width: 100%	
    	height: 100%
    	padding: 0
    	overflow: hidden
    	img
    		width: 100%
    		height: 100%
    		max-height: 325px
    		transition: all 0.4s ease
    		&:hover
    			transform: scale(1.1)
    
    

    external by reidelliott  6  0  1  0

    A list of sass variables for social media brands

    A list of sass variables for social media brands: Social Brand Colors
    $twitter:     #00aced;
    $facebook:    #3b5998;
    $googleplus:  #dd4b39;
    $pinterest:   #cb2027;
    $linkedin:    #007bb6;
    $youtube:     #bb0000;
    $vimeo:       #aad450;
    $tumblr:      #32506d;
    $instagram:   #517fa4;
    $flickr:      #ff0084;
    $dribbble:    #ea4c89;
    $quora:       #a82400;
    $foursquare:  #0072b1;
    $forrst:      #5B9A68;
    $vk:          #45668e;
    $wordpress:   #21759b;
    $stumbleupon: #EB4823;
    $yahoo:       #7B0099;
    $blogger:     #fb8f3d;
    $soundcloud:  #ff3a00;
    
    

    external by Kowshik95  11  0  1  0

    All npm scripts for development with sass

    All npm scripts for development with sass: NPM Scripts
    /*npm install*/
    first initialize npm with package.json
    npm init
    then install the node sass
    npm install node-sass --save-dev
    
    if already have the package.json initialized with node-sass then just run
    npm install
    
    for install live server globally
    npm install live-server -g
    
    for watching the css changes
    
    "watch:sass": "node-sass sass/main.scss css/main.css -w"
    for run live server
    "devserver" : "live-server"
    
    for run all npm scripts
    first install
    npm install npm-run-all --save-dev
    
    then the scripts
    "start" : "npm-run-all devserver watch:sass"
    
    then build process
    
    first compile the sass to compile css file
    "compile:sass": "node-sass sass/main.scss css/main.comp.css"
    then install the concat package
    npm install concat --save-dev
    then concat the css file
    "concat:css": "concat -o css/main.concat.css css/main.css"
    the add prefixer for all browser
    first install prefix package
    npm install autoprefixer --save-dev
    then run to autoprefixer we need postcss
    npm install postcss-cli --save-dev
    then add prefix css
    "prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/main.concat.css -o css/main.prefix.css",
    then compress all the css file
    "compress:css": "node-sass css/main.concat.css --output-style compressed"
    the build script
    "build:css" : "npm-run-all compile:sass concat:css prefix:css compress:css"
    
    it will look like
    "watch:sass": "node-sass sass/main.scss css/main.css -w",
        "compile:sass": "node-sass sass/main.scss css/main.comp.css",
        "concat:css": "concat -o css/main.concat.css css/main.css",
        "prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/main.concat.css -o css/main.prefix.css",
        "compress:css": "node-sass css/main.concat.css --output-style compressed",
        "build:css" : "npm-run-all compile:sass concat:css prefix:css compress:css"
    then run npm run build:css
    
    
    
    • Public Snippets
    • Channels Snippets