SASS学习笔记_01

时间:2022-04-18 11:05:11

 

scss两种格式

sass    大括号

scss   css写法

 

Arguments:  --no-cache –style compressed --update $FileName$:css/$FileNameWithoutExtension$.css

标示部分是  输出的css类型  和额外输出路径  就是 输出的css是不是压缩  然后项目目录建立css文件夹放到里面去

 

--style

nested:嵌套缩进的css代码

expanded:没有缩进扩展的css代码

compact:简洁格式的css代码

compressed:压缩后的css代码;

 

=====================================================

变量

$变量名:值;

$global-color:yellow

$global-border:1px solid $global-color;

调用

.nav{

background:$global;

}

标量嵌套

.navbar{

border:$global-border

}

嵌套规则:

SASS学习笔记_01

SASS学习笔记_01

 

引用符:

 

SASS学习笔记_01

 

SASS学习笔记_01

第一个 引用的是当前所在的元素

第二个是引用的所有父级元素

-----------------------------------------------------------------------

群组选择器嵌套

SASS学习笔记_01

简化

SASS学习笔记_01

-----------------------------------------------------------------------

子选择器属性

SASS学习笔记_01

生成

SASS学习笔记_01

-----------------------------------------------------------------------

属性嵌套

SASS学习笔记_01

 

SASS学习笔记_01

-----------------------------------------------------------------------

属性选择器2

SASS学习笔记_01

SASS学习笔记_01

------------------------------------------------------------------------