scss

JS是什么

1. JS是一种运行在客户端的脚本语言，最早是在HTML(标准通用标记语言下的一个应用)网页上使用，用来给HTML网页增加动态功能
2. 浏览器就是一种运行JS脚本语言的客户端，JS的解释器被称为JS引擎，为浏览器的一部分

使用sass编写代码

1. 在 vs code 中 安装 插件 easy sass
2. 在 vs code 中创建一个 xxx.scss 文件 (注意这里就是 scss 结尾 不是 sass 结尾)
3. 在 xxx.scss 文件中书写 scss 代码
4. 保存代码后，当前的 xxx.scss 文件旁边会自动生成两个文件
   • xxx.css：文件内容为编译后的 css 代码
   • xxx.min.css：文件内容为编译后并且压缩过的 css 代码

sass书写格式

#wrap{
    width: 300px;
    height: 300px;
    border:3px solid #ccc;
    .content{
        width: 250px;
        height: 250px;
        background-color: pink;
        .article{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            p{
                width: 150px;
                height: 150px;
                border:5px solid purple;
                span{
                    font-size: 20px;
                } 
            }
        }
    } 
}

sass不能直接被浏览器识别，所以需要进行编译成正常的css文件才能被浏览器使用。

sass的注释

1. 单行注释，但是在编译的时候不保留

//内容......

2. 多行注释

/*内容......
    ......内容*/

• 编译的时候可以保留
• 压缩的时候不保留

3. 多行注释

/*!内容......
......内容*/

编译和压缩的时候都会保留

变量

在sass中用$来定义变量：

$color:red;
$font_size:12px;
.header{
    background-color: $color;
    font-size:$font_size*2;
}

一般用来定义颜色或者一些常用的像素值

嵌套

/*后代关系*/
.wrap{
    div{
        width:$font_size*10;
    }
}
/*子类关系*/
ul{
    >li{
        padding:12px;
    }
}
/*大括号中表示自己*/
.nav{
    &:hover{
        background-color: $color;
    }
    li{
        &:hover{
            color:$color;
        }
    }
}
/*群组嵌套按正常写即可*/
/* 属性嵌套 */
.content{
    border: {
        style:solid;
        color:$color;
        width:2px;
    }
}
.left{
    border:1px solid #000{
        left:none;
        bottom:{
            width:3px;
        }
    };
}

编译结果：

/*后代关系*/
.wrap div {
  width: 120px;
}

/*子类关系*/
ul > li {
  padding: 12px;
}

/*大括号中表示自己*/
.nav:hover {
  background-color: red;
}
.nav li:hover {
  color: red;
}

/*群组嵌套按正常写即可*/
/* 属性嵌套 */
.content {
  border-style: solid;
  border-color: red;
  border-width: 2px;
}

.left {
  border: 1px solid #000;
  border-left: none;
  border-bottom-width: 3px;
}