SASS了解和学习

原生css的不便

1. 书写重复的选择器。

2. 修改css属性不方便，一处改每处都需要修改。

3. css代码重复，比如水平垂直居中。

基本概念

• sass是css预处理器，可以为网站启用可定义、可管理和可重用的样式表。SASS是一种动态样式表语言，拓展了css的功能。

• CSS预处理是一种脚本语言，可以拓展css并将其编译为常规css语法，以便浏览器进行解析。

• SAS对css进行扩展，通过它提供嵌套、变量、混合等等操作加快编写css的效率。

• 目的：极大提升编写css代码的效率

• 官网：Sass世界上最成熟、稳定和强大的CSS扩展语言 | Sass中文网

基本使用

• 使用vs code中的easy sass插件来使用

  • 安装easy sass插件

  • 新建以.scss为后缀名的文件，在里面书写css代码

  • easy sass插件会自动将sass代码编译为css代码，在页面中通过link标签引入

• 手动自动编译好的css文件的存储路径

  • 在设置中搜索easysass更改对应的路径，注意路径是从工作区出发的

嵌套

• 概念：SASS支持选择器里面嵌套子选择器

• 作用：让sass代码对应css代码层级结果清晰明了，不会出现父子标签之间权重。

• 语法：

父选择器{
    css代码
    //后代选择器写法
    子选择器{
        //子代选择器写法
        >子选择器{
            
        }
        //亲兄弟选择器
        +选择器{
            
        }
        //后续所有的标签
        ~选择器{
            //&代替选择器本身
            &:hover{
                
            }
            &::before{
                
            }
        }
    }
}

• 实例

​
.header{
    width:100%;
    height:70px;
    .container{
        width:1200px;
        height:70px;
        border:1px solid red;
        .logo{
            width:200px;
            height:100px;
            //&代表选择器本身
            &:hover{
                
            }
            &::before{
                content:"before";
                display:block;
            }
        }
        .nav{
            width:500px;
            //选择后续所有的div选择器
            ~div{
                
            }
        }
    }
}

变量

• 概念：变量可以看作一个存储数据的容，可以在代码中重复被使用。

• 语法：

  $变量名：数据;    

  • 数据可以是任意的css属性值（包括复合属性的属性值）

  • 注意：一定要先定义才能使用变量

  • 变量命名规范：

    • 可以包含数字、字母、-和_

    • 不能以数字开头

    • 多个单词之间建议使用-

  • 变量可以进行运算

• 实例：

//先定义变量，才能使用变量
$mycolor:red;
$wid:1200px;
$fontsize:20px;
$myborder:1px solid green;
​
.box{
    width:$wid;
    color:$mycolor;
    font-size:$fontsize;
    border:$myborder;
}