scss基础语法

变量

下划线(_)和连字符(-)都可以

$primary-color: #fff000;
$primary-border: 1px solid $primary-color;


div.box{
    border: 1px solid $primary-color;
}
// 或者
div.box1{
    border: $primary-border;
}

css变量

:red{
    --color:#f00
}
p{
    color: var(--color);
}

嵌套

body{
    // font-family font-size font-weight
    font{
        family: 'Courier New', Courier, monospace;
        size:15px;
        weight: normal;
    }
}

mixins

// 无参数
@mixin 名字{
    ...
}

//有参数
@mixin 名字 (参数1,参数2...){
    ...
}

无参数

mixin里嵌套元素，也会在@include的时候显示出来

@mixin alert-color {
    color: yellow;
    background: green;
    a{
        color: yellow;
    }
}

.alert-warning {
    @include alert-color
}

// ---------编译后----------
.alert-warning {
    color: yellow;
    background: green;
}
.alert-warning a{
    color: yellow;
}

有参数

// 参数前加 $ 
@mixin alert-color($text-color, $bg-color) {
    color: $text-color;
    background: $bg-color;

    a {
        color: $text-color;
    }
}

// 按顺序传 参数
.alert-warning {
    @include alert-color(yellow, green)
}

// 不按顺序传，但是必须指定前面的值
.alert-info {
    @include alert-color($bg-color: #000, $text-color: gray)
}

继承/扩展 inheritance

.alert{
    padding: 15px
}

.alert-info{
    @extend .alert;
    background-color: yellow;
}

// ---------编译后----------
.alert, .alert-info{
    padding: 15px
}
.alert-info{
    background-color: yellow;
}

被嵌套的元素也会被继承

.alert {
    padding: 15px;
    a {
        font-weight: bold
    }
}

.alert-info {
    @extend .alert;
    background-color: yellow;
}

// ------编译后----------
.alert,
.alert-info {
    padding: 15px
}

.alert a, .alert-info a{
    font-weight: bold;
}

.alert-info {
    background-color: yellow;
}

@import

每次使用@import，浏览器都会发出一次新的http请求，去下载被导入的scss文件，速度会慢一些

partials文件

必须下划线开头

@use

从其他Sass样式表加载mixin，function和变量，并将来自多个样式表的CSS组合在一起，@use加载的样式表被称为"模块"，多次引入只包含一次。

@use也可以看作是对@import的增强

• @use引入同一个文件多次，不会重复引入，而@import会重复引入
• @use引入的文件都是一个模块，默认以文件名作为模块名，可通过as取别名
• @use引入多个文件时，每个文件都是单独的模块，相同变量名不回覆盖，通过模块名访问，而@import变量会被覆盖
• @use方式可通过@use xxx as xxx来取消命名空间，但是建议不要这么做
• @use模块内可通过$-或$_来定义私有成员，不会被引入
• @use模块内变量可通过!default定义默认值，引入时可通用with($bg-color: red)的方式修改
• @可定义-index.scss或_index.scss来合并多个scss文件，它@use默认加载文件

数字函数

1. 绝对值 abs()
2. 四舍五入取整 round()
3. 向上取整不管小数点后一位是否大于5 ceil()
4. 向下取整不管小数点后一位是否大于5 floor()
5. 百分比 percentage(650px / 1000px) 65%
6. 最大最小值 min(1,2,3) max(1,2,3)

字符串函数

1. 转大写 to-upper-case()
2. 转小写 to-lower-case()
3. 字符串长度 str-length()
4. 获取位置 str-index(‘hello’, ‘h’)
5. 插入字符串 str-insert(‘hello’, ‘.com’, 5)

颜色

RGB：红绿蓝占比
hsl：色相 饱和度 明度

@if

例子

//  ------例子1----------
$use-prefixes: false;

.rounded {
    border-radius: 5px;

    @if $use-prefixes {
        border-radius: 20px;
    }

}

// --------例子2-----------
$theme: 'dark';

body {
    @if $theme == 'dark' {
        background: black;
    }

    @else if $theme == 'light' {
        background: white;
    }

    @else {
        background: gray;
    }
}

三元运算符

$theme: 'dark';

.container{
    color: if($theme == 'light', #000, #fff)
}

@for

语法

@for $var from <开始值> through <结束值>{
    ...
}
@for $var from <开始值> to <结束值>{
    ...
}

例子

$colums: 4;

@for $i from 1 through $colums {
    .col-#{$i} {
        width: 100% / $colums * $i
    }
}
// 不会包含 4
@for $i from 1 through $colums {
    .col-#{$i} {
        width: 100% / $colums * $i
    }
}

@each

语法

@each $var in $list {
    ...
}

例子

$icons: success error warning;

@each $icon in $icons {
    .icon-#{$icon}{
        background-image: url(../images/icons/#{$icon}.png);
    }
}

@while

$i: 6;

@while $i > 0{
    .item-#{i}{
       width: 5px * $i 
    }
    $i: $i - 2
}

@function

语法

@function 名称 (参数1, 参数2){
    ...
}

例子

// map
$color: (
    light: #ffffff,
    dark: #000000
);

@function color($key) {
    @return map-get($color , $key )
};

body{
    background-color: color(light);
}

@forward

作用
通过@forward加载一个模块的成员，并将这些成员当作自己的成员对外暴露出去，类似于es6的export，通常用于跨多个文件组织sass库

@at-root

可以使被嵌套的选择器或属性跳出嵌套

.parent {
  font-size: 12px;
  @at-root .child {
    font-size: 14px;
  }
}

编译后

.parent {
  font-size: 12px;
}
.child {
  font-size: 14px;
}

跳出父嵌套的其他方法

.foo {
  & {
    font-size: 12px;
  }
}
// 编译后
.foo {
  font-size: 12px;
}
// -----------------------------
.foo {
  & .bar {
    font-size: 12px;
  }
}
// 编译后
.foo .bar {
  font-size: 12px;
}
// -----------------------------
.foo {
  .bar & {
    font-size: 12px;
  }
}
// 编译后
.bar .foo {
  font-size: 12px;
}

@at-root(without:…)和@at-root(with:…)的使用

默认@at-root只会跳出选择器嵌套，而不能跳出@media或@support，如果要跳出这两种嵌套，则需使用
@at-root(without:media)
@at-root(with:supports)
关键词：

1. all (表示所有)
2. rule (表示常规css) 默认
3. media (表示media)
4. supports (表示supports)

设置警告信息

$color: (
    light: #ffffff,
    dark: #000000
);

@function color($key) {
    @if not map-has-key($color, $key){
        @warn "在 $color 里面没找到 #{$key} 这个key"
    };
    @return map-get($color , $key )
};