8-24 sass相关知识点

sass

单文件转换 node-sass sass/index.scss css/index.css

​ node-sass sass路径 css路径

多文件转换 node-sass sass css

​ node-sass -o sass文件夹 css文件夹

单文件监听 node-sass -w sass/index.scss css/index.css

​ node-sass -w sass路径 css路径

多文件 监听 node-sass -w sass -o css

​ node-sass -w sass文件夹 -o css文件夹

sass 文件后缀名 是 .scss

$变量名：值；

全局作用域：能在sass文件任何位置中使用

局部作用域：只能在当前的{}中使用

全局文件 ：不以_开头的文件 导入方法@import “index1.scss”;*

局部文件：文件名称以_开头，就是局部scss文件。局部scss文件不会被转换成css文件。可以在一个全局scss文件中，导入多个局部scss文件，最后生成一个css文件

导入方法@import “demo”; _demo.scss文件需要掐头去尾 demo是文件夹名字

sass 需要有解析器

node-sass

解析成为css导入文件中使用

vue框架 sass less ，vue里已经包含解析器

混合器

把一段样式进行封装，需要使用的地方直接调用混合器名称

@mixin 混合器名称{ 申明样式 }

调用混合器 @include 混合器名称
#text{
@include pStyle;
}

带参数的混合器
@mixin 混合器名称($形参,$形参…){}
@mixin dStyle($one,$two) {
font-size: $two;
width: $one;
}

调用带参数的混合器
@include混合器名称(实参,实参…)
$big:20px
KaTeX parse error: Expected 'EOF', got '#' at position 14: small:12px #̲dtext{ @incl…big,$small)
}

例：
@mixin doudou($one,$two) {
backgroud-color:$one;
width: $one;
}

div{
@include doudou(blue,100px)
}

继承

@extend #d1;
#d1{
border:2px solid #f00;
box-shadow:1px 1px ;
}
#d2{
color:#222;
@extend #d1;
}

d2继承d1的样式

指令：@for $i from startNumber through endNumber{}

@each $i in fontSize,fontColor,fontFamily,fontBg{

#{$i}nicai{

​ color:red;

}

}

解析

fontSizenicai {

color: red; }

fontColornicai {

color: red; }

fontFamilynicai {

color: red; }

fontBgnicai {

color: red; }

指令：each
@each $i in 选择器{}

ex：@for $i from 1 through 3{

.item#{$i}{

​ background-color:blue;

}

}

解析

.item1 {

background-color: blue; }

.item2 {

background-color: blue; }

.item-3 {

background-color: blue; }