Sass常用语法详解

笑一个我就告诉你

已于 2024-03-13 18:35:42 修改

阅读量381

点赞数 4

分类专栏： Sass 文章标签： sass 前端 css

于 2024-03-13 18:34:24 首次发布

本文链接：https://blog.csdn.net/weixin_44316925/article/details/136687326

版权

Sass 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

近来重新看了下Sass的一些基本用法，发现有很多之前模糊不清一知半解的地方，本着好记性不如烂笔头的想法决定把我看到的理解的记录下来；一来方便自己以后复习回顾，二来如果恰好能帮到需要的人那也是一大快事。如有不足之处，欢迎各大佬批评指正!

 1. $+变量名 // 定义变量

在这里插入图片描述

 2. scss里分支条件语句的写法   // 通过使用@符号+if，@+else可以进行分支条件判断

在这里插入图片描述

 3. 循环语句写法，选择器上要使用#{$item}   //  类似js模板语法

在这里插入图片描述

 4. 定义数组变量，each循环方法，index获取索引的方法(index方法接收两个参数（数组，当前值）)，js数组从0开始，css数组从1开始

在这里插入图片描述

5. scss混入写法，（类似定义一个函数（@mixin），引入函数(@include)和传参，以及默认参数）

在这里插入图片描述

6. scss嵌套写法，注意伪类==》加&表示自身，不加则表示本身的下一级；>(大于号表示子级，没有大于号的嵌套则表示下级所有的，包括后面级别)

在这里插入图片描述

7. scss继承；scss导入

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

笑一个我就告诉你

关注关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

sass 项目架构详解

wjianwei666的专栏

05-30

115

"format": "expanded", // nested 结束大括号在样式后, expanded 结束大括号独占一行, compact 每个元素样式占一行, compressed 没有换行没有空格 5.版本只有缩进和不缩进。他有两种语法格式，首先是SCSS（Sassy CSS）——也是本文示例所使用的格式——这种格式仅在Css3语法的基础上进行拓展，所有Css语法在SCSS中都是通用的，同时加入Sass特色功能。"savePath": "~/../css" // 为 null 表示当前目录。

Sass -- 条件语句、循环语句、自定义函数

Sun_blog

09-05

617

文章目录条件语句循环语句@for@while@each自定义函数条件语句在Sass中可以使用@if、@if-else 、@if-else 来进行条件判断，用法和JS相同。循环语句在Sass中可以使用@for、@while 、@each 来进行循环操作。 @for @for的用法不同于JS，Sass中的for有两种格式： @for $i from n through m 表示变量i 的范围是[n, m]; @for $i from n to m 表示变量i 的范围是[n, m); @while

参与评论您还未登录，请先登录后发表或查看评论

Sass 条件语句

ivenqin的博客

06-02

358

本节我们来学习 Sass 中的条件语句，可以使用 @if 指令来判断条件表达式的值，然后控制输出。Sass 中的 @if、@else 等指令和 JS 中的 if/else 类似。 @if 指令当 @if 指令后面的表达式返回值为 true 时，输出花括号中的代码，为 false 则不输出。示例：下面例子中，定义了一个变量 $num，使用 @if 指令来判断变量的值，当变量值为 1 时，输出字体颜色为 #ee78da，当变量值为 2 时，输出字体颜色为 #65e3e7： $num:1; h3{

Sass 条件语句、循环语句、自定义函数

Sun_blog

05-20

本文已参与「新人创作礼」活动，一起开启掘金创作之路本文主要记录了Sass 条件语句、循环语句、自定义函数的基本用法。条件语句在Sass中可以使用@if、@if-else 、@if-else 来进行条件判断，用法和JS相同。 $width: 200px; p { @if ($width == 200px) { color: #cc669...

sass基础语法大全，你值得拥有

局外人LZ的博客

06-16

1221

说明：变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加!default 给一个未通过!default 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。通过 #{} 插值语句可以在选择器、属性名或属性值中使用变量。

Sass使用语法（详细）

weixin_44646763的博客

06-08

7343

Sass使用语法整理

详解如何在vue中使用sass

08-30

然后，我们可以使用sass语法编写样式文件，但是需要注意sass语法不使用大括号和分号，而是使用缩进语法。如果您喜欢使用带大括号的语法，可以改成lang="scss"。 3. 使用sass编写样式文件在编写样式文件时，我们...

详解在vue-cli项目中安装node-sass

12-01

1，使用save会在package.json中自动添加。 npm install node-sass --save npm install sass-loader --save 2，通常使用npm安装会出现以下报错，安装...cnpm install node-sass --save （使用淘宝镜像安装node-sass）

sass语法官方规范

09-08

### SASS语法官方规范详解 #### 一、简介 SASS (Syntactically Awesome Style Sheets) 是一种预处理CSS语言，它通过增加强大的功能，如变量、嵌套规则、混合（mixins）、继承、函数等功能，使得CSS更加灵活、模块...

基于vue中css预加载使用sass的配置方式详解

12-11

此外，你的Vue组件模板中需要使用`lang="scss"`来指示样式块是SASS语法，例如： ```html /* SASS代码 */ ``` 这样，当你在Vue组件中编写SASS样式时，Webpack会在构建过程中自动将其编译为CSS，并应用到你的项目...

SASS基本语法总结

最新发布

shuiyunjian1的博客

12-05

1999

SASS是一种无法被浏览器直接执行的语言，我们需要通过预处理工具（可以理解为翻译工具），把SASS文件转化为CSS文件，预处理工具有很多，最推荐的方法的就是VScode的插件Easy SASS的方法，也可用webpack的插件sass-loader。-用作减法规则：number1 - number2前后带空格，（number1-number2）加括号，或者-number-前加空格后加数字。SASS是CSS预处理器，简单来说，SASS是比CSS更高一级的语言，它拥有CSS不具备的语法，比如if条件控制。

Sass语法学习（超详细）

qq_51389038的博客

10-19

1331

在一般编写 CSS 的时候呢，我们一遍一遍的编写相同的选择器去处理深层级的样式，而 Sass 给你一种轻松的方式，你可以在一个样式规则中直接编写另一个样式规则，而不是重复相同的选择器，Sass 将自动组合内外部的选择器。通俗点说就是：你可以在父选择器的样式中直接编写子元素的样式，同理你可以在一个子元素的样式中再去编写孙元素的样式，可以一层一层的嵌套着去写样式。字符串函数数字函数列表函数Introspection函数条件函数Map 函数颜色函数@if 指令@each 指令。

sass的基本介绍与常用语法

qq_45799465的博客

02-25

1246

概念 sass是可编译的的css程序，在sass中可以对css程序定义变量，if，for，函数等等。 scss 语法形式和普通的css语法形式完全相同，只是引入了变量，if，for等。实际项目中推荐使用scss格式的文件。编译浏览器不支持sass文件的执行，只支持css文件的执行。asss或者scss的we你按都必须变异成css文件，这里推荐使用gulp程序打包压缩的同时，编译sass文件。配置安装 nodejs默认是从美国的服务器下载安装第三方依赖包，需要修改下载路径是中国服务器。

sass语法

freeman_xv1的博客

12-04

523

1.基础语法 (1).注释 //注释 /* 1.单行注释 + //开头,后面书写注释 + 会在编译的时候被忽略掉 + 开发注释 2.多行注释 + /**/ + 在两个星号之间书写注释 + 会在编译的时候被保留下来 + 但是将来打包的时候,会被忽略掉 3.强力注释 + /*! 注释内容 */ + 在注释的开始写一个感叹号(!) + 会在编译的时候保留下来 + 将来打包的时候也会保留 */ (2)

sass的常用语法

前端小白的博客

09-09

107

5、条件语句：使用@if、@else if和@else指令可以根据条件选择不同的样式。2、嵌套规则：可以使用嵌套规则来组织样式代码，使代码更易读。3、混合器：使用@include指令可以引用并重用一组样式。6、循环：使用@for和@each指令可以生成重复的样式。4、继承：使用@extend指令可以实现样式的继承。符号定义变量，可以在样式表中重复使用。

Sass常用语法

qq_52099965的博客

11-13

690

Sass常用语法

Sass基础入门与实践提升视频课程

11-06

本课程从基础的sass概述讲起，深入浅出地介绍sass的产生背景、编译方式、基本语法，通过实践页面的开发，全面介绍了如何使用sass结合开发工具，实现编写sass代码的过程。

【js】基础面试题

jiangshen_a的博客

09-07

558

什么是事件流以及事件流的传播机制

Sass入门：安装、语法与高级特性详解

Sass是一个强大的CSS预处理器，它扩展了标准CSS语法，提供了变量、嵌套规则、混合器、选择器继承、控制指令和注释等功能，使得CSS的编写更为高效和灵活。本资料主要针对初学者，讲解了Sass的基本概念、安装与编译...