Sass学习笔记

Inpro-QD

已于 2022-10-09 16:48:07 修改

阅读量146

点赞数 6

文章标签： sass 学习 javascript 前端 css

于 2022-08-28 22:56:24 首次发布

本文链接：https://blog.csdn.net/m0_49909696/article/details/126559751

版权

Sass相关语法详解

Sass和Scss区别

Sass是CSS3扩展，增加了规则嵌套、变量、混合、选择器继承等等语法，而Scss是Sass的升级版本，具备Sass特性的同时，更能兼具CSS3的语法特点；
Sass使用的是缩进语法，去掉括号的同时，对空格要求更为严格，Scss跟CSS3用法相似；
使用时要注意，同项目可以同时使用Sass和Scss,单文件开发不能同时引用，引用时只需要标签内加 lang=“sass”

<style lang="sass" scoped>
</style>

Sass语法

去掉{}，使用换行来区分选择器名称和属性, 换行替换;来作为属性之间的间隔。

.main-content
  height: 100px

缩进必须为两个空格或2的倍数，空格不规范会导致样式不生效。
Sass的嵌套语法

CSS3语法：

.main .top {
  margin-top:10px;
  height: 100px;
}

Sass语法可改为：

.main
  .top
    margin-top:10px
    height: 100px

父子class的class名称拼接

父选择器名称main-content，子选择器的名称main-content-top，Sass写法：

.mian-content
  height: 500px
  &-top
    height: 100%

Sass的变量使用

变量声明一律用$

 $width = 20px
 .main-content
   width:$width

默认变量只须!default

 $width = 20px !default
 .main-content
   width:$width

Sass中的变量也存在块级作用域

//当前的变量只能在main-content中生效
.main-content
  $width: 20px
  width: $width
// 通过!global可在其他选择器中使用变量
.main-content
  $width: 20px!global
  width: $width
.bottom-content
  width: $width

当你的样式变得越来越复杂，你需要大段的重用样式的代码，独立的变量就没办法应付这种情况了。你可以通过Sass的混合器实现大段样式的重用。

混合器使用@mixin标识符定义：

@mixin field-label
  font-size:16px
  font-weight: 500
  color: #020202\

使用@include来引用混合器

.main-content-title
  @include field-label

Sass中的数字运算

Sass支持(+, -, *, / ,%)运算，如果必要会在不同单位间转换值。

 .main-content
   width: 1px + 4pt

在 CSS 中通常起到分隔数字的用途，Sass同时也赋予了/除法运算的功能。

.main-content
  font-size: 100px / 5px

如果需要使用变量，同时又要确保/不做除法运算而是完整地编译到 CSS 文件中，只需要用 #{}插值语句将变量包裹。

.main-content
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};

Sass的颜色运算

.field-label
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75)

编译为

.field-label
  color: rgba(255,255, 0, 0.75)

圆括号()用于运算

.main-content
  width: 1em + (2em * 3)

Sass的函数运用

Css语句调用函数

.field-label
  color: hsl(0, 100%, 50%);

编译为

.field-label
  color: #ff0000

Sass 函数允许使用关键词参数 (keyword arguments)，上面的例子也可以写成：

.field-label
  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%)

关键词参数给函数提供了更灵活的接口（通过外部传参来控制函数执行效果）。关键词参数可以打乱顺序使用，如果使用默认值也可以省缺，另外，参数名被视为变量名，下划线、短横线可以互换使用。
11. Sass导入样式

传统的CSS具有@import导入功能，但是在项目加载时，@import不会最先加载，导致页面显示的样式会存在j加载顺序的问题导致卡顿，但是Sass完美解决了问题，在项目加载时就会运行@import。被导入的Sass和Scss会编译为一个CSS文件，被导入的文件中所包含的变量或者混合指令@mixin 都可以在导入的文件中使用。
被导入的文件最好附带拓展名，例如·.scss 或 .sass。没有指定拓展名，Sass 将会试着寻找文件名相同，拓展名为 .scss或 .sass的文件并将其导入。

// 推荐写法
@import "global.scss";
// 或者
@import "global";

Sass 允许同时导入多个文件

@import "global.scss", "vuetify.sass";

总结

Sass的缩进语法在实际开发过程中会更高效，但是一定要格外注意缩进的使用，尤其是在父选择器和子选择器的情景下。Sass自带的缩写语法很方便，但是要求使用者有规范的命名习惯，不然sass代码增加过后会很难定位，好的解决办法是加注释，这样对后来者更user friendly。
Scss在功能上和Sass并无区别，但是Scss更加贴近CSS，对大多数开发者而言也更熟悉。