首页 > 其他分享> 文章详细

SASS和SCSS学习笔记

2021-07-03 12:02:04 阅读：163 来源： 互联网

标签：SCSS 函数 SASS 样式笔记嵌套指令选择器

SASS和SCSS

一种语言两种书写形式

SCSS在 CSS3 语法的基础上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的
SASS使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性

下面描述以SASS称呼这种语言

SASS功能

嵌套

嵌套减少了代码书写量，更好的把相关规则组织在一起。嵌套可分为选择器嵌套和属性嵌套。在选择器嵌套中可以使用&符号来引用父选择器。在属性嵌套中，属性可以有自己的值，也可以没有。

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

.funky {
  font: 20px/24px {
    family: fantasy;
    weight: bold;
  }
}

SassScript

SassScript为语言添加了计算功能，它支持变量，运算（数学运算和逻辑运算），函数，插值语句

变量名称以$符号开头。变量类型有数字，字符串，颜色，布尔值，null，list和map
插值语句是用#{}括起来的表达式，可以用在选择器名上，也可以用在属性值上，作用的是可以去除字符的引号，避免进行数学运算

@-Rules和指令

Sass支持所有的CSS3 @-Rules，并定义了自己特有的指令。

@import用于导入SASS文件，在导入文件中可以使用被导入文件中的变量和混合指令
@media媒体查询
@extend类似于面向对象中的继承，允许一个样式继续另一个样式所有规则
@at-root
@debug
@warn

控制指令

控制指令类似于编程语言中的控制结构，可以根据条件选择输出样式，可以循环输出多个样式等待

@if
@for
@each
@while

混合指令

混合指令类似于C语言中宏，在混合指令中定义一些可重复使用的样式，然后在其他的规则中包含这些样式，注意这个和@extend指令是不同的，混合指令类似与一个函数，它也可以有参数，定义这个函数使用@mixin，调用这个函数使用@include。@content类似与回调函数的作用，可以把一段特殊样式导入到混合样式中

函数指令

函数指令用于自定义函数

标签：SCSS,函数,SASS,样式,笔记,嵌套,指令,选择器
来源： https://blog.csdn.net/qq_34017326/article/details/118436730

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9