SASS（接node.js）

深碍√TFBOYSˉ_ 2022-12-16 06:16 83阅读 0赞

# SASS #

解决CSS中的一些问题

文件后缀为scss

## 简单使用sass ##

使用前需要下载工具sass:

npm i  sass -g

下载好后：

sass --version

检测是否安装

然后编写scss文件：

$color:red;//相当于定义变量
    div {
    	background-color:$color;//直接使用变量名就可以了
    }

编写好的文件需要转成css:

sass   初体验.scss   ./初体验.css			将初体验.scss编译到当前文件夹下初体验.css

同时生成的.css.map是记录版本等信息的，没什么用

## sass使用命令 ##

后缀：scss和sass两种

为什么不用sass后缀？

sass语法格式：

div
    	color:red;

sass后缀容易写乱（需要缩进，没得括号）

其实css预处理语言不止sass，还有less等，语法差不多

### 监视命令 ###

因为sass文件内容是不断变化的(因为我们不断写入，那么不断编译就很麻烦)，于是有了监视命令

sass  --watch   初体验.scss   初体验.css

命令结束就停止监视

没写完就编译，然后输出报错信息，看着不舒服可以将编辑器（vscode之类的）的自动编译关了，手动保存

写完一个文件还要命令来编写另外一个文件，十分麻烦，于是sass提供了另外一个命令：

监视某个文件夹内的变化：

sass  --watch  sass:css

监视sass文件内的变化，将编译好的文件放在同级的css的文件夹下

这个命令是要在项目文件夹下执行

## sass注释，变量，嵌套 ##

### 注释 ###

单行注释//

多行注释/\*\*/

单行不会被编译，多行会被编译，后期压缩还是会取消掉多行注释的

强制保留的话:

/*！
    多行注释
    */

加个感叹号强制保留

### 变量 ###

语法：

$变量名：值；

值是不需要加引号的

$width:20px;
    div {
    	width:$width*10;//变量是可以进行运算的
    }

### 嵌套 ###

/*
    <div class="container">
       <div class="content">
            <div class="left">
                <p>
                    <a href="#">注册</a>
                    <a href="#">登录</a>
                </p>
            </div>
            <div class="right></div>
       </div>
    </div>
    */
    .container{
        //后代选择器
        .content {
            width:20px;
        }
        //子元素选择器
        >.content{
            width:30px;
            .left {
                width:50px;
                //兄弟选择器
                +.rigth{
                    color:red;
                }
                //&表示当前选择器本身
                &:hover {
                    color:blue;
                }
            }
            //鼠标移入效果
            .left:hover {
                color:green;
            }
        }
    }
    
    
    //css属性嵌套
    div{
        // border:1px solid black;以前的写法可以用，但没必要
        border:{
            left:1px solid #000;
            top:2px solid red;
        }
    }
    
    //只有带横杠的属性才能嵌套

## 混合器，继承，导入 ##

### 混合器 ###

就是函数，只不过在sass里面改了称呼

#### 定义和使用 ####

//定义混合器
    @mixin bor{
    	border:1px solid red;
    }
    
    //使用混合器
    div {
    	@include bor;//调用：@include  函数名；
    }
    
    
    //带参数的定义
    @mixin bac($color,$img,$repeat){
    	background:$color url($img)  $repeat;
    }
    //使用
    div {
    	@include bac(red,'1.jpg',no-repeat)
    }

### 继承 ###

为什么要继承：一个选择器想要使用另一个选择器的样式，就需要继承

.login {
    	border:1px solid #000;
    	color:red;
    }
    .content {
    	//想使用.login的样式
    	@extend  .login;			//语法
    	width:20px;
    }

下面还有种情况(只想继承一小部分)：

div{
        width:20px;
        height:30px;
    }
    p {
        width:20px;
        hieght:80px;
    }
    h2 {
        //想要有width：20px
        border:solid;
    }

可以将公共样式提取出来

\_\{

width:20px;

div,p都@extend \_;h2也一样

### 导入 ###

先写一个变量.scss:

$width:1px;
    $width1:3px;
    $width:300px;
     
    $red:red;
    $blue:blue;
    $green:green;

再写一个混合器.scss:

@mixin bor($width,$style,$color){
        border:$width $color $style;
    }
    @mixin back($color,$img,$repeat){
        background:$color url($img) $repeat;
    }

index.css想要导入这两个文件：

//需要将变量.scss和混合器.scss导入进来
    @import "变量.scss"; 
    @import "混合器.scss";
    div {
        color:$red;
        @include bor($width,$blue,dotted);
    }

相当于public.css的功能（公共样式）