SASS入门学习总结分享

get started...

1. 变量

   定义变量以便于维护

$fontStack: Helvetica, sans-serif; $primaryColor: #333; body { font-family: $fontStack; color: $primaryColor; } // css body { font-family: Helvetica, sans-serif; color: #333; }

1. 嵌套

   选择器嵌套，层次分明

`
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
//css
nav ul {
margin: 0;
padding: 0;
list-style: none;
}

nav li {
display: inline-block;
}

nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
`

1. 导入

   导入其它sass文件，优于css的@import

//_reset.scss html, body, ul, ol { margin: 0; padding: 0; } //base.scss @import 'reset'; body { font-size: 100% Helvetica, sans-serif; background-color: #efefef; }

1. mixin

   让css3的编写锦上添花

@mixin box-sizing ($sizing) { -webkit-box-sizing:$sizing; -moz-box-sizing:$sizing; box-sizing:$sizing; } .box-border{ border:1px solid #ccc; @include box-sizing(border-box); } //css .box-border { border: 1px solid #ccc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

1. 扩展/继承

   @extend 优雅实现代码组合声明

`
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}
//css
.message, .success, .error, .warning {
border: 1px solid #cccccc;
padding: 10px;
color: #333;
}

.success {
border-color: green;
}

.error {
border-color: red;
}

.warning {
border-color: yellow;
}
`

1. 四则运算
   `
   .container { width: 100%; }

article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}

aside[role="complimentary"] {
float: right;
width: 300px / 960px * 100%;
}
//css
.container {
width: 100%;
}

article[role="main"] {
float: left;
width: 62.5%;
}

aside[role="complimentary"] {
float: right;
width: 31.25%;
}
`

1. 颜色变换
   $linkColor: #08c; a { text-decoration:none; color:$linkColor; &:hover{ color:darken($linkColor,10%); } } //css a { text-decoration: none; color: #0088cc; } a:hover { color: #006699; }