CSS Stylus(一)
2461 ワード
CMDコマンドstylus-w hello.styl -o hello.css
構文
//
.hello
width 100px
height 100px
background yellow
//
textarea, input
background #eeeeee
//
.user
background lightgreen
&:hover
background limegreen
box-shadow()
-webkit-box-shadow arguments
-moz-box-shadow arguments
box-shadow arguments
html.ie8 &,
html.ie7 &,
html.ie6 &,
border 2px solid arguments[length(arguments) - 1]
body
#login
box-shadow 1px 1px 3px #eee
//
pad(n)
padding (- n)
body
pad(5px)
//
$font-size = 16px
$font = $font-size Arial, sans-serif
body
font $font
// ( )
#logo
position absolute
top 50%
left 50%
width 150px
height 150px
margin-left -(@width/2)
margin-top -(@height/2)
// ( )
position()
position arguments
z-index 1 unless @z-index
#logo
position absolute
prefix(name, args)
-webkit-{name} args
-moz-{name} args
{name} args
border-radius()
prefix('border-radius', arguments)
button
border-radius 1px 2px
table
for row in 1 2 3 4 5
tr:nth-child({row})
height 10px * row
/************ **************/
.hello {
width: 100px;
height: 100px;
background: #ff0;
}
textarea,
input {
background: #eee;
}
.user {
background: #90ee90;
}
.user:hover {
background: #32cd32;
}
-webkit-box-shadow arguments #login,
-moz-box-shadow arguments #login,
box-shadow arguments #login,
html.ie8 #login,
html.ie7 #login,
html.ie6 #login,
border 2px solid arguments[length(arguments) - 1] #login,
body #login {
box-shadow: 1px 1px 3px #eee;
}
body {
padding: -5px;
}
/************ **************/
body {
font: 16px Arial, sans-serif;
}
#logo {
position: absolute;
top: 50%;
left: 50%;
width: 150px;
height: 150px;
margin-left: -75px;
margin-top: -75px;
}
#logo {
position: absolute;
z-index: 1;
}
/************ **************/
button {
-webkit-border-radius: 1px 2px;
-moz-border-radius: 1px 2px;
border-radius: 1px 2px;
}
table tr:nth-child(1) {
height: 10px;
}
table tr:nth-child(2) {
height: 20px;
}
table tr:nth-child(3) {
height: 30px;
}
table tr:nth-child(4) {
height: 40px;
}
table tr:nth-child(5) {
height: 50px;
}