Public
snipts » sass 
showing 1-5 of 5 snipts for sass
-
∞ 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 -khtml-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
Programming Python