国产成人精品999视频&日本一区二区亚洲人妻精品&久久久精品国产99久久精&99热这里只有成人精品国产&精品国产剧情av一区二区&成人亚洲精品久久久久app&国产精品美女高潮抽搐A片

Sass

NPM version Downloads Repo Dependents Github repo

這是一份快速參考備忘單，列出了 SASS 最有用的功能

Sass 基礎(chǔ)

介紹

Sass 是一種 CSS 的預(yù)編譯語(yǔ)言

$ npm install -g sass

在 Node.js 環(huán)境中使用 Sass

$ sass source/index.scss build/index.css
$ sass --watch input.scss output.css
$ sass --watch app/sass:public/css

變量

$defaultLinkColor: #46EAC2;
a {
  color: $defaultLinkColor;
}

字符串插值

$wk: -webkit-;
.rounded-box {
  #{$wk}border-radius: 4px;
}

注釋

/*
 這是多行注釋
 塊注釋
 塊注釋
*/
// 這是一條單行注釋

Extend

.button {
  ···
}
.push-button {
  @extend .button;
}

嵌套(Nesting)

nav {
  ul {
    padding: 0;
    list-style: none;
  }
  li { display: inline-block; }
  a {
    display: block;
  }
}

編譯 css 為：

nav ul {
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
}

模塊（片段）

// _base.scss
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

注意以下劃線開(kāi)頭的 Sass 文件

// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

編譯 css 為：

.inverse {
  background-color: #333;
  color: white;
}

混合(Mixins)

@mixin heading-font {
    font-family: sans-serif;
    font-weight: bold;
}
h1 {
    @include heading-font;
}

查看: 混合(Mixins)

@import

@import './other_sass_file';
@import '/code', 'lists';
// 純 CSS @imports
@import "theme.css";
@import url(theme);

.sass 或 .sass 擴(kuò)展名是可選的。

Sass 混合(Mixins)

參數(shù)

@mixin font-size($n) {
  font-size: $n * 1.2em;
}

body {
  @include font-size(2);
}

默認(rèn)值

@mixin pad($n: 10px) {
    padding: $n;
}

body {
    @include pad(15px);
}

默認(rèn)變量

$default-padding: 10px;
@mixin pad($n: $default-padding) {
  padding: $n;
}
body {
  @include pad(15px);
}

Sass 顏色函數(shù)

rgba

rgb(100, 120, 140)
rgba(100, 120, 140, .5)
rgba($color, .5)

Mixing

mix($a, $b, 10%)   // 10% a, 90% b

修改 HSLA

darken($color, 5%)
lighten($color, 5%)

saturate($color, 5%)
desaturate($color, 5%)
grayscale($color)

adjust-hue($color, 15deg)
complement($color)    // like adjust-hue(_, 180deg)
invert($color)

fade-in($color, .5)   // aka opacify()
fade-out($color, .5)  // aka transparentize()
rgba($color, .5)      // sets alpha to .5

獲取值

HSLA

hue($color)         // 0deg..360deg
saturation($color)  // 0%..100%
lightness($color)   // 0%..100%
alpha($color)       // 0..1 (aka opacity())

RGB

red($color)         // 0..255
green($color)
blue($color)
:-:-
color.red()用于獲取顏色的紅色通道
color.green()用于獲得顏色的綠色通道
color.blue()用于獲取顏色的藍(lán)色通道
color.hue()以獲得顏色的色調(diào)
color.saturation()用于獲得顏色的飽和度
color.lightness()以獲得顏色的亮度

另見(jiàn): hue(), red()

Sass 內(nèi)置了對(duì)顏色值的支持

@debug rgb(204, 102, 153);  // #c69
@debug rgba(107, 113, 127, 0.8); // rgba(107, 113, 127, 0.8)
@debug hsl(228, 7%, 86%);        // #dadbdf
@debug hsla(20, 20%, 85%, 0.7);  // rgb(225, 215, 210, 0.7)

調(diào)整

// 固定金額變動(dòng)
adjust-color($color, $blue: 5)
adjust-color($color, $lightness: -30%) // darken(_, 30%)
adjust-color($color, $alpha: -0.4)     // fade-out(_, .4)
adjust-color($color, $hue: 30deg)      // adjust-hue(_, 15deg)
// 通過(guò)百分比變化
scale-color($color, $lightness: 50%)
// 完全改變一個(gè)屬性
change-color($color, $hue: 180deg)
change-color($color, $blue: 250)

支持的: $red, $green, $blue, $hue, $saturation, $lightness, $alpha

Sass 其他函數(shù)

字符串

unquote('hello')
quote(bold); // "bold"

to-upper-case(hello)
to-lower-case(hello)

str-length(hello world)
// "ello" - 它是從 1 開(kāi)始的，而不是從 0 開(kāi)始的
str-slice(hello, 2, 5)
str-insert("abcd", "X", 1) // "Xabcd"

Numbers

floor(4.2)  // 4
ceil(4.2)   // 5
round(4.2)  // 4
abs(-10px) // 10px

min(1px, 4px)  // 1px
$widths: 50px, 30px, 100px
@debug math.min($widths...)  // 30px

percentage(.5)   // 50%
random(3)        // 0..3

Units

unit(3em)        // 'em'
unitless(100px)  // false

Units

unit(3em)        // 'em'
unitless(100px)  // false

Misc

// 檢查 $red
variable-exists(red)
// 檢查@mixin red-text
mixin-exists(red-text)
function-exists(redify)

global-variable-exists(red)

// .menu li a
selector-append('.menu', 'li', 'a')
// .menu:hover li
selector-nest('.menu', '&:hover li')
selector-extend(...)
selector-parse(...)
selector-replace(...)
selector-unify(...)

Sass 功能檢查

功能檢查

meta.feature-exists($feature)
feature-exists($feature) //=> boolean

@mixin debug-content-exists {
  @debug meta.content-exists();
  @content;
}

@include debug-content-exists; // false
@include debug-content-exists { // true
  // Content!
}

功能

:-:-
global-variable-shadowing #這意味著局部變量將隱藏全局變量，除非它具有 !global 標(biāo)志
extend-selector-pseudoclass #這意味著 @extend 規(guī)則將影響嵌套在偽類(lèi)中的選擇器，如 :not()
units-level-3 #這意味著單位算術(shù)支持在 CSS 值和單位級(jí)別 3 中定義的單位
at-error #這意味著支持 @error 規(guī)則
custom-property #這意味著自定義屬性聲明值不支持除插值之外的任何表達(dá)式

Sass 循環(huán)

For 循環(huán)

$base-color: #036;

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

編譯 css 為：

ul:nth-child(3n + 1) {
  background-color: #004080;
}

ul:nth-child(3n + 2) {
  background-color: #004d99;
}

ul:nth-child(3n + 3) {
  background-color: #0059b3;
}

Each 循環(huán)（簡(jiǎn)單）

$sizes: 40px, 50px;

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

編譯 css 為：

.icon-40px {
  font-size: 40px;
  height: 40px;
}

.icon-50px {
  font-size: 50px;
  height: 50px;
}

Each 循環(huán)（嵌套）

$icons: ("eye": "\f112", "start": "\f12e");

@each $name, $glyph in $icons {
  .icon-#{$name}:before {
    display: inline-block;
    font-family: "Icon Font";
    content: $glyph;
  }
}

編譯 css 為：

.icon-eye:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "?";
}
.icon-start:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "?";
}

While 循環(huán)

@use "sass:math";

/// 將 `$value` 除以 `$ratio` 直到它低于 `$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);
}

編譯 css 為：

sup {
  font-size: 12.36094px;
}

Sass 其它功能

條件句

@mixin avatar($size, $circle: false) {
  width: $size;
  height: $size;

  @if $circle {
    border-radius: $size / 2;
  }
}

.square-av {
  @include avatar(100px, $circle: false);
}
.circle-av {
  @include avatar(100px, $circle: true);
}

編譯 css 為：

.square-av {
  width: 100px;
  height: 100px;
}

.circle-av {
  width: 100px;
  height: 100px;
  border-radius: 50px;
}

插值

.#{$klass} { ... }      // Class
call($function-name)    // Functions
@media #{$tablet}
font: #{$size}/#{$line-height}
url("#{$background}.jpg")

列表

$list: (a b c);
nth($list, 1)  // starts with 1
length($list)
@each $item in $list { ... }

Maps

$map: (key1: value1, key2: value2, key3: value3);
map-get($map, key1)

另見(jiàn)