sass安装及基本语法_@for $i from 3 to 9 by 2

sass

1.什么是sass

Sass (英文全称：Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。
Sass 是一个 CSS 预处理器。
Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。
Sass 完全兼容所有版本的 CSS。
Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性。
Sass 生成良好格式化的 CSS 代码，易于组织和维护。
Sass 文件后缀为 .scss。

2.为什么使用sass

CSS 本身语法不够强大，导致重复编写一些代码，无法实现复用，而且在代码也不方便维护。而Sass 引入合理的样式复用机制，增加了规则、变量、混入、选择器、继承、内置函数等等特性。

3.sass的使用方式

sass是一个基于ruby环境的可编程的css，不能直接用于页面，他需要编译成css以后在html文件中引入使用。
浏览器并不支持 Sass 代码。因此，你需要使用一个 Sass 预处理器将 Sass 代码转换为 CSS 代码

4.sass安装及使用

第一步：npm 安装

npm i -g sass

第二步：创建scss文件 ,例sass.scss

第三步：将scss文件转成css文件，在命令行窗口输入

sass sass.scss sass.css

会生成对应的css文件

运行html文件后效果如下

5.sass基本语法

以下所有sass文件都指后缀名为.scss的文件

5.1 基本运算

5.2 变量

Sass 变量可以存储以下信息：
字符串
数字
颜色值
布尔值
列表
null 值

• Sass 变量必须使用 $ 符号：

Sass 变量的作用域只能在当前的层级上有效果
可以使用 !global 关键词来设置变量是全局的

• 复杂变量

// scss
$linkColor:#ffffff #6fb6fd;
div{
    color: nth($linkColor,1);
    background-color:nth($linkColor,2);
}

// css
div{
    color: #ffffff;
    background-color:#6fb6fd;
}
1
2
3
4
5
6
7
8
9
10
11
12

• 多值变量

多值变量：代表的是多维数据的存储方式，换句话说，所定义的相当于js中的数组。 其数据一般用空格分割， 但是也可以用 逗号 或者小括号分割多个值

// scss
$list : (20px 40px)(30px 20px 10)(4px 3px 2px 5px);//相当于多维数组
.main {
    margin: nth($list,1);
    padding: nth($list,2);
    border-radius: nth($list,3);
}

// css
.main {
	margin: 20px 40px;
    padding: 30px 20px 10;
    border-radius:4px 3px 2px 5px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

• 以键值对形式出现的数据，相当于js中的对象，可以结合each完成循环渲染

// scss
$headers:(box1:red,box2:yellow,box3:green);
@each $key, $value in $headers{
    .#{$key}{
        background-color: $value;
    }
}

//css
.box1 {
  background-color: red;
}
.box2 {
  background-color: yellow;
}
.box3 {
  background-color: green;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

5.3嵌套

• 选择器的嵌套

// scss
ul{
    list-style: none;
    li{
        float: left;
        >a {
            color:#f00;
        }
    }
}

// css
ul{
    list-style: none;
}
ul li{
    float: left;
}
ul li>a {
    color:#f00;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

• 属性嵌套

// scss
.main{
    border:{
        style:solid;
        left:none;
        right:1px;
        color:#b6b6b6;
    }
}

// css
.main{
    border-style:solid;
    border-left:none;
    border-right:1px;
    border-color:#b6b6b6;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

• & 代表上一层选择器

5.4混合mixin

@mixin定义
@include调用
分两种情况：mixin有参数及无参数

• mixin无参数

// scss
@mixin marginCenter{
    margin-left:auto;
    margin-right:auto;
}
.container{
    width: 1000px;
    @include marginCenter;
}

// css
.container{
    width: 1000px;
    margin-left:auto;
    margin-right:auto;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

• mixin有参数

//scss
@mixin left ($a,$b:20px) {
  margin-left: $a;
  margin-right:$b;
}
.box{
  @include left(30px)
}
.box1{
  @include left(20px,40px)
}

//css
.box {
  margin-left: 30px;
  margin-right: 20px;
}

.box1 {
  margin-left: 20px;
  margin-right: 40px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

5.5条件判断

$f:10;
@if($f > 10){
    .box{
    width:300px;
    height:300px;
    background: red;
    }
}@else{
    .box{
    width:2200px;
    height:300px;
    background: red;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

5.6循环

方式1：@for $i from 开始值 through 结束值
方式2：@for $i from 开始值 to 结束值
区别：方式1包括结束值，方式2不包括结束值。其中“开始值”和“结束值”都是正整数。

//scss
@for $i from 1 through 3
{
    .item-#{$i}
    {
        width:(20px * $i);
    }
}
//css
.item-1 {
  width: 20px;
}
.item-2 {
  width: 40px;
}
.item-3 {
  width: 60px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

5.7函数

sass定义了很多函数可供使用，也可以函数，以@fuction开始。
实际项目中使用最多的应该是颜色函数
而颜色函数中又以lighten减淡和darken加深为最，其调用方法为lighten($color,$amount)和darken($color,$amount)，它们的第一个参数都是颜色值，第二个参数都是百分比。

// scss
$baseFontSize:10px;
$gray:#ccc;
@function pxToRem($px){
    @return $px/$baseFontSize*1rem;
}
html {
    font-size:$baseFontSize;
}
body{
    color:lighten($gray,10%);
}
.test{
    font-size:pxToRem(16px);
    color:darken($gray,10%);
}

// css
html {
    font-size:10px;
}
body{
    color:#e6e6e6;
}
.test{
    font-size:1.6rem;
    color:#b3b3b3;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

5.8 插值

• 通过使用插值的方式来实现在“选择器名”、“属性名”以及“属性值”中插入一个“变量的值”，从而来“构造”一个新的选择器名、新的属性名以及新的属性值

#{$变量名}

// scss
$name:top;
.header-#{$name}{
	border-#{name}:1px solid #b6b6b6;
}

// css
.header-top{
    border-top:1px solid #b6b6b6;
}
1
2
3
4
5
6
7
8
9
10

5.9导入

@import ‘文件名’

附录

参考文档 https://www.sass.hk/docs/