CSS语言预处理----SASS一分钟快速入门

1.先安装ruby下载地址https://rubyinstaller.org/2.安装sass和compass gem install sass gem install compass3.创建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.css5.愉快的使用css文件吧