Sass与CSS预处理器-优快云博客

本文链接：https://blog.youkuaiyun.com/u012872771/article/details/103666541

本文介绍了Sass作为流行的CSS预处理器之一，包括其两种语法SCSS和Sass的使用方式，以及如何通过嵌套、直接子元素和父级选择器优化CSS编写，提升样式表的可读性和维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css预处理器有 sass 、less

sass有两套语法: scss和sass，现在我们通常用sass

style.scss

        .foo{
 color: red;
 font-size: 12px;
}

style.sass

        .foo
    color: red
    font-size: 12px

安装sass

        npm install -g sass

编译sass: 编译后sass转css

        sass ./src/style.scss ./dist/index.css

以前的css写法:

        .container {
 max-width: 600px;
 width: 100%;
 margin: auto;
 background: #eee;
}
.container .sidebar,
.container .main {
 padding: 10px;
}
.container .marin {
 margin-left: 220px;
 min-height: 100vh;
 border-left: 2px solid #333;
}
.container .sidebar {
 width: 200px;
 float: left;
}

现在的sass嵌套写法:

        .container {
 max-width: 600px;
 width: 100%;
 margin: auto;
 background: #eee;

 .sidebar,
 .main {
 padding: 10px;
    }

 .marin {
 margin-left: 220px;
 min-height: 100vh;
 border-left: 2px solid #333;
    }

 .sidebar {
 width: 200px;
 float: left;
    }
}

直接子元素:

        .container {
    >.left-area {
 color: #444;
    }
}

等于css:

        .container > .left-area {
 color: #444;
}

&父亲选择器:

        .container {
 &.right-nav {
 color: #333;
    }
}

div{
 &.dome{
 color: yellow;
    }
 a{
 color: red;
    }
}

等于css:

        .container.right-nav {
 color: #333;
}

div.dome {
 color: yellow;
}
div a {
 color: red;
}