浏览器不认识sass,因此使用sass就要编译,有两种方式:
- 命令行编译
- 工程化编译
使用
- SASS文件就是普通的文本文件,里面可以直接使用CSS语法。文件后缀名是.scss
///在屏幕上显示.scss文件转化的css代码
sass test.scss
- 如果要将显示结果保存成文件,后面再跟一个.css文件名。
sass test.scss test.css
- SASS四个编译风格的选项:
- nested:默认值,嵌套缩进的css代码
- expanded:没有缩进的、扩展的css代码。
- compact:简洁格式的css代码。
- compressed:压缩后的css代码。(生产环境中用得最多)
sass --style compressed test.sass test.css
SASS监听某个文件或目录,一旦源文件有变动,就自动生成编译后的版本。
// 监听文件
sass --watch input.scss:output.css
// 监听目录
sass --watch app/sass:public/stylesheets
变量
- 所有变量以$开头。
$blue:#1875e7;
div{
color:$blue;
}
- 变量镶嵌在字符串中,必须写在#{}之中:
$side:left;
.round{
border-#{$side}-radius:5px;
}
- 允许代码使用算式:
body{
margin:(14px/2);
top:50px+100px;
right:$var*10%;
}
- 嵌套:
- 选择器嵌套
css代码
div h1{
color:red;
}
可以写成
div{
h1{
color:red;
}
}
- 属性嵌套
如:border-color:red
p{
border:{
color:red;
}
}
ps:在border后面必须加上冒号
- 在嵌套代码块内,可以加上&引用父元素
- &在前
css代码
h1{
font-size: 20px ;
margin-bottom: 10px ;
&.some-seclector{
font-size: 24px ;
margin-bottom: 20px ;
}
}
输出css
h3{
font-size: 20px ;
margin-bottom: 10px ;
}
h3.some-selector {
font-size: 24px;
margin-bottom: 20px;
}
- &在后
css代码
h1{
font-size: 20px ;
margin-bottom: 10px ;
.some-seclector &{
font-size: 24px ;
margin-bottom: 20px ;
}
}
输出css
h3 {
font-size: 20px;
margin-bottom: 10px;
}
.some-parent-selector h3 {
font-size: 24px;
margin-bottom: 20px;
}
- 注释
- [ ]//aaaaaaaaaaaaaaa
- [ ]/* */
代码的重用
- 继承
SASS允许一个选择器,继承另一个选择器
.class1 {
border: 1px solid #ddd;
}
class2要继承class1,就要使用@extend命令:
.class2{
@extend.class1;
font-size:120%;
}
- Mixin
Mixins能够包含任何在 CSS 和 Sass 中有效的内容。
@mixin link {
a {
color: blue;
&:visited {
color: purple;
}
&:hover {
color: white;
}
&:active {
color: red;
}
}
}
可以重用代码
使用@mixin命令,定义一个代码块
@mixin left{
float:left;
margin-left:10px;
}
使用@include命令,调用这个mixin
div{
@include left;
background-color: green;
}
解析之后
div{
float:left;
margin-left:10px;
background-color: green;
}
在mixin模块的定义中还可以包含其他的mixin,如:
@mixin button-blue {
@include button;
@include link;
}
当Mixins模块包含选择器和规则集,也就是mixins包含的内容本身就是有效的css样式时,他们就可以在其他规则集上被调用
@mixin link {
a {
color: blue;
&:visited {
color: purple;
}
&:hover {
color: white;
}
&:active {
color: red;
}
}
}
之后可以直接调用这个模块,即使不在一个选择器上
@include link;
这段代码将会被解析:
a {
color: blue;
&:visited {
color: purple;
}
&:hover {
color: white;
}
&:active {
color: red;
}
}
之所以能这样调用是因为这个mixin模块内既包含了选择器也包含了样式,如果没有选择器,那么编译后将不会有内容显示。
- 参数的使用
@mixin button($background) {
font-size: 1em;
padding: 0.5em 1.0em;
text-decoration: none;
color: #fff;
background: $background;
}
.button-green {
@include button(green);
}
解析后
.button-green {
font-size: 1em;
padding: 0.5em 1.0em;
text-decoration: none;
color: #fff;
background: green;
}
传递多个参数,参数间用逗号隔开
@mixin button($background, $color) {
font-size: 1em;
padding: 0.5em 1.0em;
text-decoration: none;
color: $color;
background: $background;
}
.button-green {
@include button(green, #fff);
}
给参数设置默认值
@mixin button($background: green) {
font-size: 1em;
padding: 0.5em 1.0em;
text-decoration: none;
color: #fff;
background: $background;
}
如果想要覆盖参数值,则:
.button-blue {
@include button(blue);
}
关键字参数
一起传递关键字名称和值也被称为命名参数,你也可以以任意顺序传递命名参数。下面两种传递方式解析后会得到相同的结果。
.button-green{
@include button($background:green,$color:#fff);
}
@mixin生成浏览器前缀:
@mixin prefixer($property,$value,$prefixers:webkit moz){
#{$property}:$value;
@each $prefixer in $prefixers{
@if $prefix ==webkit{
-webkit-#{$property}:#{$value};
}
@else if $prefix==moz{
-moz-#{$property}:#{$value};
}
@else if $prefix==o{
-o-#{$property}:#{$value};
}
@else if $prefix==ms{
-ms-#{$property}:#{$value};
}
}
}
使用方法:
#main{
@include prefixer(border-radius,10px,webkit moz ms o);
}
编译为:
#main {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px; }
- 颜色函数
SASS提供了一些内置的颜色函数,以便生成系列颜色。
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
- 插入文件
@import命令,用来插入外部文件
@imoort "path/filename.scss";
如果是插入.css文件,则等同于css的import命令:
@import "foo.css";
条件语句
@if b+a==2 {
border:1px solid red;
}
@else if a+b==3 {
background-color: #fff;
}
循环语句
- for循环
@for $i from 1 to 10{
.border-{#$i}{
border:#{$i}px solid red;
}
}
- while循环
$i:6;
@while $i>0{
.item-#{$i}{
width:10px;
}
$i:$i-2;
}
- each命令
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
自定义函数
@function double($n){
@return $n*2;
}
#sidebar{
width:double(5px);
}