Stylus and WordPress
Gavin Rehkemper
/gavinrehkemper
/gavinr
Solution
Stylus has the power of Sass, with the accessibility of LESS.
-Kezz Bracey
.page .wrapper h1.title {
color: red;
}
.page .wrapper h1.title {
color: red
}
.page .wrapper h1.title {
color red
}
.page .wrapper h1.title
color red
.page
.wrapper
h1.title
color red
.page {
background-color: #800000;
}
.page .section {
width: 20px;
height: 30px;
background-color: #800000;
}
.page .section h1 {
font-size: 4rem;
}
.page .section p {
text-transform: uppercase;
}
|
myRed = #800000
.page
background-color myRed
.section
width 20px
height 30px
background-color myRed
h1
font-size 4rem
p
text-transform uppercase
|
Compare!
github.com/stylus/stylus/blob/master/docs/compare.md
gist.github.com/chriseppstein/674726
npm install grunt-contrib-stylus
css/main.styl
wp_enqueue_style( 'style-main', get_template_directory_uri() . '/css/main.css' )
Stylus and WordPress
Gavin Rehkemper
/gavinrehkemper
/gavinr
Intro
Topic: .... CSS Preprocessor - makes writing page styles easier
