Sass使用
1. sass-ruby
sass使用ruby编写,必须先安装ruby再安装sass
**安装ruby,下载ruby installer for windows,记得next后勾选
gem install sass**
2. 使用
- sass test.scss屏幕显示css代码
- sass test.scss dest.css保存为dest.css
- sass –style compressed test.scss dest.css选择compressed编译风格
* nested:嵌套缩进的css代码,它是默认值。 * expanded:没有缩进的、扩展的css代码。 * compact:简洁格式的css代码。 * compressed:压缩后的css代码。
- sass –watch test.scss:out.css监听文件
- sass –watch app/sass:public/style监听目录
3. 语法
- 变量
开头,
blue : #173
使用变量要嵌套在字符串中,写在#{}中,border-#{$side}-radius: 5px; - 计算
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
- 嵌套
使用 & 引用父元素
//比如a:hover伪类
a {
&:hover { color: #ffb3ff; }
}
注释
标准的CSS注释 /* comment */ ,会保留到编译后的文件。
单行注释 // comment,只保留在SASS源文件中,编译后被省略。
在/*后面加一个感叹号!,表示这是”重要注释”。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息
- 代码重用
- 继承:@extend
.class2 {
@extend .class1;
font-size:120%;
}
- 重用代码块minxin
@mixin left {
float: left;
margin-left: 10px;
}
div {
@include left;
}
可以指定参数和缺省值
//用来生成浏览器前缀
@mixin rounded($vert, $horz, $radius: 10px) {
border-#{$vert}-#{$horz}-radius: $radius;
-moz-border-radius-#{$vert}#{$horz}: $radius;
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
#navbar li { @include rounded(top, left); }
#footer { @include rounded(top, left, 5px); }
- 颜色函数?
- 插入文件
@import "path/filename.scss";
高级用法
1. 条件 @if @else
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
- 循环 @for @while @each in
SASS支持for循环:
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
也支持while循环:
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
each命令,作用与for类似:
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
- 自定义 @function
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}
转:http://www.ruanyifeng.com/blog/2012/06/sass.html?20131101171639