Stylus 용 Bourbon과 같은 CSS 프레임 워크 kouto swiss를 사용해보십시오.

먼저 npm에서 kouto swiss를 설치합니다. 이번에는 Grunt를 이용하기 때문에 함께 설치합니다.

$ npm install kouto-swiss grunt grunt-contrib-stylus --save-dev

Gruntfile.js 에 stylus 에 대한 설정을 씁니다. options 의 use 에 kouto-swiss 를 지정합니다.

module.exports = function (grunt) {
  grunt.initConfig({
    stylus: {
      compile: {
        options: {
          paths: ['stylus'],
          urlfunc: 'embedurl',
          use: [
            require('kouto-swiss')
          ]
        },
        files: {
          'css/style.css': ['stylus/base.styl', 'stylus/layout.styl']
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-stylus');

  grunt.registerTask('default', ['stylus']);
};

stylus/base.styl를 만들고 kouto-swiss를 가져옵니다.

@import "kouto-swiss"

여기에서 kouto-swiss를 사용해 보겠습니다. 먼저 CSS를 재설정합니다.

meyer-reset()

Eric Meyer의 Reset CSS 가 출력됩니다.

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

kouto swiss 는, 디폴트 설정에서는 caniuse 의 데이터를 사용해 벤더 프리픽스의 필요 유무를 설정해 줍니다. 설정은 버전 정보를 전역 변수를 변경하기 만하면됩니다.

서비스가 IE 10 이상이 지원 대상이므로, kouto swiss 의 추천 접두사 정보로부터 IE 만 변경합니다.

ks-support-ie = 10
ks-support-firefox = 25
ks-support-chrome = 20
ks-support-safari = 5
ks-support-opera = 15
ks-support-ios-safari = 5
ks-support-opera-mini = false
ks-support-android-browser = false
ks-support-blackberry-browser = false
ks-support-opera-mobile = false
ks-support-android-chrome = false
ks-support-android-firefox = false
ks-support-ie-mobile = false

linear-gradient를 사용하여 공급 업체 접두사를 설정해보십시오.

.title
  background-image linear-gradient( to top right, #ffffff, #cccccc)

다음은 자주 사용하는 clearfix 를 사용해 보겠습니다. ( Nicolas Gallagher의 micro clearfix 베이스)

.clearfix
  clearfix()

삼각형을 그릴 때는 다음을 사용합니다.

.triangle
  triangle( up, 30px, #00f)

디자인에 그리드 시스템을 쉽게 적용할 수 있습니다. 고정 크기로 12개의 그리드를 만듭니다.

body
  gs( "fixed", 12, 40px, 10px )

그런 다음 4개의 격자 열을 설정합니다.

.col4
  col(4)

3개 나란히 봅니다.



그 밖에도 편리한 기능이 많이 있습니다. 지금까지 Sass + Bourbon에 빚을졌습니다. Stylus를 사용할 때는 kouto swiss가 편리합니다.

kouto swiss - A complete CSS framework for Stylus

ht tp // // 이와-스ぃ s. 이오/