SASS（接node.js）

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的功能（公共样式）