sass、scss的使用_综合

sass

在我们书写css的时候我们会发现重复性代码太多对应的产生了预编译css（最终会编译成css文件），常用的预编译css有什么？

预编译css

1.sass （源码使用ruby写的基于python环境运行）

2.less （诞生比sass要晚整体语法跟sass差不多）

3.styus

概述

sass是世界上最成熟、最稳定、最强大的专业级CSS扩展语言！

特性

1.兼容CSS （在sass文件里面可以直接书写css）

2.支持后缀名为sass（他没有{}以及;）以及 scss（scss常用这个跟css书写差不多）

3.社区成熟（api众多）

sass入门

入门环境

1.安装node （基于node环境运行）

2.使用专门的编译工具进行在线编译运行

3.使用插件编译运行

1.使用vscode下载插件

在这里插入图片描述

2.配置环境（指定的路径需要直接创建）

{
    "workbench.iconTheme": "material-icon-theme","material-icon-theme.showWelcomeMessage": false,"editor.fontSize": 18,"emmet.triggerExpansionOnTab": true,"javascript.updateImportsOnFileMove.enabled": "always","workbench.startupEditor": "none","explorer.confirmDelete": false,"bracketPairColorizer.depreciation-notice": false,"editor.mouseWheelZoom": true,"easysass.compileAfterSave": true,"easysass.formats": [{
    "format": "expanded","extension": ".css"},{
    "format": "compressed","extension": ".min.css"}],"easysass.targetDir": "./css"}

使用

变量声明

$变量名:值;

$a:'red';//变量声明
// 变量声明 注释 这个注释不会到css里面的
/* hello 会生成到css里面去 */
div{
    background-color: $a;font-size: 16px;color: $a;
}
//生成的内容
@charset "UTF-8";
/* hello 会生成到css里面去 */
/*!* hello */
div {
    background-color: "red";font-size: 16px;color: "red";
}

嵌套（无限嵌套）

div{
    color:red;a{
    font-size:16px}
}
//生成内容 div {
    color: red;
}
div a {
    font-size: 16px;
}

&

//& div{
    color:red;&:hover{
    color: blue;}
}
//生成的内容
@charset "UTF-8";
/* hello 会生成到css里面去 */
div {
    color: red;
}
div:hover {
    color: blue;
}

支持运算

$count:50;
div{
    font: $count%2+'px';
}
//生成的内容
@charset "UTF-8";
/* hello 会生成到css里面去 */
div {
    font: "0px";
}

支持判断

p {
    @if 1 + 1 == 2 {
     border: 1px solid; }@if 5 < 3 {
     border: 2px dotted; }@if null  {
     border: 3px double; }
}
//生成的css
@charset "UTF-8";
/* hello 会生成到css里面去 */
p {
    border: 1px solid;
}

混入器 @mixin @includ

@mixin border($width,$color) {
    border: $width solid $color;
}
p{
    @include border(1px,red) } div{
    @include border(1px,blue) } //生成的内容 @charset "UTF-8";
/* hello 会生成到css里面去 */
p {
    border: 1px solid red;
}div {
    border: 1px solid blue;
}

指定默认参数

//指定默认参数值
@mixin border($width:1px,$color:red,$line:solid) {
    border: $width $line $color;
}
p{
    @include border(1px,red,"double") } div{
    @include border(1px,blue) } h1{
    @include border(1px,blue) } img{
    @include border() } //生成内容 @charset "UTF-8";
/* hello 会生成到css里面去 */
p {
    border: 1px "double" red;
}div {
    border: 1px solid blue;
}h1 {
    border: 1px solid blue;
}img {
    border: 1px solid red;
}

继承 @extend

//指定默认参数值
@mixin border($width:1px,$color:red,$line:solid) {
    border: $width $line $color;
}
p{
    @include border(1px,red,"double") } div{
    //继承了p标签@extend p } //生成的内容 @charset "UTF-8";
/* hello 会生成到css里面去 */
p, div {
    border: 1px "double" red;
}

导入对应的scss以及sass文件以及css文件

@import "./a.scss";
p{
    @include border(1px,red,"double")
}
``
}

这个是scss文件

// 这个注释不会到css里面
/* 这里的注释会到css里面去 */// 为什么需要scss 他可以进行变量声明和层级嵌套(无限嵌套)
//声明变量
$a:'red';
div{
    background-color:  $a;font-size: 16px;width: 10px;height: 20px;color: $a;
}
// 层级嵌套 div{
    color: $a;a{
    background-color: $a;}
}// & 取消嵌套时的空格 div{
    color: yellow;&:hover{
    color: tomato;}
}
// 可以做计算
$count:50;
div{
    font-size: $count+5px ;
}
// 支持判断// 混入器
@mixin border($width:1px,$color:#000,$line:solid) {
    border: $width solid $color;
}
p{
    @include border(10px, blue)//使用混入器 } h1{
    @include border(1px, $a) } b{
    @include border() } // 继承 i{
    @extend b;
}
// 导入scss、sass以及css的文件
// @import "文件地址"

这个是自动生成的css文件

@charset "UTF-8";
/* 这里的注释会到css里面去 */
div {
    background-color: "red";font-size: 16px;width: 10px;height: 20px;color: "red";
}div {
    color: "red";
}div a {
    background-color: "red";
}div {
    color: yellow;
}div:hover {
    color: tomato;
}div {
    font-size: 55px;
}p {
    border: 10px solid blue;
}h1 {
    border: 1px solid "red";
}b, i {
    border: 1px solid #000;
}

补充：在以后的代码书写中，使用scss书写css文件，但是自己的html引入的是min.css文件，这个文件体积更小（没有缩进、换行，所有的缩进换行都会被解释为字符然后再渲染到页面上去）

sass、scss的使用