scss的基本用法:
1、基本功能(常用)
(1)、导入:@import,可单独导入,也可同时导入多个 (文件可加后缀(允许scss和sass),也可不加(如果没有后缀,则会找到相同名字并且后缀即拓展名为.scss或者.sass的文件))
<1>、导入单个 @import "../colorTool/colors";
<1>、导入多个 @import "../variableTool/quantity", "../methodTool/func";
(2)、嵌套:
<1>、规则:嵌套时,内层样式将他的外层作为父级选择器,嵌套功能避免了重复输入父级元素,同时让复杂的scss结 构变得利于管理。
<2>、元素嵌套:如果嵌套时给某个元素设置hover属性,及可用&来代替父级元素。这就是元素嵌套!
<3>、元素嵌套写法:.go-back{ cursor: pointer;font-size: 16px;.back-icon{vertical-align: sub; }&:hover{color: #2d8cf0;}} 执行编译后:.go-back{ cursor: pointer; font-size: 16px; } .go-back .back-icon{ vertical-align: sub; }
.go-back:hover{ color: #2d8cf0; }
<4>、属性嵌套:为了便于管理类似(font-weight,font-size)等类的属性,同时也为了避免了重复输入,Sass 允许将 属性嵌套在命名空间中
<5>、属性嵌套写法:.accc{ font: { family: fantasy; size: 30em; weight: bold; } }。执行编译后.
accc {font-family: fantasy;font-size: 30em;font-weight: bold;}
(3)、注释:scss支持css的多行注释(/* */),也可以单行注释(//),多行注释编译为css会被打包到文件