sass基础语法学习

 最近闲下来了 捣鼓点新玩意 去上海听说sass比较强大，大漠在群里也经常推荐，使用了下 ，好强大的说。。由于比较懒 直接贴代码啦。具体的请看注释或查看相关文档。没事了多谷歌和百度 ，对自己的独立学习能力，帮助很大。。GO。。。

Code of test.scss :

@import "reset.css";
// 使用变量
$blue : blue;
// 变量嵌套
$side : left ;
// 允许计算
$px : 15;
// 允许代码计算
body{
margin : $px/2 + px;
top : $px + 50px;
right : $px * 10%;
}
#test{
color : $blue;
border-#{$side} : 1px solid #ccc;
border-#{$side}-radius : 5px;

// 元素嵌套
p{
font-size: $px * 90%;
}
.box{
$px*50 + px;
// 属性嵌套
border-#{$side}:{
color : red ;
style : solid ;
}
// 引用父元素
&:hover{
color : $blue;
}
}

}
// 继承 (这里要考虑作用域嘛？貌似拿出来 也是放在#test下的 自动放到#test下了？)
.box2{
@extend .box;
font-weight: 600;
}

// mixin可重用代码块 高上大 加了参数之后 比较灵活 参数里面的变量 还可以引用变量 赶脚和js一样
@mixin left($value : $px + px) {
float: left;
_display: inline;
margin-left: $value;
}

// 使用include调用 调用的时候传入其他值

.leftBox{
@include left(30px);
}

// 大胆的猜测下 如果 可以传入多个参数的话 或者 传入的 k - v结构的话 也不知道有木有 继续看下去。。

// 写一个比较自由的border-radius 实例 后面可以不用处理 尝试下 三目运算的强大 属性不能使用三目运算
@mixin radius($v1 , $v2 , $v1Radius : 10px , $v2Radius : 10px){
-webkit-border-#{$v1}-#{$v2}-radius: if($v1Radius == $v2Radius , $v1Radius ,$v1Radius $v2Radius);
-moz-border-#{$v1}-#{$v2}-radius: if($v1Radius == $v2Radius , $v1Radius ,$v1Radius $v2Radius);
border-#{$v1}-#{$v2}-radius: if($v1Radius == $v2Radius , $v1Radius ,$v1Radius $v2Radius);
}
// 可以多复用
.tlRadius{
@include radius(top, left , $v1Radius : 20px)
}
.trRadius{
@include radius(top, right , $v2Radius : 20px)
}
.blRadius{
@include radius(bottom, left , $v1Radius : 15px)
}
.brRadius{
@include radius(bottom, right , $v2Radius : 25px)
}

// sass内置的颜色函数 (能不能自定义函数呢) 尝试下定义在mixin中的变量直接当默认函数来用
// 想法是美好的 现实是参数的 于是就换了一种思路

// @mixin color($type : lighten , $percen : 100%){
// color : $type($blue , $percen);
// }

// .lighten-color{
// @include color($type , $percen : 10%);
// }

// 利用if else来处理 (试试) --- 我去 报错了。
// @mixin color($type : lighten , $percen : 10%){
// @if $type == lighten{
// color: lighten($blue, $percen);
// } @else if $type == darken{
// color : darken($blue ,$percen);
// }
// }

// .lighten-color{
// @include color($type , $percen : 10%);
// }

.lighten-color {
color : lighten($blue , 10%);
}
.darken-color{
color : darken($blue , 10%);
}
.grayscale-color{
color: grayscale($blue);
}
.complement-color{
color:complement($blue);
}

　

编译生成之后

@import url(reset.css);
body {
  margin: 7.5px;
  top: 65px;
  right: 150%;
}

#test {
  color: blue;
  border-left: 1px solid #ccc;
  border-left-radius: 5px;
}
#test p {
  font-size: 1350%;
}
#test .box, #test .box2 {
  width: 750px;
  border-left-color: red;
  border-left-style: solid;
}
#test .box:hover, #test .box2:hover {
  color: blue;
}

.box2 {
  font-weight: 600;
}

.leftBox {
  float: left;
  _display: inline;
  margin-left: 30px;
}

.tlRadius {
  -webkit-border-top-left-radius: 20px 10px;
  -moz-border-top-left-radius: 20px 10px;
  border-top-left-radius: 20px 10px;
}

.trRadius {
  -webkit-border-top-right-radius: 10px 20px;
  -moz-border-top-right-radius: 10px 20px;
  border-top-right-radius: 10px 20px;
}

.blRadius {
  -webkit-border-bottom-left-radius: 15px 10px;
  -moz-border-bottom-left-radius: 15px 10px;
  border-bottom-left-radius: 15px 10px;
}

.brRadius {
  -webkit-border-bottom-right-radius: 10px 25px;
  -moz-border-bottom-right-radius: 10px 25px;
  border-bottom-right-radius: 10px 25px;
}

.lighten-color {
  color: #3333ff;
}

.darken-color {
  color: #0000cc;
}

.grayscale-color {
  color: grey;
}

.complement-color {
  color: yellow;
}

 其中有些问题反思：

1、如何避免冗余代码

2、如何合理使用变量方法等

3、怎么调试出错的scss 

基础的用法就到这里了 。。。。

前辈们已经提供了好多文档，这里就不再累赘了~~

参考资料：

http://www.ruanyifeng.com/blog/2012/06/sass.html

http://www.w3cplus.com/sassguide/syntax.html