ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
## 一、变量 1. 局部变量 2. 全局变量:变量```$color``` 后加 ```!gloabl ```(块里定义,外部也可以使用 3. 变量默认值:``` $fontsize: 14px !default;``` **!default** 4. 多值变量 1.定义:```$paddings: 5px 10px 5px 10px``` 使用:```padding-left: nth($paddings, 1)``` **序号从 1开始** 2.定义:```$maps: (color: red, borderColor: blue)```使用:```background-color: map-get($maps, color)``` 5. 变量特殊用法 定义:```$className: main``` 使用:``` .#{$className}``` ## 二、样式引入(部分) 文件要以**_**开头 要是引入该部分内容 可以在文件中@import文件名即可(不需要写下划线和后缀) ## 三、嵌套 1. ```@at-root```为**跳出嵌套** 2. 如果是媒体查询 是不能跳出的,如果想要跳出,就添加```without: media``` ``` //原代码 @media screen and (max-width: 600px) { @at-root .container { Background: green; } } //跳出媒体查询 @media screen and (max-width: 600px) { @at-root (without: media rule) { .container { Background: green; } } } ``` 3. @at-root 与 & 如果想要写某个区域下的该类名的样式 可以使用这个形式 ``` @at-root .text-info { color: red; @at-root nav & { color: blue; } } ``` ## 四、继承 1. 承多个样式 可以使用``` @extend ```类名, 类名; 2. 链式继承 子继承父 孙子继承父 形成链条; 3. 继承的局限性:包含选择器```(.one .two)```以及相邻兄弟选择器```(.one + .two)```是无法继承的;若一个元素除了有自身属性,还有``` hover``` 属性,其```hover```属性也会被继承。 4. 继承的交叉合并 ``` .one a { Font-weight: bold; } .two .three { @extend a; } ```