sass、scss的使用

SCSS是一种强大的CSS预处理器,提供变量、嵌套、混合、运算等高级功能,简化CSS编写。通过预编译,减少重复代码,提高代码组织性。本文介绍了SCSS的安装、基本语法如变量声明、嵌套、运算及混入,并展示了如何在VSCode中配置和使用插件进行编译。此外,SCSS还支持条件语句和继承,提升代码复用。预编译后的CSS文件体积更小,适用于实际项目应用。

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

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(Syntactically Awesome Style Sheets)SCSSSassy CSS,即 Sass 的语法扩展版本)都是预处理器语言,它们是在原生CSS基础上添加了一些高级功能,使得样式表编写更加灵活、易维护。以下是两者的主要区别: 1. **语法兼容性**: - SCSSSass 的一种写法,它是从 Sass 2.0 版本开始引入的,保持了与 CSS 相似的语法结构,更易于上手。 - Sass 初始版本的语法有自己的特色,但自 3.0 版本以后也向 SCSS 靠拢,支持更多的 CSS-like 写法。 2. **编译过程**: - SCSS 可以直接作为 CSS 文件被浏览器解析,因为它本身就是标准的 CSS,但在实际开发中通常会经过编译器转换为纯 CSS。 - Sass 则需要编译器(如 LibSass, Ruby Sass 或 Dart Sass)先将其编译成 CSS 才能在浏览器运行。 3. **混入(Mixin)** **嵌套规则**: - SCSS 支持这两种功能,它们使代码组织更加清晰,提高了重用性可读性。 - Sass 在早期版本中也有类似的功能,但在 SCSS 中更为普遍强大。 4. **变量(Vars)** **作用域**: - SCSS Sass 都支持变量定义作用域控制,这让开发者能够统一管理修改颜色、尺寸等全局值。 5. **导入(Include)** **继承(Inheritance)**: - SCSS Sass 都支持文件的导入,方便管理大型项目中的样式;继承则用于复用样式,两者都提供。 6. **性能**: - SCSS 本身语法较简洁,对新手来说更友好,且因为是纯 CSS,编译速度相对较快。 - Sass,特别是 Ruby Sass,在处理大量复杂的 Mixins 嵌套时可能会消耗更多资源,尤其是对于大型项目。 相关问题: 1. Sass 是否可以直接在浏览器中使用? 2. SCSS 提供了哪些额外的特性来优化CSS编写? 3. 如何决定在项目中使用 Sass 还是 SCSS
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值