Sass
注:配合查看:Sass和Compass设计师指南
Sass是基于Ruby编程语言的命令行工具。要使用它就必须先在电脑上安装Ruby,Ruby的安装可以通过网址:http://rubyinstaller.org/downloads/,下载最新版Ruby进行安装,安装完后可以使用ruby -v进行验证是否安装成功
Sass安装
通过使用Ruby自带的 RubyGems的系统来进行安装
$ gem install sass
使用sass -v验证是否安装成功
Sass使用
sass test.scss
可以在命令行显示.scss文件转化的css代码
sass test.scss test.css
可以将命令行显示的结果保存成文件
Sass提供的编译风格:
1、nested : 嵌套缩进的CSS代码,它是默认值
2、expanded : 没有缩进的、扩展的CSS代码
3、compact :简洁格式的CSS代码
4、compressed : 压缩后的CSS代码
编译风格的使用:
sass --style compressed test.scss test.css
让Sass监听某个文件或目录,一旦源文件改动,自动生成编译后的版本
监听文件
sass --watch input.scss:output.css
监听目录
sass --watch app/sass:public/stylesheets
sass语法
1、老版本.sass后缀的语法
通过tab键缩进的一种语法规则,并且要求非常严格,还不带有任何大括号和分号,容易出错,不太被接受(Python程序员应该会很喜欢)
2、.scss后缀的语法
sass的新语法格式,外形与CSS几乎一模一样,代码都包裹在一对大括号里,末尾结束处都有一个分号
基本用法
1、变量
所有变量以$开头
$blue : #1875e7; div { color : $blue; }
若变量需嵌套在字符串中,就必须写在#{}中
$side : left; .rounded { border-#{$side}-radius : 5px; }
2、计算功能
body { margin : (14px/2); top : 50px + 100px; right: $var * 10%; }
3、嵌套
div h1 { color: red; }
可以写成:
div { h1 { color: red; } }
属性也可以嵌套:
p { border: { color: red; } }
注:border后面必须加冒号
在嵌套的代码块内,可以使用&引用父元素,例:a:hover可以写成
a { &:hover{ color: #ffb3ff;} }
4、注释
标准的CSS注释/* */会被保留到编译后的CSS文件中
单行注释//,只保留在SASS文件中,编译后被删除
在/* 后加个!,表示是重要注释,即使使用压缩模式编译,也会保留这行注释,可用于声明版权信息
/* !
重要注释
*/
代码重用
1、继承
SASS允许一个选择器继承另一个选择器。例:
.class1 { border: 1px solid #ddd; }
class2要继承class1就要使用@extend命令
.class2 { @extend .class1; font-size: 100%; }
2、Mixin
Mixin有点像C语言的宏(macro),是可以重用的代码块
使用@mixin定义个一个代码块
@mixin left{ float: left; margin-left: 10px; }
使用@include命令,调用这个宏
div { @include left; }
mixin的强大之处在于可以指定参数和缺省值
@mixin left($value: 10px) { float: left; margin-left: $value; }
使用时根据情况输入参数
div { @include left(20px); }
示例:
@mixin rounded($vert, $horz, $radius: 10px) { border-#{$vert}-#{$horz}-radius: $radius; -moz-border-radius-#{$vert}#{$horz}: $radius; -webkit-border-#{$vert}-#{$horz}-radius: $radius; }
注:Firefox支持的厂商前缀写法是非标准的-moz-border-radius-topleft,而不是-moz-border-top-left-radius
调用
#navbar li { @include rounded(top, left); } #footer { @include rounded(top, left, 5px); }
3、颜色函数
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
4、插入文件
@import命令用以插入外部文件
@import "path/filename.scss";
若插入的是css文件,则等同于css的import命令
@import “foo.css”;
高级用法
1、条件语句
@if可以用来判断:
p { @if 1 + 1 == 2 {border: 1px solid #ddd; } @if 5 < 2 {border: 2px dotted #ccc; } }
以及@else配套使用
@if lightness($color) > 30% { background-color: #000; } @else { background-color: #fff; }
2、循环语句
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循环
@each $member in a, b, c, d { .#{$member} { background-image: url("test.jpg"); } }
3、自定义函数
@function double($n) { @return $n * 2; } #sidebar { width: double(2px); }
世界 -- 因技术而精彩