summaryrefslogtreecommitdiffhomepage
path: root/sass.html.markdown
diff options
context:
space:
mode:
Diffstat (limited to 'sass.html.markdown')
-rw-r--r--sass.html.markdown19
1 files changed, 10 insertions, 9 deletions
diff --git a/sass.html.markdown b/sass.html.markdown
index d1e0721f..9bc72478 100644
--- a/sass.html.markdown
+++ b/sass.html.markdown
@@ -188,7 +188,8 @@ body.noLinks a {
#################### */
/* Sass provides functions that can be used to accomplish a variety of tasks. Consider the following */
-
+
+/* Functions can be invoked by using their name and passing in the required arguments */
body {
width: round(10.25px);
}
@@ -207,19 +208,19 @@ body {
background-color: rgba(0, 0, 0, 0.75);
}
-/* You may also define your own functions. Functions are very similar to mixins. When trying to choose between
- a function or a mixin, remember that functions are best for returning values while mixins are best for
- generating CSS while functions are better for logic that might be used throughout your Sass code. The
- examples in the Math Operators' section are ideal candidates for becoming a reusable function. */
-
-/* This function will take a target size and the parent size and calculate and return the percentage */
+/* You may also define your own functions. Functions are very similar to mixins. When trying
+ to choose between a function or a mixin, remember that functions are best for returning
+ values while mixins are best for generating CSS while functions are better for logic that
+ might be used throughout your Sass code. The examples in the Math Operators' section are
+ ideal candidates for becoming a reusable function. */
+
+/* This function will take a target size and the parent size and calculate and return
+ the percentage */
@function calculate-percentage($target-size, $parent-size) {
@return $target-size / $parent-size * 100%;
}
-/* Functions can be invoked by using their name and passing in the required arguments */
-
$main-content: calculate-percentage(600px, 960px);
.main-content {