最近闲下来了 捣鼓点新玩意 去上海听说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
基础的用法就到这里了 。。。。
前辈们已经提供了好多文档，这里就不再累赘了~~
参考资料：