sass 官网

https://sass-lang.com/guide

sass 安装

npm install -g sass

查看scss 编译的css文件

sass --watch input.scss output.css
sass --watch app/sass:public/stylesheets

scss的特性

variables 变量

note: 以$开始命名

.basic-li {
    $blue:red;
    color: $blue;
}

在class 里面设置全局变量

$variable: second global value !global;

在class 里面设置默认值

$variable: second global value !default;

$border-radius: 0.25rem !default;

nest 嵌套

note: margin: 冒号不能省略.

.basic-li {
    margin: auto {  // 属性嵌套
        bottom: 5px
    }
    &.item {}  // .basic-li.item  两个class同在一个element
    .item {}  // .basic-li .item  两个class所在的element为父子关系
    &:hover{
        color: #000;
    }
}

&

.alert {
  // The parent selector can be used to add pseudo-classes to the outer
  // selector.
  // .alert:hover
  &:hover {  
    font-weight: bold;
  }

  // It can also be used to style the outer selector in a certain context, such
  // as a body set to use a right-to-left language.
  // [dir=rtl] .alert
  [dir=rtl] & { 
    margin-left: 0;
    margin-right: 10px;
  }

  // You can even use it as an argument to pseudo-class selectors.
  // :not(.alert)
  :not(&) { 
    opacity: 0.8;
  }
  // alert__copy
  &__copy {}   
}


@mixin app-background($color) {
  #{if(&, '&.app-background', '.app-background')} {
    background-color: $color;
    color: rgba(#fff, 0.75);
  }
}

// .app-background { }  if 表达式为false
@include app-background(#036);

// .sidebar.app-background {
.sidebar {
  @include app-background(#c6538c);
}

mixins

note: mixin 定义在引用之前， 通过@include 引用
reset-list and reset_list both refer to the same mixin

// 给参数设置默认值，在调用可以不传参
@mixin replace-text($image, $x: 50%, $y: 50%){}
//使用...传参

@use "sass:meta";

@mixin syntax-colors($args...) {
  @debug meta.keywords($args);
}
@include syntax-colors(
  $string: #080,
  $comment: #800,
  $variable: #60b,
)

Interpolation #{变量}

{$prefix}

@mixin prefix($property, $value, $prefixs){
    @each $prefix in $prefixs {
        -#{$prefix}-#{$property}: $value;
    }
    $property: $value
}

.basic-li {
    $browser:('moz','webkit');
    @include prefix(opacity, 0.6, $browser)
}

functions

@function pow($base, $exponent) {
  $result: 1;
  @for $_ from 1 through $exponent {
    $result: $result * $base;
  }
  @return $result;
}
// css
.sidebar {
  float: left;
  margin-left: 64px;
}

.sidebar {
  float: left;
  margin-left: pow(4, 3) * 1px;
}

each @function must end with a @return

placeholder 占位符

%base-item {
    font-size:  16px;
}

.item1{
    @extend %base-item;
}

.item2{
    @extend %base-item;
    font-weight: bold;
}

// css 编译
.item2 {
    font-weight: bold;
}
.item2, .item1 {
    font-size: 16px;
}

At-Rules

@use

@use rule loads mixins, functions, and variables from other Sass stylesheets

@use 只会在模块中加载一次
定义私有变量
在变量前加 - or _ ，该变量为此文件作用域的私有变量。

$-radius: 3px;

加载一个模块后，可以重写变量值

// _library.scss
$color: red;

// _override.scss
@use 'library';
library.$color: blue;

// style.scss
@use 'library';
@use 'override';
@debug library.$color;  //=> blue

Built-in module variables (such as math.$pi) cannot be reassigned.

Load Paths
For example, if you pass node_modules/susy/sass as a load path, you can use @use "susy" to load node_modules/susy/sass/susy.scss.
优先加载当前文件的相对路径，如果找不到，去找模块下的相当路径，不需要像其他语言一样写./

@forward

当前文件通过@forward引入一个文件，该文件中的方法和变量可以被其他文件引用，相当于中间文件。也可同@use的用法

// src/_list.scss
@mixin reset {
  margin: 0;
  padding: 0;
  list-style: none;
}
// bootstrap.scss
@forward "src/list" as list-*;
// styles.scss
@use "bootstrap";

li {
  @include bootstrap.list-reset;
}

通过hide 或show 隐藏显示某些变量，或者方法
@forward "src/list" hide list-reset, $horizontal-list-gap;

// _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;
}
// _opinionated.scss
@forward 'library' with (
  $black: #222 !default,
  $border-radius: 0.1rem !default
);
// style.scss
@use 'opinionated' with ($black: #333);

@import

@import 的缺点
https://sass-lang.com/documentation/at-rules/import

1. 只能通过-或_的方式定义私有变量，使某些变量不被引入全局。
   2.每次引用都会执行，增加了编译时间和产生臃肿的输出。
   嵌套引入

// _theme.scss
pre, code {
  font-family: 'Source Code Pro', Helvetica, Arial;
  border-radius: 4px;
}
// style.scss
.theme-sample {
  @import "theme";
}

// 编译后的css
.theme-sample pre, .theme-sample code {
  font-family: 'Source Code Pro', Helvetica, Arial;
  border-radius: 4px;
}

@content

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

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

// 编译后
.button {
  border: 1px solid black;
}
.button:not([disabled]):hover {
  border-width: 2px;
}

@at-root

可以使不包含外面的class

@use "sass:selector";

@mixin unify-parent($child) {
  @at-root #{selector.unify(&, $child)} {
    @content;
  }
}

.wrapper .field {
  @include unify-parent("input") {
    /* ... */
  }
  @include unify-parent("select") {
    /* ... */
  }
}
// css 
.wrapper input.field {
  /* ... */
}

.wrapper select.field {
  /* ... */
}

变量的值

• Numbers, which may or may not have units, like 12 or 100px.

• Strings, which may or may not have quotes, like "Helvetica Neue" or bold.

• Colors, which can be referred to by their hex representation or by name, like #c6538c or blue, or returned from functions, like rgb(107, 113, 127) or hsl(210, 100%, 20%).

• Lists of values, which may be separated by spaces or commas and which may be enclosed in square brackets or no brackets at all, like 1.5em 1em 0 2em, Helvetica, Arial, sans-serif, or [col1-start].

A few more are specific to Sass:

• The boolean values true and false.

• The singleton null value.

• Maps that associate values with keys, like ("background": red, "foreground": pink).

• Function references returned by get-function() and called with call().

操作符

• == and != are used to check if two values are the same.
• +, -, *, /, and % have their usual mathematical meaning for numbers, with special behaviors for units that matches the use of units in scientific math.
• <, <=, >, and >= check whether two numbers are greater or less than one another.
• and, or, and not have the usual boolean behavior. Sass considers every value “true” except for false and null.
• +, -, and / can be used to concatenate strings.

@debug 1 + 2 * 3 == 1 + (2 * 3); // true
@debug true or false and false == true or (false and false); // true
// = 只能在函数参数赋值使用
.transparent-blue {
  filter: chroma(color=#0000ff);
}