sass 官网

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

只能通过-或_的方式定义私有变量，使某些变量不被引入全局。
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);
}

scss 基础用法