Scss基础语法
只是觉得记个笔记比较印象深刻,其实去官网看最好了。写的也大部分都是官网上的东西,官网总结的已经很清晰了。只是提炼一下,便于以后查看。Sass世界上最成熟、稳定和强大的CSS扩展语言 | Sass中文网
1. 声明变量
写法:$变量名: 变量值。 例如: KaTeX parse error: Expected 'EOF', got '#' at position 8: white: #̲ffffff; 以后凡是**s…white代替白色了
这也是有块级作用域的,如果写在{}内,则对这一部分生效,其他位置也可以使用这个变量名;如果写在外部(全局common.scss里),则全局生效;scoped里面则可以看成组件内使用
还有一点,当变量名里有短线或下划线的时候,这两种是通用的。如定义:$color-white: #ffffff
,在使用的时候可以用 color: $color_white
,_和-是可以被互相识别的。
2. 嵌套写样式
这个也是很常用的,就是让你按照html结构那样写样式,如
<div class="header-area">
<div class="header-title">菜单
<div>二级菜单</div>
</div>
</div>
$black:#000000
.header-area{
color: white;
.header-title{
color:$black;
div{
font-size:12px;
}
}
}
其中需要注意的一些,如
-
&:伪类:例如我们需要写:hover, :active等伪类的时候,如果直接写
.header{ :hover{color: blue} }
这样是不生效的,这样写解析出来是
.header :hover{}
, 伪类前面是不需要空格的。所以要写.header{ &:hover{color: blue} }
这样写解析出来才是
.header:hover{}
,才把状态用到了header类上 -
父选择器 & { color: green }:用于指代父选择器。如:
#content aside { color: red; body.ie & { color: green } } /*编译后*/ #content aside {color: red}; body.ie #content aside { color: green }
3. 子选择器和同层选择器
- 子选择器
>
,和css里面一样,选择紧跟着的子元素,就不赘述了 - 同层相邻组合选择器
+
,如div+p
用于选择选择div
元素后紧跟的p
元素 - 同层全体组合选择器
~
, 如p+p
选择所有跟在p
后的同层p
元素,不管它们之间隔了多少其他元素
4. 属性嵌套
在css中有些属性是可以细分的,比如:background可以分为background-color, background-size等等。在scss中这些也是可以嵌套的,例如。就是把属性从-
处断开写到{}里
nav {
border: {
style: solid;
width: 1px;
color: #ccc;
}
}
就连属性的缩写也可以嵌套,如:
nav {
border: 1px solid #ccc {
left: 0px;
right: 0px;
}
}
Scss的引入:@import 文件名/样式名。 @include
可以用 +
表示,简写为+
导入:@import './color'
:把color.scss
文件中所有样式添加到当前样式表中(后缀名scss、sass可以省略不写)
但是这有一个问题,它会导致每次导入都生成一个css文件。如果要避免这种情况,可以在命名时以_开头,这样就不会对这个文件进行编译,只在导入时编译。例如想导入themes/_night-sky.scss
这个局部文件里的变量,只需在样式表中写@import
"themes/night-sky";
这种导入方式也可以写在标签属性内,如:.blue-theme {@import "blue-theme"}
这种方式引入的scss文件是局部生效的,块级作用域
静默注释://所写的注释
body {
color: #333; // 这种注释内容不会出现在生成的css文件中
padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}
混合器(写了多条样式的块):@mixin 样式类名,@mixin
可以用 =
表示,简写为=
例,跨浏览器的圆角
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
//引用这个混合器
notic