diff options
author | Divay Prakash <divayprakash@users.noreply.github.com> | 2019-12-23 23:14:50 +0530 |
---|---|---|
committer | GitHub <noreply@github.com> | 2019-12-23 23:14:50 +0530 |
commit | 16dc074e39f5f996639f23f4d6812c211ae5d22d (patch) | |
tree | 63be0d1a3885201f3d13f1dc00266fb719f304a7 /stylus.html.markdown | |
parent | ffd1fed725668b48ec8c11cbe419bd1e8d136ae3 (diff) | |
parent | 1d5f3671ea4bc6d7a70c3026c1ae6857741c50a6 (diff) |
Merge branch 'master' into master
Diffstat (limited to 'stylus.html.markdown')
-rw-r--r-- | stylus.html.markdown | 228 |
1 files changed, 228 insertions, 0 deletions
diff --git a/stylus.html.markdown b/stylus.html.markdown new file mode 100644 index 00000000..1c5ddd32 --- /dev/null +++ b/stylus.html.markdown @@ -0,0 +1,228 @@ +--- +language: stylus +filename: learnStylus.styl +contributors: + - ["Salomão Neto", "https://github.com/salomaosnff"] + - ["Isaac Henrique", "https://github.com/Isaachi1"] +translators: + - ["Divay Prakash", "https://github.com/divayprakash"] +--- + +Stylus is a dynamic stylesheet preprocessor language that is compiled into CSS. It aims to add functionality to CSS without breaking compatibility across web browsers. +It does this using variables, nesting, mixins, functions and more. + +Stylus syntax is very flexible. You can use standard CSS syntax and leave the semicolon (;), colon (:) and even the ({) and (}) optional, making your code even more readable. + +Stylus does not provide new style options, but gives functionality that lets you make your CSS much more dynamic. + +```scss + +/* Code style +==============================*/ + +/* Keys, semicolon, and colon are optional in Stylus. */ + +body { + background: #000; +} + +body { + background: #000 +} + +body { + background #000 +} + +body + background #000 + +body + background: #000; + +body + background: #000 + +// Single-line comments are removed when Stylus is compiled into CSS. + +/* Multi-line comments are preserved. */ + + +/* Selectors +==============================*/ + +/* Selecting elements within another element */ +body { + background: #000000; + h1 { + color: #FF0000; + } +} + +/* Or if you prefer... */ +body + background #000000 + h1 + color #FF0000 + + +/* Getting parent element reference +==============================*/ +a { + color: #0088dd; + &:hover { + color: #DD8800; + } +} + + +/* Variables +==============================*/ + + +/* + You can store a CSS value (such as the color) of a variable. + Although it is optional, it is recommended to add $ before a variable name + so you can distinguish a variable from another CSS value. +*/ + +$primary-color = #A3A4FF +$secondary-color = #51527F +$body-font = 'Roboto', sans-serif + +/* You can use variables throughout your style sheet. +Now, if you want to change the color, you only have to make the change once. */ + +body + background-color $primary-color + color $secondary-color + font-family $body-font + +/* After compilation: */ +body { + background-color: #A3A4FF; + color: #51527F; + font-family: 'Roboto', sans-serif; +} + +/ * +This is much easier to maintain than having to change color +each time it appears throughout your style sheet. +* / + + +/* Mixins +==============================*/ + +/* If you find that you are writing the same code for more than one +element, you may want to store that code in a mixin. + +center() + display block + margin-left auto + margin-right auto + left 0 + right 0 + +/* Using the mixin */ +body { + center() + background-color: $primary-color +} + +/* After compilation: */ +div { + display: block; + margin-left: auto; + margin-right: auto; + left: 0; + right: 0; + background-color: #A3A4FF; +} + +/* You can use mixins to create a shorthand property. */ + +size($width, $height) + width $width + height $height + +.rectangle + size(100px, 60px) + +.square + size(40px, 40px) + +/* You can use a mixin as a CSS property. */ +circle($ratio) + width $ratio * 2 + height $ratio * 2 + border-radius $ratio + +.ball + circle 25px + + +/* Interpolation +==============================*/ + +vendor(prop, args) + -webkit-{prop} args + -moz-{prop} args + {prop} args + +border-radius() + vendor('border-radius', arguments) + +box-shadow() + vendor('box-shadow', arguments) + +button + border-radius 1px 2px / 3px 4px + + +/* Functions +==============================*/ + +/* Functions in Stylus allow you to perform a variety of tasks, such as recalling some data. */ + +body { + background darken(#0088DD, 50%) // Dim color #0088DD by 50% +} + +/* Creating your own function */ +add(a, b) + a + b + +body + padding add(10px, 5) + + +/* Conditions +==============================*/ +compare(a, b) + if a > b + bigger + else if a < b + smaller + else + equal + +compare(5, 2) // => bigger +compare(1, 5) // => smaller +compare(10, 10) // => equal + + +/* Iterations +==============================*/ + +/* +Repeat loop syntax for: +for <val-name> [, <key-name>] in <expression> +*/ + +for $item in (1..2) /* Repeat block 12 times */ + .col-{$item} + width ($item / 12) * 100% /* Calculate row by column number */ +``` + +Now that you know a little about this powerful CSS preprocessor, you're ready to create more dynamic style sheets. To learn more, visit the official stylus documentation at http://stylus-lang.com. |