# sass **Repository Path**: JustTwo/sass ## Basic Information - **Project Name**: sass - **Description**: 整理sass常用方法 - **Primary Language**: Unknown - **License**: GPL-3.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2021-03-29 - **Last Updated**: 2022-06-17 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # dart sass ## 介绍 整理sass常用方法 ## 安装版本 因为许多下载失败原因 现在常用dart sass代替node sass ## 参与贡献 JustTwo ## 示例 #### zero 0. ===== 多行注释 /* */,以及单行注释 //,前者会 被完整输出到编译后的 CSS 文件中,而后者则不会 === #### 1. 嵌套规则 ```scss .main { .content { .left { width: 10px; } .right { width: calc(100vw - 10px); } } } ``` #### 2.父级选择器 & ```scss .main { background-color: #fff; &:hover { background-color: #000; } } ``` #### 3. 变量 $ ```scss $font_color: red; .main { color: $font_color; } ``` #### 4.导入SASS文件; ```scss @import "another.scss"; .main { @import "overhide.scss"; } ``` #### 5.混入 @mixin #### 不传参 ```scss @mixin overhide { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .main{ color: red; @include overhide } ``` #### 传参 ```scss @mixin font_set($color, $size, $weight) { color: $color; font-size: $size; font-weight: $weight; } .main{ text-align: center; @include font_set(red, 12px, 600) } ``` #### 不传参默认值 ```scss @mixin font_set($color: red, $size: 12px, $weight: 500) { color: $color; font-size: $size; font-weight: $weight; } .main{ text-align: center; @include font_set } ``` #### 选择器继承 @extend #### .main将会继承样式表中任何位置处为.defaultBorder定义的所有样式。以class="main" 修饰的html元素最终的展示效果就好像是class="main defaultBorder" ```scss .defaultBorder{ border: 1px solid red; } .main{ @extend .defaultBorder; } ```