sass学习笔记

在scss文件中使用@import。它不同于css中的@import。

css中的@import会有两个弊端：

1、必须放在代码的最前边

2、对性能不利

在scss文件中的@import使用CSS原生@import的既定规则

1、当@import 后面跟的是以.css文件结尾的时候

2、当@import 后面跟的是以http://开头的字符串

3、当@import 后面跟的是url()函数的时候

4、当@import 后面带有media queries的时候

scss都会认为你想使用原生css的@import

两个sass的既定规则

1、当@import 后面的文件没有后缀名的时候

sass会添加.scss或者.sass的后缀

2、同意目录下，局部文件和非局部文件不能重名

sass的变量操作

1、直接操作变量，即变量表达式

2、通过函数

1、跟代码块无关的函数，多是自己内置函数，称为functions

2、可重用的代码块，称为mixin

1、通过@include的方式调用

2、通过@extend的方式调用

以上两种方式都可以继承多个选择器

extend 不可以继承选择器序列

使用%，用来构建只用来继承的选择器

sass中的@media跟css的区别

sass中的@media query可以内嵌在css规则中

在生成css的时候

media query才会被提到样式的最高层级

好处：避免重复书写选择器或打乱样式表的流程

在嵌套的时候使用sass的at-root指令

明确指定被嵌套的内容输出到样式顶层