Latest 100 public
snipts » sass 
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); }
-
∞ 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); }
-
∞ 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); }
-
∞ 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); }
-
∞ 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)
-
∞ 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
-
∞ 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: ''
-
∞ 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
-
∞ 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