Sass的基础姿势
SASS是什么
传统的CSS是一种单纯的描述性样式文件,然而SASS可以对CSS进行预编译处理。 在SASS源码中可以使用变量、函数、继承等动态语言的特性,并且可以编译成CSS文件。
安装与使用
安装
由于sass是ruby写的,所以想要使用sass就需要安装ruby环境。然后再使用gem安装sass。 输入下面的命令进行安装sass:
gem install sass
可以使用sass -v命令查看sass的版本。
使用
新建一个后缀名为.scss源码文件,就可以编辑sass源码了。 然后使用下面的命令可以将源码文件编译转换为css并显示在屏幕上。
sass test.scss
也可以在后面加上后缀名为.css的文件名,就可以在当前目录生成css文件。如下:
sass test.scss test.css
注:.sass与.scss这两种的区别在于.sass文件对代码的排版有着非常严格的要求,而且没有大括号,没有分号。
命令参数
--style:编译风格 sass提供四种编译风格选项:
nested:嵌套缩进的css代码,它是默认值。
expanded:没有缩进的、扩展的css代码。
compact:简洁格式的css代码。
compressed:压缩后的css代码。
e.g.
sass test.scss test.css --style compressed
--watch:监听文件变动 sass可以监听源文件变动,并自动生成编译后的版本。 e.g.
//监听单个文件 sass --watch test.scss:test.css //监听目录 sass --watch sassFileDirectory:cssFileDirectory
变量
SASS使用$开头定义变量
$white:#FFFFFF; body{ color: $white; }
如果需要将变量插入到字符串中,需要将变量写在#{}中
$imgUrl:"../img/test.png"; body{ background-image: url(#{$imgUrl}); }
运算
SASS允许在代码中使用算式
$min-left:10px; body{ margin-left:$min-left+20px; }
嵌套
SASS允许嵌套规则
div{ //选择器嵌套 p{ color:#FFFFFF; } //属性嵌套 margin:{ left:10px; } //伪类嵌套 &:hover{ color:#F4F4F4; } }
编译成CSS样式为:
div { margin-left: 10px; } div p { color: #FFFFFF; } div:hover { color: #F4F4F4; }
继承
SASS可以使用@extend继承于另一个选择器。
.page{ background-color:#F7F7F7; }.div1{ @extend .page; color:#FFFFFF; }
Mixin
SASS提供Mixin类似“函数”的重用代码块。 使用@mixin定义样式代码块,然后使用@include调用该样式。 不同于@extend的是Mixin定义样式不会编译输出在CSS样式中,并且可以指定参数和默认值。
//不带参数的mixin@mixin page{ background-color:#F7F7F7; }//带参数的mixin@mixin setDefMargin($left, $right, $bottom: 10px,$top: 10px){ margin:$top $right $bottom $left; }.test{ @include page; @include setDefMargin(20px,30px); color:#FFFFFF; }
需要注意的是,必须先定义没有默认值的参数,后指定有默认值的参数。
Import
sass可以使用@import语句,来引用指定的外部文件。
//引入scss文件 @import "variable.scss"; //引入css样式文件 @import "style.css";
条件语句
使用@if和@else语句可以用来做条件判断
$min-margin: 10px; @mixin init-margin($left){ //判断传入的参数是否大于最小值 @if $left > $min-margin { margin-left: $left; } @else { margin-left: $min-margin; } }body { @include init-margin(5px); }
循环语句
FOR循环
使用@for来定义循环体。 $i表示循环变量,from 后面跟上开始数值,to后面跟结束数值。
@for $i from 1 to 20 { .page-index#{$i} { color: #FFFFFF; } }
WHILE循环
使用@while定义循环体,后面跟循环条件。
//循环变量$i: 2; @while $i自定义函数
使用@function语句可以自定义函数,@return表示函数的返回值
@function calcNumber($num) { @return $num+10; }body { margin-left: calcNumber(20px); }