Stylus 101 - CSS Preprocessor

"Knowledge is knowing a tomato is a fruit; Wisdom is not putting it in a fruit salad; Dex is for acrobatics checks."
Ghengis Khan

Stylus is a preprocessor for CSS that makes it more readable, easier to write, and simpler to separate out into components. This will be your first intro to using Stylus and utilizing the Stylus compiler in Bowtie.

Differences between Stylus and CSS

  1. Basic syntax differences

    h1
      color: red
    
    
    h1 {
      color: red;
    }

    Note the lack of `}` and `;`. These are optional in Stylus, but for the most part omitted.

    Stylus uses CSS comma seperation. The following...
    h1, h2
      background-color: blue
    compiles to:
    h1,
    h2 {
      background-color: blue;
    }
    This makes it easy to avoid repeating code that is shared between two or more elements. Read more in the official Stylus documentation.
  2. Nested heirarchy

    Stylus also allows for nesting. The following...

    .outer
      width: 10px
      .inner
        background-color: red
    compiles to:
    .outer {
      width: 10px;
    }
    .outer .inner {
      background-color: red;
    }

    Nesting makes it easy to keep code that belongs to a specific element and its children all in one place.

  3. Variables

    Variables are another tool that can be used through Stylus. Variable names start with a `$`. The following...

    $color = #f00
    .outer
      background-color: $color
    .inner
      background-color: $color
    compiles to:
    .outer {
      background-color: #f00;
    }
    .inner {
      background-color: #f00;
    }
    Variables help ensure that settings are consistent across stylesheets.
  4. Imports

    With Stylus other stylesheets can be imported into the current stylesheet. One nice thing about this is variables are imported as well. If you create a blank template in Bowtie, you'll notice that there's an `akcolor.styl` inside of the `lib` folder that contains all of the Atlassian colors.

    @require 'other.styl'
    The above will include the code from `other.styl` where the line was placed.

Exercises

  1. Linking stylus to pug

    Create a `style.styl` file inside a folder named `stylus` inside `Documents/Prototypes`. Write stylus that outputs the following:

    .italics {
        font-style: italic;
    }

    To test if your code works create an index.pug file and place it in the same folder. Include the following:

    link(rel="stylesheet" href="style.styl")
    h1 Hello, World
    h1.italics Hello, Italics

    Click on the name of the prototype in the Bowtie prototype list to see a preview of its output. "Hello, World" should be normal, whereas "Hello, Italics" should be italicized.

    .italics
        font-style: italic
  2. Utilizing the DOM inspector

    Recreate this site using the following pug code. You will need to create a `style.styl` file with the necessary stylus. Use as little code as possible!

    link(rel='stylesheet' href='style.styl')
    .title This is my page title
    #content
        .title This is my content title
        .subtitle I'm a subtitle but look similar to the title
        .text Baby echidnas are called puggles.

    hint: in Chrome you can right click and "inspect" to check out an elements style settings

    .title
      font-weight: bold
      font-size: 25px
    
    #content
      background-color: lightgrey
    
      .title, .subtitle
        font-size: 20px
    
      .text
        font-size: 16px
    
  3. Using variables

    Download this folder and unzip it in your Prototypes folder. Change the stylus code so that only one line needs to be edited to change the background color of the sidebar, header and footer.

    $color = #53a4f1
    
    .header
      text-align: center
      width: 100%
      padding-top: 2%
      height: 3%
      background-color: $color
    
    #content
      height: 90%
    
      .sidebar
        height: 100%
        width: 20%
        background-color: $color
        float: left
        display: inline-block
    
      .text
        padding-left: 10%
        width: 70%
        height: 100%
        background-color: #ffb154
        display: inline-block
    
    .footer
      text-align: center
      width: 100%
      height: 3%
      background-color: $color
    
  4. Styling a box

    Download this folder and unzip it in your Prototypes folder. Create a new stylus file (e.g. myStylus.styl) and use it to change the background color of the `.box` class to the standard `$ak-color-B100` as defined in `ak-color.styl`. Use `@require` within the main `style.styl` file to include your new style appropriately.

    .box
      background-color: $ak-color-B100
    
    @require 'ak-color.styl'
    @require 'myStyle.styl'