IMPORTANT!

Snipt is going open source. We've toyed with this idea for quite a while, and have finally decided it's the right way to move forward.

A few things:
  • The entire Snipt source code will be released on GitHub under the 3-clause BSD License on Friday, September 10th.
  • While we'd like to think we're perfect, we realize we're only human. By open sourcing the software that runs this website, certain bugs or security flaws may be discovered that could compromise the privacy of your snipts.
  • Only the Lion Burger team will be able to push commits to the Snipt.net site. Contributors should send a pull request to add new features or submit patches.
  • By using this site, you agree not to be too angry or take any legal action against Lion Burger should this whole thing go up in flames some day.
  • Follow us on Twitter for updates.
I agree, close this message
Sign up to create your own snipts, or login.

Latest 100 public snipts » sass The latest public sass snipts.

showing 1-9 of 9 snipts for sass
  • Cross Browser CSS Gradients with Sass
    @mixin gradient($first, $second) {
      background: $second;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$first', endColorstr='$second');
      background: -webkit-gradient(linear, left top, left bottom, from($first), to($second));
      background: -moz-linear-gradient(top,  $first,  $second);
    }
    
    .gradient {
      @include gradient(black, white);
    }
    

    copy | embed

    0 comments - tagged in  posted by viatropos on Aug 11, 2010 at 6:00 p.m. EDT
  • Cross Browser CSS Rotation with and without Sass
    # First, you have to add this to Sass:
    
    # http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html
    # http://www.seancolombo.com/2010/07/28/how-to-make-and-use-a-custom-sass-function/
    # http://sass-lang.com/docs/yardoc/Sass/Script/Literal.html
    # math_sass.rb
    require 'sass'
    
    module Sass::Script::Functions
      def sin(angle)
        Sass::Script::Parser.parse(Math.sin(angle.value).to_s, 0, 0)
      end
      def cos(angle)
        Sass::Script::Parser.parse(Math.cos(angle.value).to_s, 0, 0)
      end
    end
    
    # Include that with sass by running this (where 'stylesheets' is the directory containing your stylesheets):
    
    sass --watch stylesheets:stylesheets -r math_sass.rb
    
    Then you can use the sine and cosine functions no problem.
    
    // css
    .rotate {
       -moz-transform: rotate(-30deg);
         -o-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
               filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.154, M12=-0.988, M21=0.988, M22=0.154);
           -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.154, M12=-0.988, M21=0.988, M22=0.154)";
                 zoom: 1;
    }
    
    // sass
    @mixin rotate($degrees) {
       -moz-transform: rotate($degrees);  
         -o-transform: rotate($degrees);  
    -webkit-transform: rotate($degrees);
               filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=-#{sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)});
           -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=-#{sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)})";
                 zoom: 1;
    }
    
    .rotate {
      @include rotate(-30deg);
    }
    

    copy | embed

    0 comments - tagged in  posted by viatropos on Aug 11, 2010 at 5:58 p.m. EDT
  • Cross Browser CSS Box Shadow with Sass
    @mixin shadow($color: #333333) {
      -moz-box-shadow: 0px 1px 2px $color;
      -webkit-box-shadow: 0px 1px 2px $color;
      box-shadow: 0px 1px 2px $color;
      -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color='$color')";
      filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color='$color');
    }
    
    .shadow {
      @include shadow(#111111);
    }
    

    copy | embed

    0 comments - tagged in  posted by viatropos on Aug 11, 2010 at 5:16 p.m. EDT
  • Cross Browser CSS Opacity (with and without Sass)
    // css
    .opacity {
      opacity: .80;
      filter: alpha(opacity=80);
      -ms-filter: "alpha(opacity=$value)";
      -khtml-opacity: .80;
      -moz-opacity: .80;
    }
    
    // sass
    @mixin opacity($value) {
      opacity: #{"." + $value};
      filter: alpha(opacity=$value);
      -ms-filter: "alpha(opacity=$value)";
      -khtml-opacity: #{"." + $value};
      -moz-opacity: #{"." + $value};
    }
    
    .opacity {
      @include opacity(80);
    }
    

    copy | embed

    0 comments - tagged in  posted by viatropos on Aug 11, 2010 at 5:12 p.m. EDT
  • Useful mixins for SASS
    // Bunch of useful mixin functions for sass
    
    =bgImg(!img,!x = 20px,!y = 10px,!attach = "scroll",!repeat = "no-repeat")
    	background-position = !x !y
    	background-repeat = !repeat
    	background-attachment = !attach
    	background-image: url(#{!img})
    
    =boxShadow(!x = 5px,!y = 5px,!blur = 5px,!color = #000)
    	-webkit-box-shadow = !x !y !blur !color
    	-moz-box-shadow = !x !y !blur !color
    	box-shadow = !x !y !blur !color
    
    =borderRadius(!radius = 5px)	
    	-moz-border-radius = !radius
    	-webkit-border-radius = !radius
    	border-radius = !radius
    
    =singleCornerRadius(!side,!vert,!width = 5px)
    	-moz-border-radius-#{!vert}#{!side} = !width
    	-webkit-border-#{!vert}-#{!side}-radius = !width
    	border-#{!vert}-#{!side}-radius = !width
    
    // set global borders. Border radius can also be set
    =border(!width = 1px,!style = "solid",!color = #000,!radius = 0)
    	border = !width !style !color
    	+borderRadius(!radius)
    
    // Use noSideBorder() to kill a side after setting the global border() mixin above.
    // This method results in smaller css once it is converted as the width/style/color is only set once.
    
    =noSideBorder(!side)
    	border-#{!side}: 0
    
    =noSideBorderRadius(!side)
    	+singleCornerRadius(!side,"top",0)
    	+singleCornerRadius(!side,"bottom",0)
    

    copy | embed

    0 comments - tagged in  posted by catcubed on Jan 02, 2010 at 9:50 p.m. EST
  • Easy css hacks using SASS
    //Easy CSS Hacks using SASS
    // In most cases, you'll never need the 3rd, or 4th hacks here.
    
    #idtag
    	* html &
    		//IE6 and below
    		cssstyle: value
    	* first-child+html &
    		//IE7 only
    		cssstyle: value
    	html>body &
    		//IE7,IE8, and modern browsers
    		cssstyle: value
    	html:first-child &
    		//Opera only 9 and below
    		cssstyle: value
    	
    

    copy | embed

    2 comments - tagged in  posted by catcubed on Dec 02, 2009 at 3:39 p.m. EST
  • Minimal HTML5 CSS Reset (for SASS)
    // minimal reset with html5
    
    *  
    	vertical-align: baseline
    	font-family: inherit
    	font-style: inherit  
    	font-size: 100%
    	border: none
    	padding: 0
    	margin: 0  
    
    h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl
    	margin: 0 0 16px
    
    li, dd, blockquote
    	margin-left: 20px
    
    table 
    	border-collapse: collapse 
    	border-spacing: 0
    
    article, aside, dialog, figure, footer, header, hgroup, nav, section
    	display: block
    	
    nav li, nav ul
    	margin: 0
    	padding: 0
    	list-style: none
    	
    q:before, q:after
    	content: ''
    

    copy | embed

    0 comments - tagged in  posted by catcubed on Nov 26, 2009 at 3:43 p.m. EST
  • Simple Adjustable Grid Mixin for SASS
    // Simple Adjustable Gutter Grid
    // For a 960px width, !grid = 80px = 12 columns; 60px = 16 columns
    // gutter is base gutter. You can change the gutter per element. See Grid mixin
    !pageWidth = 960px
    !grid = 80px
    !gutter = 20px
    
    //used for page wrapper
    =container
    	width = !pageWidth
    	margin: 0 auto
    	
    /*	Grid mixin function sets size and width of element boxes. Function variables are as follows
    	!col = number of columns,
    	!gutterLeft = size of left gutter
    	!gutterRight = size of right gutter
    	
    // gridFlush gutter is formed via padding, gridFloat formed by margin
    
    =gridBase
    	float: left
    	overflow: hidden
    	display: inline
    
    =gridFlush(!col = 1,!gutterLeft = !gutter/2, !gutterRight = !gutter/2 )
    	padding-left = !gutterLeft
    	padding-right = !gutterRight
    	width = !col * !grid - !gutterRight - !gutterLeft
    	+gridBase
    
    =gridFloat(!col = 1,!gutterLeft = !gutter/2, !gutterRight = !gutter/2)
    	margin-left = !gutterLeft
    	margin-right = !gutterRight
    	width = !col * !grid - !gutterRight - !gutterLeft
    	+gridBase
    	
    // first is only required if you want to clear a row of elements which did not equal total width
    =first
    	clear: both
    

    copy | embed

    0 comments - tagged in  posted by catcubed on Nov 25, 2009 at 8:54 p.m. EST
  • CSS element inheritance spotter (for SASS)
    //Used for testing where the outline for boxes are. Only works in modern browsers and IE8
    //This is written in SASS
    
    body *:hover
    	outline-style: dotted
    	outline-width: 2px
    	outline-color: #ee3
    	*:hover
    		outline-color: #bb3
    		*:hover
    			outline-color: #883
    			*:hover
    				outline-color: #553
    				*:hover
    					outline-color: #333
    					*:hover
    						outline-color: #000
    

    copy | embed

    0 comments - tagged in  posted by catcubed on Nov 25, 2009 at 7:21 p.m. EST
Sign up to create your own snipts, or login.