移动端SCSS

一、什么是SASS

SASS是一种强化CSS的辅助工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单可维护。

---

#二、安装和使用（VS Code中）

#1.安装

1. 下载扩展文件 ==Easy Sass==
2. 在用户设置中加入以下代码既可

"easysass.targetDir": "./css"

#2.使用

1. SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss或.sass,推荐使用.scss
2. 编写好的scss代码保存后，会自动在CSS文件夹生成对应的.css文件和.min.css文件
3. 在html文件中只需引入CSS文件夹下生成的CSS文件

---

#三、基本用法

#1. 变量与插值语句

1. SCSS允许使用 ==$== 声明变量

$blue : #1875e7;　
div {
　color : $blue;
}

 

1. 如果变量需要镶嵌在字符串之中，就必须需要写在插值语句 ==#{}== 之中

$side : left;
.rounded {
　　border-#{$side}-radius: 5px;
}

 

#2.计算功能

1. SCSS允许在代码中使用算式

body {
　　margin: (14px/2);
　　top: 50px + 100px;
　　right: $var * 10%;
}

 

#3.嵌套

1. SCSS允许选择器嵌套

div {
    h1 {
　　    color : red;
    }
}

 

1. 属性也可以嵌套

p{
    border:{
        color:red;
    }
    //注意 : 属性嵌套后面需要加上冒号。
}

 

1. 在嵌套的代码块内，可以使用 ==&== 引用父元素

a{
    &:hover{
        color:#ffb3ff;
    }
}

 

1. 优点: 嵌套功能避免了重复输入父选择器，而且令复杂的 CSS 结构更易于管理
2. 弊端：嵌套层级越深，编译出来的css代码的选择器层级也越深，会导致css样式冗余，并且难以维护

#4. 注释

SCSS共有两种注释风格

1. ==/* 多行注释 */== ，会保留到编译后的文件。

2. ==// 单行注释== ，只保留在SASS源文件中，编译后被省略。

3. 在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

/*!
　　重要注释！
*/

 

---

#四、代码的重用

#1. 占位符%

1. SCSS允许通过 ==%== 来声明一个选择器，但必须通过 ==@extend== 指令调用

%wh{
    width:100px;
    height:100px;
}

div{
    @extend %wh;
}

 

#2. 继承 @extend

1. SCSS允许一个选择器，继承另一个选择器

.class1 {
　　border: 1px solid #ddd;
}

 

1. class2要继承class1，就要使用 ==@extend== 命令

.class2 {
　　@extend .class1;
}

 

#3. 混合宏 @mixin

1. 使用 ==@mixin== 命令，定义一个可以重用的代码块。

@mixin left{
    float：left;
    margin-left:10px;
}

 

1. 使用 ==@include== 命令，调用这个混合宏。

div{
    @include left;
}

 

1. @mixin的强大之处，在于可以指定参数和默认值。

@mixin common($w,$h,$bg:pink) {
    width:$w;
    height:$h;
　　background:$bg;
}

 

1. 使用的时候，根据需要加入参数：

div{
    @include common(100px,100px,red)
}

 

#4. 插入文件

==@import== 命令，用来插入外部文件。

@import "reset.scss";

1

#五.高级用法

#1.循环语句

1. ==@for $var from through == 含头含尾

@for $i from 1 through 10{
    .border-#{$i}{
        border:#{$i}px solid blue;
    }
}

 

1. ==@for $var from to == 含头不含尾

@for $i from 1 to 4 {
    .list li {
        &:nth-child(#{$i}) {
            font-size: #{$i}0px;
        }
    }
}

 

#2. 自定义函数

1. ==@function== 用于声明函数 ==@return== 用于返回值
2. 先声明后使用

@function double($n) {
　　@return $n * 2;
}

#sidebar {
　　width: double(5px);
}

 

#scss练习1:

鼠标移上

 

要求1:

设置一个 double函数 border: double(5px) solid #999