_functions.scss 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. /******************************************************************
  2. Site Name:
  3. Author:
  4. Stylesheet: Sass Functions
  5. You can do a lot of really cool things in Sass. Functions help you
  6. make repeated actions a lot easier. They are really similar to mixins,
  7. but can be used for so much more.
  8. Anyway, keep them all in here so it's easier to find when you're
  9. looking for one.
  10. For more info on functions, go here:
  11. http://sass-lang.com/documentation/Sass/Script/Functions.html
  12. ******************************************************************/
  13. /*********************
  14. COLOR FUNCTIONS
  15. These are helpful when you're working
  16. with shadows and such things. It's essentially
  17. a quicker way to write RGBA.
  18. Example:
  19. box-shadow: 0 0 4px black(0.3);
  20. compiles to:
  21. box-shadow: 0 0 4px rgba(0,0,0,0.3);
  22. *********************/
  23. // black
  24. @function black($opacity) {
  25. @return rgba(0,0,0,$opacity);
  26. }
  27. // white
  28. @function white($opacity) {
  29. @return rgba(255,255,255,$opacity);
  30. }
  31. /*********************
  32. RESPONSIVE HELPER FUNCTION
  33. If you're creating a responsive site, then
  34. you've probably already read
  35. Responsive Web Design: http://www.abookapart.com/products/responsive-web-design
  36. Here's a nice little helper function for calculating
  37. target / context
  38. as mentioned in that book.
  39. Example:
  40. width: cp(650px, 1000px);
  41. or
  42. width: calc-percent(650px, 1000px);
  43. both compile to:
  44. width: 65%;
  45. *********************/
  46. @function cp($target, $container) {
  47. @return calc-percent($target, $container);
  48. }