// 在 已有代码 下面 添加下面 代码,一般刚刚下载打开最后一行是:
// "liveSassCompile.settings.autoprefix": [],
// 所以直接 把下面复制进去保存就行
"liveSassCompile.settings.autoprefix": [
// ">1%"是指 通过全球使用情况统计信息选择出的高于1%使用率的浏览器版本。
// "last 2 versions"是指 每个浏览器的最后2个版本。
"> 1%",
"last 2 versions"
],
"liveSassCompile.settings.formats": [
{
"format": "expanded", // 出口css样式为展开格式
"extensionName": ".css",
"savePath": "~/../css", // null 为当前目录
"savePathReplacementPairs": null
}
],
"liveSassCompile.settings.generateMap": false, // 去掉编译时出现的css.map文件
"liveSassCompile.settings.excludeList": [
"/**/node_modules/**",
"/.vscode/**"
],
2.1 语法嵌套规则
避免了重复输入父选择器,复杂的 CSS 结构更易于管理
在嵌套 CSS 规则时,可以用 & 代表嵌套规则外层的父选择器。例如:
有时,需要定义一套公共样式 ,使用占位符选择器%foo,然后通过 @extend
指令引入,尤其是在制作 SCSS 样式库的时候,在需要时引入,希望 SCSS 能够忽略用不到的样式,达到简略代码的目的。
2.2 代码注释
**SCSS 支持两种注释:**
2.3 SCSS 变量
使用 CSS 自定义属性_打不着的大喇叭的博客-CSDN博客
定义:在选择器内容定义的变量,只能在选择器范围内使用
定义后能全局使用的变量
1、在选择器外面的最前面定义的变量
2、使用 !global 标志定义全局变量
**SCSS 支持 7 种主要的数据类型:**
2.4 SCSS 导入@import
SCSS 拓展了 @import 的功能,允许其导入 SCSS 或 SASS 文件。被导入的文件将合并编译到同一个 CSS 文件中,另外,被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。
注意:
1、如果一个目录正在被 SCSS 程序监测,目录下的所有scss/sass源文件都会被编译,但通常不希望局部文件被编译,因为局部文件是用来被导入到其他文件的。如果不想局部文件被编译,文件名可以以下划线 (_)开头,如下图的 public 最好前面添加 “_” 开头,这样就不会导出 css 文件,如 _test.scss 文件,因为我们只是单纯引入,不需要 css 文件。
2、还有就是带(_)文件,在引入时,可以不写(_),即引入 _test.scss , @import "test"
3、这也就意味着,同一个目录下不能同时出现两个相关名的 SCSS 文件(一个不带,一个带),添加下划线的文件将会被忽略。
如下几种方式,都将作为普通的 CSS 语句,不会导入任何 SCSS 文件
2.5 SCSS 混合指令 (Mixin Directives)
混合指令(Mixin)用于定义可重复使用的样式。混合指令可以包含所有的 CSS 规则,绝大部分 SCSS 规则,甚至通过参数功能引入变量,输出多样化的样式。
@mixin mixin-name() {
/* css 声明 */
}
注意:必须多少参数,多少值,没有值可为0
2.6 SCSS @extend(继承)指令
在设计网页的时候通常遇到这样的情况:一个元素使用的样式与另一个元素完全相同,但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class,一个通用样式,一个特殊样式。
注意:上面的图中 .alert 只是单纯的用于继承,不用做元素类名,但是它却导出成了 类名,这时我们可以用 占位选择器%foo 对其进行声明,不用于元素类名
2.7 @mixin(混入)和 @extend(继承)的区别
2.8 SCSS 运算符 的基本使用
所有数据类型都支持等号运算符:
符号说明==等于!=不等于
符号说明< (lt)小于> (gt)大于<= (lte)小于等于>= (gte)大于等于
符号说明and逻辑与or逻辑或not逻辑非
符号说明+加-减*乘/除%取模 线数字、百分号、css部分单位(px、pt、in...)【线数字与百分号或单位运算时会自动转化成相应的百分比与单位值】
注意:这里 “*” 左右两边 都 带 单位,就会报错
注意:" / " 在 CSS 中通常起到分隔数字的用途,SassScript 作为 CSS 语言的拓展当然也支持这个功能,同时也赋予了 " / " 除法运算的功能。也就是说,如果 " / " 在 SassScript 中把两个数字分隔,编译后的 CSS 文件中也是同样的作用。
**以下三种情况 / 将被视为除法运算符号:**
注意:如果需要使用变量,同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中,只需要用 #{} 插值语句将变量包裹。
**注意**:
2.9 SCSS 插值语句 #{ }
提出需求:如果需要使用变量,同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中。
解决方法:只需要用 #{} 插值语句将变量包裹。
通过
#{}
插值语句可以在选择器、属性名、注释中使用变量:
2.10 SCSS 常见函数的基本使用
常见函数简介,更多函数列表可看:Sass: Built-In Modules
SCSS 包含很多操作颜色的函数。例如:lighten() 与 darken()函数可用于调亮或调暗颜色,opacify()函数使颜色透明度减少,transparentize()函数使颜色透明度增加,mix()函数可用来混合两种颜色。
SCSS 有许多处理字符串的函数,比如向字符串添加引号的 quote()、获取字符串长度的str-length() 和 将内容插入字符串给定位置的 str-insert()。
数值函数处理数值计算,例如:percentage()将无单元的数值转换为百分比,round()将数字四舍五入为最接近的整数,min()和max()获取几个数字中的最小值或最大值,random()返回一个随机数。
List 函数操作 List,length() 返回列表长度,nth() 返回列表中的特定项,join() 将两个列表连接在一起,append() 在列表末尾添加一个值。
Map函数操作Map,map-get() 根据键值获取map中的对应值,map-merge() 来将两个map合并成一个新的map,map-values() 映射中的所有值。
选择符相关函数可对CSS选择进行一些相应的操作,例如:selector-append()可以把一个选择符附加到另一个选择符,selector-unify()将两组选择器合成一个复合选择器。
自检相关函数,例如:feature-exists() 检查当前 SCSS 版本是否存在某个特性,variable-exists() 检查当前作用域中是否存在某个变量【注意:例如检测 color 不需要加 ,写 color 即可】,mixin-exists() 检查某个mixin是否存在。
自检函数通常用在代码的调试上
2.11 SCSS 流程控制指令@if、@for、@each、@while
@for 指令可以在限制的范围内重复输出格式,每次按要求(变量的值)对输出结果做出变动。这个指令包含两种格式:@for var from through ,或者 @for var from to
区别在于 through 与 to 的含义:
through
时,条件范围包含与的值【例:1-5,包含 5】。to
时条件范围只包含的值不包含 的值【例:1-5,不包含 5】。@each 指令的格式是 var in <list> , $``$length 或者 name,而 <list> 是一连串的值,也就是值列表。
@while 指令重复输出格式直到表达式返回结果为 false。这样实现比 @for 更复杂的循环。
2.12 SCSS @function 的使用
函数的作用:把一些比较复杂或经常用些的内容进行抽离(封装),以便重复使用
提示:函数名function-name 与function_name 是相同的
@function function-name($param1, $param2, ...){
...
@return $value;
}
它只允许在 @函数体 中使用,并且每个 @function 必须以@return结束。当遇到 @return时,它会立即结束函数并返回其结果。
/**
*定义线性渐变
*@param $direction 方向
*@param $gradients 颜色过度的值列表
*/
@function background-linear-gradient($direction, $start-color, $end-color:blue) {
@return linear-gradient($direction, $start-color, $end-color);
}
1、正常传参调用
.header {
background-image: background-linear-gradient(to right, red, green);
}
2、省略默认值【因为默认值已经设好了】
.header {
background-image: background-linear-gradient(to right, red);
}
3、按照参数名传参
.header {
background-image: background-linear-gradient($start-color: red, $direction: to bottom);
}
$gradients... => 注意后面这三点,加上后,这个是 可变参数
@function background-linear-gradient($direction, $gradients...) {
@return linear-gradient($direction, $gradients);
}
.header {
background-image: background-linear-gradient(to bottom, red, green, blue);
}
注意点:
$widths: 50px,30px,100px;
.logo {
width: min($widths); <= 错误写法:会报错,我们需要用可变参数才对
width: min($widths...);
}
语法:if(condition, if-true, 解释:判断 condition,如果条件成立,则返回 if-true 的结果,如果条件不成立,则返回
2.14 SCSS @use 的使用
注意1:使用 @use 时,会把前面所有文件的其中的同类名覆盖,而 @import则不会,会全部显示。
注意2:使用 @use 时,重复引用 一个文件,会报错,但你又想引用,那就需使用模块名。
注意:如果下面没通过模块名去调用 $font-szie ,就会报错,可通过取消命名空间去除报错
可能@use "" as * 来取消命名空间,这种方式加载的模块被提升为全局模块
注意:这种方式慎用
如果加载的模块内部有变量只想在模块内使用,可使用 - 或 _ 定义在变量头即可
2.15 SCSS @forward的使用
作用:通过 @forward
加载一个模块的成员,并将这些成员当作自己的成员对外暴露出去,类似于类似于 es6 的 export ...,通常用于跨多个文件组织 SCSS 库
注意:当多个被转发的文件存在相同变量、函数、混入时会有问题,可以通过定义前缀解决
默认情况下,**@forward
** 会将一个模块中所有成员都转发,如果只想转发某些成员,当你不想
转发所有变量、函数、混入时,可使用 hide \ show :
@forward "module" hide $var, mixinName, fnName
禁止转发某些成员@forward "module" show $var, mixinName, fnName
只转发某些成员 各个成员通过逗号 ,
分隔开,如果成员是变量,不能省略 $
符号。
当一个模块里面须要同时使用@use与@forward引用同一文件时,建议先使用@forwar后再使用@use,不然某些情况可能报错
@use 'uses/code';
@forward 'uses/common' as com-*;
@forward 'uses/global' as glob-* show glob-base;
@use 'use/common' as c1;
.test {
font-size: c1.$font-size;
color: code.$color;
}
2.16 SCSS 中 @at-root 使用
作用:@at-root 可以使被嵌套的选择器或属性跳出嵌套【例子:比如一段嵌套的样式对应的html有一天需要移动到另一层div中,这时,你加了 @at-root 在样式中,就什么都不用动了】
@at-root <selector>{
...
}
需要实现下面的效果
.block{width: 1000px;}
.block__element{font-size: 12px;}
.block--modifier{font-size: 14px;}
.block__element--modifier{font-size: 16px;}
默认 @at-root 只会跳出选择器嵌套,而不能跳出 @media 或 @support ,如要跳出这两种,需用 @at-root (without: media),@at-root (without: support)。这个语法关键词有四个【@at-root (without: all)、@at-root (without: rule)】:
@at-root (without: ...) 表示在当前作用域生成的 CSS 规则将不包含指定的选择器。例如:
.container {
@at-root (without: .nested) {
color: red;
}
}
.nested {
color: blue;
}
上述代码中,使用 @at-root (without: .nested) 指令将生成 .container 的规则放在顶层,排除了包含 .nested 的规则,并且生成的 CSS 如下:
.container {
color: red;
}
.nested {
color: blue;
}
注意到 .nested 规则没有被移动到顶层,因为在 @at-root (without: .nested) 中指定了排除该选择器。
@at-root (with: ...) 表示只有指定的选择器会被包含在生成的 CSS 规则中。例如:
.container {
color: red;
@at-root (with: .nested) {
color: blue;
}
}
.nested {
font-weight: bold;
}
上述代码中,使用 @at-root (with: .nested) 指令将生成 .container 的规则和包含 .nested 的规则放在顶层,并且生成的 CSS 如下:
.container {
color: red;
}
.nested {
color: blue;
font-weight: bold;
}
可以看到,.container 和 .nested 的规则都被移动到了顶层。这是因为在 @at-root (with: .nested) 中指定了只包含 .nested 选择器的规则。
看到这里完结了 O.o