Sass基础

羽沢312025-03-04 15:04

目录

什么是sass?

Sass的安装

Sass的编译

Sass的语法：

Sass的基本使用:

一、Sass变量：

二、嵌套语法：

三、@import的使用：

四、@mixin混入和@include:

五、@extend:

六、注释

七、if和@if:

八、@for:

总结：

什么是sass?

SASS（Syntactically Awesome Stylesheet）是一个CSS预处理器，有助于减少CSS的重复，节省时间。它是更稳定和强大的CSS扩展语言，描述文档的样式干净和结构。

说人话：sass就是升级版的css，能够更加灵活的设置样式，它包含css里面的所有语法规则，即scss完全可以按照css来写(当然加点sass里面的东西那就更好了)，文件拓展名有两种：sass\scss，两种文件都是sass技术，但语法不一样，现在主要使用scss，写完sass代码后再编译成css文件来使用

文件创建：

建议使用scss拓展名，在实际开发中，由于 SCSS 与 CSS 语法的兼容性更好，使用更为广泛。

当然使用要根据具体需求来讲

Sass的安装

安装教程：Sass 快速入门教程_哔哩哔哩_bilibili

Sass的编译

如果使用vscode来写Sass代码，则下载一个EsaySass插件来辅助编译(当sass文件保存时会自动编译为css文件，不用手动来编译了)

如果不是使用vscode，则编译阶段看上面安装教程里面的视频

Sass的语法：

Sass主要有两种语法：

  • SCSS（Sassy CSS） 是CSS语法的扩展。这意味着每个有效的CSS也是一个有效的SCSS。SCSS更容易维护大型样式表，并且可以识别供应商特定的语法和许多CSS。SCSS文件使用扩展名**.scss**。

  • 缩进 - 这是较旧的语法，有时仅称为Sass 。使用这种形式的语法，可以简洁地编写CSS。SASS文件使用扩展名**.sass**。

还是那句话，scss语法的sass更容易学，也更常用，建议先学这个

Sass的基本使用:

一、Sass变量：

在css里面有变量，那么sass里面当然也有变量啦

变量的定义:

格式：$变量名:变量值；

变量值的类型：

  • 字符串
  • 数字
  • 颜色值
  • 布尔值
  • 列表
  • null 值

变量的引用：

例如:

css 复制代码 
$mycolor:rgba(10,10,10,0.5);
div{
    background-color: $mycolor;
}

变量的作用域：

变量的作用域是根据定义位置和更改位置来定的，如果变量定义在所有选择器的外面，则就是全局作用域，如果是定义在选择器里面的就是局部作用域，如果定义的是全局作用域，但在选择器里面修改了，那么修改内容只在该选择器里面有用，在外面还是按开始定义的全局作用域来使用

css 复制代码 
$mycolor:rgba(10,10,10,0.5);
div{
    $mycolor:green;
    background-color: $mycolor;
}
p{
    background-color: $mycolor;
}



//编译后
div {
  background-color: green;
}

p {
  background-color: rgba(10, 10, 10, 0.5);
}

二、嵌套语法：

语法规则：

允许一个选择器直接写在另外一个选择器里面,转成css后会自动形成一个后代元素选择器：

如：

css 复制代码 
ul{
    width:500px;
    height:100px;
    li{
        width:100px;
        height:100%;
    }
}

编译为css后是这样的：

css 复制代码 
ul{
    width:500px;
    height:100px;
}
ul li{
   width:100px;
   height:100%;
}

如果想要使用带冒号的选择器，那么自动转换为后代元素选择器是不可以的，就可以使用嵌套里面的一个符号：&，它能保证在编译的时候选择器之间不再出现空格

例如：

css 复制代码 
div{
    background-color: $mycolor;
    &:hover{
        background-color: aquamarine;
    }
}


//编译后

div{
    background-color: $mycolor;
}
div:hover{
    background-color: aquamarine;
}

属性的嵌套：

CSS 属性都有同样的前缀，例如：font-family, font-size 和 font-weight ， text-align, text-transform 和 text-overflow。

在 Sass 中，我们可以使用嵌套属性来编写它们：

例如：

css 复制代码 
font: {
  family: Helvetica, sans-serif;
  size: 18px;
  weight: bold;
}

text: {
  align: center;
  transform: lowercase;
  overflow: hidden;
}

嵌套的使用基本就这些，嵌套是sass的重要一部分，它能是代码更简洁，使代码的结构变得可视化，便于维护代码(css的话选择器乱搁，嵌套好歹能保证选择器在一点的范围内，好修改代码)

三、@import的使用：

@import的作用主要就是导入其它scss文件到另外一个scss文件里面，使一个scss文件能得到另外一scss文件的所有代码，主要用于导入字体、颜色变量存储地的scss代码；

格式:@import "fileName"; //被导入的文件不加拓展名，用引号括起来

css 复制代码 
//demo1.scss文件
div{
    background-color:red;
    width:100px;
    height:200px;
}

//demo2.scss文件
@import "demo1"
a{
    background-color:green;
    width:50px;
    height:100px;
}

//编译后demo2.css为:
div{
    background-color:red;
    width:100px;
    height:200px;
}
a{
    background-color:green;
    width:50px;
    height:100px;
}

在编写demo1.scss的时候如果不希望其编译成css代码，那么文件名就可以为_demo1.scss

在文件名前加一个下划线就可以限制scss文件的编译，@import导入时不用加下划线

四、@mixin混入和@include:

@mixin的定义：

无参：

@mixin 混入名{

样式代码；

}

有参：

@mixin 混入名(bl1,bl2,$bl3...){

样式代码；

}

混入就可以当作c语言里面的函数，封装了一段代码，使用时调用就可以了

@include的定义：

@include只要是用来在一个选择器里面调用混入

格式：@include 混入名；

例如：

css 复制代码 
@mixin mycolor{
    color: red;
    background-color: gray;
}
@mixin mywidth_height($width,$height){
    width: $width;
    height: $height;
}
div{
    @include mycolor();
    @include mywidth_height(100px,100px );
}


//编译后为：
div{
    color: red;
    background-color: gray;
    width: 100px;
    height: 100px;
}

如果不确定参数有几个，那么就可以使用...来表示，可以里面传多个参数：

@mixin myborder($border...);

五、@extend:

在实际写代码的时候会遇到一个元素的样式代码和另外一个元素的样式很像，如果直接复制粘贴就会太多了，那么就可以使用@extend继承；

格式:@extend 选择器名；

继承后当前选择器就会得到被继承选择器的全部样式

例如：

css 复制代码 
#box1{
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    left: 0;
    top:0;
}
#box2{
    @extend #box1;
    left: 100px;
    top: 100px;
}

//编译后
#box1, #box2 {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  left: 0;
  top: 0;
}

#box2 {
  left: 100px;
  top: 100px;
}

当重用统一代码时继承和混入编译为css的区别：

@mixin混入：会直接将重复代码进行复制到需要部分

@extend继承：会将需要重复代码的选择器并集到被继承的选择器上

六、注释

注释包括多行注释和单行注释：

多行注释：/* 。。。。。*/

单行注释；//........

多行注释再转成css后还保留，而单行注释会消失

七、if和@if:

if语句的格式：if( expression, value1, value2 )

当表达式成立时返回value1,反之返回value2

例如：

css 复制代码 
div{
    color:if(1+1==2,red,green);
}

//color值就为red

@if语句的格式：@if(expression){

。。。。。

}@else if(expression){

。。。。。

}

例如：

css 复制代码 
p {
  @if $type == 'alert' {
    color: red;
  } @else if $type == 'success' {
    color: green;
  } @else {
    color: blue;
  }
}

八、@for:

@for：用于循环

格式：1、@for aa from 1 through 4 //意思是aa变量从1循环到4

2、@for aa from 1 to 4 //意思是aa变量从1循环到3，不包后

例如：

css 复制代码 
@for $i from 1 through 3 {
  .item-#{$i} { width: 20px * $i; }
}

**插值：**sass允许对一个选择器等字符串进行插值：#{expression}

总结：

SASS还有多种实用的技术可以学习，这里只是较为基础的部分，详细可以参考下面链接 ！------ ！

参考文献：Sass 输出样式_w3cschool

相关推荐
黑风风43 分钟前
深入理解 Promise 和 Async/Await，并结合 Axios 实践
开发语言·前端·javascript
我命由我123451 小时前
Tailwind CSS 问题：npm error could not determine executable to run
前端·css·前端框架·npm·node.js·html·html5
PBitW1 小时前
阅读《Vue.js设计与实现》 -- 02
前端·vue.js·面试
浩男孩1 小时前
面试官提问：TypeScript 中的 Type 和 Interface 有什么区别？
前端·typescript
m0_582481491 小时前
qt作业day2
java·linux·前端
好想Z☡zᶻ2 小时前
调用的子组件中使用v-model绑定数据以及使用@调用方法
前端·javascript·vue.js
seven1082 小时前
cursor MCP server 如何AI 编程中实现动态数据获取
前端·cursor·mcp
予安灵2 小时前
《白帽子讲 Web 安全》之文件操作安全
前端·安全·web安全·系统安全·网络攻击模型·安全威胁分析·文件操作安全
m0_748244962 小时前
WebSpoon9.0（KETTLE的WEB版本）编译 + tomcatdocker部署 + 远程调试教程
前端
智绘前端3 小时前
sass语法@import将被放弃？？？升级@use食用指南！
前端·css·sass·scss
热门推荐
01DeepSeek各版本说明与优缺点分析02DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具03如何在WPS和Word/Excel中直接使用DeepSeek功能04从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑05本地部署DeepSeek教程（Mac版本）06DeepSeek本地部署详细指南07【docker】Windows10安装Docker Desktop - WSL update failed08保姆级教程：利用Ollama与Open-WebUI本地部署 DeedSeek-R1大模型09DeepSeek r1本地安装全指南10Anaconda +Jupyter Notebook安装（2025最新版）