使用sass需要安装ruby,再安装sass. 安装命令:gem install sass
sass文件名后缀是.scss.
编译有四个选项,nested 默认选项,compact 简洁格式的,compressed压缩的,expanded没有缩进的。
cmd切换到工作路径监听我的文件夹:sass --watch ./sass:./css --style compressed
或者监听文件:sass --watch style.scss:style.css
test.scss
@charset "UTF-8";
$side : left;
.rounded {border-#{$side}-radius: 5px;}
$slide : right;
$var :1200px;
$mycolor: #cd1217; /* 定义变量 */
.application { border-#{$slide}-radius: 5px;} /* 嵌套在字符串中 */
.class1{border:1px solid #e2e2e2;}
/* 嵌套字符还可以出现在classname上 */
.slide_#{$side}{
color: red;
}
.class2{
@extend .class1; /* 继承class1 编译出来是class1 .class2 */
font-size:120%;
width:500px+1000px; /* 使用算式 */
}
@mixin left{ /* 定义@mixin 可重复使用的代码块 */
float: left;
margin-left:10px;
}
.aliang{
@include left; /* 使用宏 */
width: $var;
border-left:2px dotted #ee0000;
}
/* @mixin 强大之处可以传递参数和缺省值 */
@mixin right($value : 10px){
float: right;
margin-right: $value;
}
.flex-item{
@include right(50px); /* 传递参数 */
padding:10px;
}
.flex-item1{
@include right; /* 使用缺省值 */
}
/* 使用继承 @extend 让一个选择器继承另一个选择器中定义的样式 包络它的子选择器 */
.alert{
padding: 15px;
}
.alert a{
line-height: 1.6em;
font-weight: bold;
}
.alert>span{
padding-right: 10px;
}
/*alert-info 继承 alert */
.alert-info{
@extend .alert; /* 会复制.alert和其子选择器的所有属性 和.alert组成群组选择器 */
background-color: #e2e2e2; /* 会生成独有的 */
}
/* 使用内置的改变颜色的函数 */
.mycolor{
background-color: lighten(#cd1217, 10%);
background-color: darken(#cd1217, 10%);
background-color: grayscale(#cd1217);
background-color: complement(#cd1217);
}
.oldColor{
background-color: #cd1217;
}
/* 可以循环 */
@for $i from 1 to 5{
.border-#{$i}{
border: #{$i}px solid blue;
}
}
/* 可以使用while循环 */
$i:3;
@while $i > 0{
.item-#{$i}{width:2em * $i;}
$i: $i - 1;
}
/* 可以使用each */
@each $member in a,b,c,d{
.item-#{$member}{
@include right(8px);
background: $mycolor url(../img/icon-#{$member}.png) left top no-repeat;
}
}
/* 可以自定义函数 */
@function HoverColor($hcolor){
@return lighten($hcolor, 10%);
}
.invsdcli a{
&:hover{background-color: HoverColor($mycolor);}
}
/* 可以用if来判断 */
.content{
@if 1+1 != 3 {
border: 1px solid #e2e2e2;
}
@else{
border: 1px solid transparent;
}
}
编译后的test.css
@charset "UTF-8";
.rounded {
border-left-radius: 5px; }
/* 定义变量 */
.application {
border-right-radius: 5px; }
/* 嵌套在字符串中 */
.class1, .class2 {
border: 1px solid #e2e2e2; }
/* 嵌套字符还可以出现在classname上 */
.slide_left {
color: red; }
.class2 {
/* 继承class1 编译出来是class1 .class2 */
font-size: 120%;
width: 1500px;
/* 使用算式 */ }
.aliang {
/* 定义@mixin 可重复使用的代码块 */
float: left;
margin-left: 10px;
/* 使用宏 */
width: 1200px;
border-left: 2px dotted #ee0000; }
/* @mixin 强大之处可以传递参数和缺省值 */
.flex-item {
float: right;
margin-right: 50px;
/* 传递参数 */
padding: 10px; }
.flex-item1 {
float: right;
margin-right: 10px;
/* 使用缺省值 */ }
/* 使用继承 @extend 让一个选择器继承另一个选择器中定义的样式 包络它的子选择器 */
.alert, .alert-info {
padding: 15px; }
.alert a, .alert-info a {
line-height: 1.6em;
font-weight: bold; }
.alert > span, .alert-info > span {
padding-right: 10px; }
/*alert-info 继承 alert */
.alert-info {
/* 会复制.alert和其子选择器的所有属性 和.alert组成群组选择器 */
background-color: #e2e2e2;
/* 会生成独有的 */ }
/* 使用内置的改变颜色的函数 */
.mycolor {
background-color: #ec262b;
background-color: #9e0e12;
background-color: #707070;
background-color: #12cdc8; }
.oldColor {
background-color: #cd1217; }
/* 可以循环 */
.border-1 {
border: 1px solid blue; }
.border-2 {
border: 2px solid blue; }
.border-3 {
border: 3px solid blue; }
.border-4 {
border: 4px solid blue; }
/* 可以使用while循环 */
.item-3 {
width: 6em; }
.item-2 {
width: 4em; }
.item-1 {
width: 2em; }
/* 可以使用each */
.item-a {
float: right;
margin-right: 8px;
background: #cd1217 url(../img/icon-a.png) left top no-repeat; }
.item-b {
float: right;
margin-right: 8px;
background: #cd1217 url(../img/icon-b.png) left top no-repeat; }
.item-c {
float: right;
margin-right: 8px;
background: #cd1217 url(../img/icon-c.png) left top no-repeat; }
.item-d {
float: right;
margin-right: 8px;
background: #cd1217 url(../img/icon-d.png) left top no-repeat; }
/* 可以自定义函数 */
.invsdcli a:hover {
background-color: #ec262b; }
/* 可以用if来判断 */
.content {
border: 1px solid #e2e2e2; }
/*# sourceMappingURL=test.css.map */