Sass的基础姿势

2016-10-14 10:05:35来源:oschina作者:Mllitch人点击



## 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使用`$`开头定义变量
```CSS
$white:#FFFFFF;
body{
color: $white;
}
```
如果需要将变量插入到字符串中,需要将变量写在`#{}`中
```CSS
$imgUrl:"../img/test.png";
body{
background-image: url(#{$imgUrl});
}
```
## 运算
SASS允许在代码中使用算式
```CSS
$min-left:10px;
body{
margin-left:$min-left+20px;
}
```
## 嵌套
SASS允许嵌套规则
```CSS
div{
//选择器嵌套
p{
color:#FFFFFF;
}
//属性嵌套
margin:{
left:10px;
}
//伪类嵌套
&:hover{
color:#F4F4F4;
}
}
```
编译成CSS样式为:
```CSS
div {
margin-left: 10px;
}
div p {
color: #FFFFFF;
}
div:hover {
color: #F4F4F4;
}
```
## 继承
SASS可以使用`@extend`继承于另一个选择器。
```CSS
.page{
background-color:#F7F7F7;
}
.div1{
@extend .page;
color:#FFFFFF;
}
```
## Mixin
SASS提供`Mixin`类似“函数”的重用代码块。
使用`@mixin`定义样式代码块,然后使用`@include`调用该样式。
不同于`@extend`的是`Mixin`定义样式**不会编译输出在CSS样式中,并且可以指定参数和默认值。**
```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`语句可以用来做条件判断
```CSS
$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`后面跟结束数值。
```CSS
@for $i from 1 to 20 {
.page-index#{$i} {
color: #FFFFFF;
}
}
```
### WHILE循环
使用`@while`定义循环体,后面跟循环条件。
```CSS
//循环变量
$i: 2;
@while $i<10{
page-index#{$i} {
color: #F4F4F4;
}
$i=$i=1;
}
```
## 自定义函数
使用`@function`语句可以自定义函数,`@return`表示函数的返回值
```CSS
@function calcNumber($num) {
@return $num+10;
}
body {
margin-left: calcNumber(20px);
}
```

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台