Skip to main content

Sass之SCSS基础语法

January 12, 2025About 6 min

Sass之SCSS基础语法

书写风格跟CSS一样

常用命令

  • sass App.scss App.css：编译App.scss输出到App.css，单个文件

    加上下面的--watch能持续的监视

  • sass --watch app/sass:public/stylesheets

    你可以使用文件夹路径作为输入和输出，并用冒号分隔它们来监视和输出到目录。

搞心态小技巧之静默注释

// 可使用两种注释
// 这样的/ 注释内容 / 这样在生成css时会去掉
// 这样的/* 注释内容 */ 这样不会
// 原因很简单，css只有/**/这种

变量

可看做别名一样，凡是对应属性值能在的都可以使用这个变量名代替，有作用域

声明

$变量名: 属性值1,属性值2;// 列表
$a: 10px;
// map映射
$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f");
//使用
map-get($icons, "stop");

引用

凡是属性都能用

div{
    background: $a, url("...");// 这也能用
    color: $a;// 这更能用
}

默认变量值

$a = 1
$a = 2
// a为2,以最后定义为准
$a = 1 !default;// 含义：如果变量a在声明时赋值了，那就用赋值的，否则用当前的

插值语句 #{}

scss
$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

嵌套CSS规则

基本原理：进行解套时，就是往父子级中间加空格

scss
// 如果我要写同一个域下不同元素的样式，纯css那得重复写好几次父级选择器
// 现在有了scss，牛马狂喜，就像你想的那样使用
div{
    color: red;
    ul{
        color: black;
        li{
            color: yellow;
        }
    }
}

Info

简单嵌套没啥问题，但加上一些伪类之类的就不太行

但别急，scss怎么会让你失望

父选择器的标识符&

不用空格分开了，直接替换&

div{
    &:hover{// ===>div:hover
        color: red;
    }
}

群组选择器的嵌套

群组：h1, h2, div{}// 同时选中这些元素

div{
    p, a, span{// ==>>div p, div a, div span
    }
}
// 或这种情况
div, p, a{
    ul{// ====> div ul, p ul, a ul
    }
}
// 再度让牛马狂喜

属性嵌套

// 真的让人不能。。。。
div{
    border: {// :后面要加空格
        width: 1px;
      	style: solid;
    }
}
// 编译后
div {
  border-width: 1px;
  border-style: solid;
}

@规则

  • @use：@use "file"

    导入其他样式文件，但是以模块的方式导入，即导入命名空间

    但注意，这个只是在当前样式表如果要用导入的样式表就得使用命名空间，

    如果只是编译的时候包含它，直接导入就可以，这是可见的

    scss
    // src/_corners.scss
$radius: 3px;

@mixin rounded {
  border-radius: $radius;
}
// style.scss
@use "src/corners";
.button {
  @include corners.rounded;
  padding: 5px + corners.$radius;
}
    • as：@use "src/corners" as cor;太长了，可以起别名，或者直接as *全部导入
    • 私有变量：以-或_开头的，这些不能再@use中的文件使用
    scss
    // _library.scss
$black: #000 !default;
$border-radius: 0.25rem !default;
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;

code {
  border-radius: $border-radius;
  box-shadow: $box-shadow;
}
// style.scss 导入可以使用with去进行覆盖对应的值
@use 'library' with (
  $black: #222,
  $border-radius: 0.1rem
);

  • @forward：@forward "file"

    只是加载样式，但是在本表中无法使用，就想隐藏起来了，但是被其他表@use就能访问之前

    @forward导入的样式，相当于转发一样

    • as：@forward "src/list" as list-*;给这个命名空间添加前缀
    • hide：hide list-reset, $horizontal-list-gap;这些成员不转发
    • with：也能使用这个，不同的是，变量后可以加!default修改默认值，毕竟不是在这个文件中使用

  • @mixin：混合器

    本质就是在使用@include地方，如果有参数的话，进行处理，之后将其替换@include

    所有没引用一次，就生成一次代码

    @mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

    通过@include 名称使用

    可接受参数

    @mixin rtl($property, $ltr-value, $rtl-value: middle) {// 可以有默认值
  #{$property}: $ltr-value;
}
.sidebar {
  @include rtl(float, left, right);
}

    收集参数

    scss

    如果 @mixin 声明中的最后一个参数以 ... 结尾，则该 mixin 的所有额外参数都将作为 列表] 传递给该参数。该参数被称为参数列表。

    @mixin order($height, $selectors...) {
  @for $i from 0 to length($selectors) {
    #{nth($selectors, $i + 1)} {
      position: absolute;
      height: $height;
      margin-top: $i * $height;
    }
  }
}

@include order(150px, "input.name", "input.address", "input.zip");

    内容块

    除了接受参数之外，mixin 还可以接受整个样式块，称为内容块。mixin 可以通过在其主体中包含 @content at 规则来声明它采用内容块。内容块像 Sass 中的任何其他块一样使用大括号传递，并且它是代替 @content 规则注入的。

    scss
    @mixin hover {
  &:not([disabled]):hover {
    @content;
  }
}

.button {
  border: 1px solid black;
  @include hover {
    border-width: 2px;
  }
}

  • @function：类似定义函数

  • @extend：继承样式，或扩展样式，@extend .class或@extend %a，该关键字，会把所有继承或扩展的，单独拎出来然后使用css的群组选择器，将样式放入其中，所以不像@include一样，只会生成一次代码

    占位符%

    如果当前的内容没有被@extend扩展，那么最终的css中也不会有它

    scss
    %aaa{
    color: red;
    font-size: 10px;
}
div{
    @extend %aaa;
    margin: 0;
}
p{
    @extend %aaa;
    margin: 1;
}

  • @debug：后跟着输出内容，这就是调试用的

  • @at-root：也就是这后面的，不在父级的包裹下，而是相当于这段css从新选了父级

流程控制

  • @if

    就像编程语言的if-else一样使用

    @use "sass:math";

@mixin triangle($size, $color, $direction) {
  height: 0;
  width: 0;

  border-color: transparent;
  border-style: solid;
  border-width: math.div($size, 2);

  @if $direction == up {
    border-bottom-color: $color;
  } @else if $direction == right {
    border-left-color: $color;
  } @else if $direction == down {
    border-top-color: $color;
  } @else if $direction == left {
    border-right-color: $color;
  } @else {
    @error "Unknown direction #{$direction}.";
  }
}

.next {
  @include triangle(5px, black, right);
}

  • @each

    像python的for-in，不仅取一个值，还能@each $name, $glyph in $icons这样取

    scss
    $sizes: 40px, 50px, 80px;

@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}

​ :::

  • @for

    scss
    $base-color: #036;

@for $i from 1 through 3 {
  ul:nth-child(3n + #{$i}) {
    background-color: lighten($base-color, $i * 5%);
  }
}

  • @while

    scss
    @use "sass:math";

/// Divides `$value` by `$ratio` until it's below `$base`.
@function scale-below($value, $base, $ratio: 1.618) {
  @while $value > $base {
    $value: math.div($value, $ratio);
  }
  @return $value;
}

$normal-font-size: 16px;
sup {
  font-size: scale-below(20px, 16px);
}
Last update: 1/12/2025, 9:57:56 PM
Contributors: Heari