共计 788 个字符，预计需要花费 2 分钟才能阅读完成。
1. 先安装 ruby
下载地址 https://rubyinstaller.org/
2. 安装 sass 和 compass
gem install sass
gem install compass
3. 创建 scss 文件
@charset “utf-8”;
// 变量
$text-color:#000;
// 通用样式
@mixin el1 {
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
-ms-text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
// 方法
@mixin border-radius($width){
border-radius:$width;
-webkit-border-radius:$width;
-moz-border-radius:$width;
-o-border-radius:$width;
-ms-border-radius:$width;
}
// 继承 (缺点: 编译后在外面出现该 css)
.commonText {
font-size:22px;
font-weight:900;
}
// 占位符 (与继承的区别是, 不会在外面出现该 css)
%mt15 {
margin-top:15px;
}
body {
.box {
@extend .commonText; // 继承使用
@extend %mt15; // 占位符使用
@include border-radius(5px); // 方法使用
@include el1; // 混合宏使用
color:$text-color; // 变量使用
cursor:pointer;
border:1px solid #ccc;
width:124px;
&:hover {
color:red;
}
}
}
4. 编译监听 scss 文件
sass –watch index.scss:index.css
5. 愉快的使用 css 文件吧
