scss拓展寫法

.a {
    .b {
        &:hover {
            width: 100px;
        }
        &.c {
            width: 100px;
        }
        &-d {
            width: 100px;
            font: {
                size: 20px;
            }
        }
    }
}

轉化為:

.a .b:hover {
  width: 100px;
}
.a .b.c {
  width: 100px;
}
.a .b-d {
  width: 100px;
  font-size: 20px;
}

// %base (佔位符)用佔位符防止.button編譯 
.button%base {
    color: #333;
}

.btn-success {
    @extend %base;
    background-color: green;
}
.btn-error {
    @extend %base;
    background-color: red;
}

轉化為:

.button.btn-error, .button.btn-success {
  color: #333;
}

.btn-success {
  background-color: green;
}

.btn-error {
  background-color: red;
}

scss變量

css變量使用

:root {
    --color: #333;
}

body {
    --border-color: #000;
}

.header {
    --background-color: #f2f2f2;
    --font-color: #f00;
    width: 100vw;
    height: 100px;
    background-color: var(--background-color);
}
span {
    color: var(--font-color); // .header中的span生效, 不在header中的span標籤不生效
}

scss變量

$color: #fff; // scss變量以$開頭
$border_color: #f00;
$border-color: #ccc; // 注意scss變量對中劃線和下劃線不敏感, 下面的覆蓋上面的

.a {
    color: $color;
    border-color: $border_color;
}

轉化為:

.a {
  color: #fff;
  border-color: #ccc;
}

scss變量同樣存在作用域
但是

$color: null;
.a {
    $color: red !global; // 可以通過!global提升為全局變量, 雖然可以編譯成功, 但是編譯器會報錯As of Dart Sass 2.0.0, !global assignments won't be able to declare new variables. 需要在根節點聲明$color: null;才能解決報錯信息
}

.b {
    color: $color;
}

轉化為:

.b {
  color: red;
}

// scss變量的數據類型:
// 1. 可以是任何css屬性值;
// 2. 也可以是boolean/null用於判斷
// 3. 可以是逗號分隔的list
// 4. 可以是小括號包裹的key:value的類似於map的集合
$layer-index: 10;
$border-width: 3px;
$font-base-family: 'Open Sans', Helvetica, Sans-Serif;
$top-bg-color: rgba(255, 147, 29, .6);
$block-base-padding: 6px 10px 0 10px;
$block-mode: true;
$var: null;
$color-map: (color1: #f00, color2: #ff0, color: #0ff);
$fonts: (serif: 'Helvetica Neue', monospace: 'Consolas');
$font-size: null;
.container {
    @if $block-mode {
        background-color: #000;
        $var: 'hahaha'
    }@else {
        background-color: #fff;
        $var: 'heiheihei'
    }

    content: type-of($var);
    content: length($var);
    color: map-get($color-map, color2);
}

.wrap {
    font: 10px blod map-get($map: $fonts, $key: 'sans'); // map-get如果找不到對應key值會返回空值
}

轉化為:

.container {
  background-color: #000;
  content: null;
  content: 1;
  color: #ff0;
}

.wrap {
  font: 10px blod;
}

$color: #333;

$color: #666 !default;

p {
    color: $color;
}

轉化為:

p {
  color: #333;
}

scss中使用css變量

$color: #333;

:root {
    --color: #{$color}; // 注意不能直接使用$color, 需要用插值語法
}

導入

css導入

@import url(a.css);

scss導入

@import 'public.scss'; // 可以正確導入scss模塊
@import 'public'; // 可以正確導入scss模塊
@import url(public.scss); // 不會編譯, 作為普通css語法
@import 'public.css'; // 不會編譯, 作為普通css語法
@import 'https://xxx.com/xxx'; // 不會編譯, 作為普通css語法
@import 'landscape' screen and (orientation: landscape); // 不會編譯, 作為普通css語法

如果一個scss文件不想被編譯可以用下劃線開頭定義文件名

混入

@mixin block {
    .a {
        width: 96%;
        margin-left: 2%;
        border-radius: 10px;
        border: 1px solid #333;
    }
}

.container {
    @include block;
}

轉化為:

.container .a {
  width: 96%;
  margin-left: 2%;
  border-radius: 10px;
  border: 1px solid #333;
}

// 參數可以指定默認值
@mixin block-padding($top: 0, $right: 0, $bottom: 0, $left: 0) {
    padding-top: $top;
    padding-right: $right;
    padding-bottom: $bottom;
    padding-left: $left;
}

.container {
    // 可以按順序傳參
    // @include block-padding(10px, 20px, 30px, 40px);
    // 也可以指定參數名傳參
    @include block-padding($left: 40px, $right: 20px, $top: 10px, $bottom: 30px);
}

轉化為:

.container {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

@mixin linear-gradient($direction, $gradients...) {
    background-color: nth($list: $gradients, $n: 1); // 獲取一個$list的$n位(不是從0開始)
    background-image: linear-gradient($direction, $gradients);
}

.container {
    @include linear-gradient(to top, #f00, #0f0, #00f);
}

轉化為:

.container {
  background-color: #f00;
  background-image: -webkit-gradient(linear, left bottom, left top, from(#f00), color-stop(#0f0), to(#00f));
  background-image: linear-gradient(to top, #f00, #0f0, #00f);
}

繼承

.alert {
    width: 100%;
}

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

.alert-success {
    @extend .alert;
    background-color: green;
}

轉化成:

// 如果不想成成.alert類的樣式, 只是用於集成的話, 可以在scss中將.alert換成%alert佔位符
.alert, .alert-success, .alert-info {
  width: 100%;
}

.alert-info {
  background-color: #f2f2f2;
}

.alert-success {
  background-color: green;
}

繼承和混入的區別

繼承和混入都能將一段樣式代碼引入到另一段代碼中, 但是@mixin會將這段代碼複製到所有@include處, 而@extend過來的代碼, 會將所有@extend的類集合起來寫, 雖然效果一樣, 但是用@extend得到的目標代碼更少, 更精簡.

主要來説兩者用法不一樣

• 混入的話意圖在於樣式代碼的複用
• 繼承的話意圖在於在一個選擇器中使用另一個選擇器的樣式

運算符

==        等於
!=        不等於
>        大於
<        小於
>=        大於等於
<=        小於等於
and        且
or        或
not     非
+        加 / 字符串連接
-        減
*        乘
/        除
%        取餘

// 加減乘除應用於數字類型的數據操作, 在scss中 1 1px 1pt 1vw 1%都是數字類型, 有多種單位的數字, 所以就很噁心, 用之前試一試吧, 大部分編譯結果還是可以常理預測的, 但是也有特殊的
.container {
    width: 10 + 20;
    width: 30 + 40%;  // 如果一個數字和帶單位的數據加, 那麼數字會默認加上對應單位
    width: 50% + 60;
    width: 70% + 80%;
    width: 90 + 100px;
    width: 110px + 120;
    width: 130px + 140px;
    // width: 20px + 10%;  報錯, 兩個不同單位相加減會報錯, 這種應該用css的calc函數
    width: calc(150px + 160%);

    width: 10 * 20;
    width: 5 * 10%;
    // width: 50% * 10%; // 報錯
    // width: 10px * 50px; 報錯
    width: 2 * 10px;

    width: 10 / 5; // 不會計算(三種情況會走計算邏輯1. 值或值得一部分是變量或函數返回值; 2. 值被小括號包裹; 3. 值是算數表達式的一部分)
    $width: 1000px;
    .div {
        width: $width / 2;
        width: $width / 2px;
        z-index: round($number: 10) / 2;
        height: (500px / 2);
        height: (500px / 2px);
        // height: (500 / 2px); // 報錯
        height: (500 / 2);
    }

    .span {
        width: 10 % 3;
        width: 50 % 3px;
        width: 50px % 3px;;
    }
}

轉換成:

.container {
  width: 30;
  width: 70%;
  width: 110%;
  width: 150%;
  width: 190px;
  width: 230px;
  width: 270px;
  width: calc(150px + 160%);
  width: 200;
  width: 50%;
  width: 20px;
  width: 10/5;
}
.container .div {
  width: 500px;
  width: 500;
  z-index: 5;
  height: 250px;
  height: 250;
  height: 250;
}
.container .span {
  width: 1;
  width: 2px;
  width: 2px;
}

插值語法#{}

$class-name: danger;
$attr: color;
$author: 'wjt';

/*
@author: #{$author}
*/
a.#{$class-name} {
    border-#{$attr}: #f00;
}

轉換為:

/*
@author: wjt
*/
a.danger {
  border-color: #f00;
}

常用函數

顏色相關lighten/darken/opacify

p {
    height: 30px;
}
$bgc: #5c7a29;
.p0 {
    background-color: $bgc;
}
.p1 {
    background-color: lighten($color: $bgc, $amount: 30%);
}
.p2 {
    background-color: darken($color: $bgc, $amount: 15%);
}
.p3 {
    background-color: opacify($color: $bgc, $amount: .5);
}
.p4 {
    background-color: opacify($color: rgba($bgc, .1), $amount: .5);
}

轉換為:

p {
  height: 30px;
}

.p0 {
  background-color: #5c7a29;
}

.p1 {
  background-color: #aace6e;
}

.p2 {
  background-color: #314116;
}

.p3 {
  background-color: #5c7a29;
}

.p4 {
  background-color: rgba(92, 122, 41, 0.6);
}

p {
    &:after {
        content: quote($string: aaa);
    }
    background-color: unquote($string: "#f00");
    z-index: str-length($string: "aaa")
}

轉換為:

p {
  background-color: #f00;
  z-index: 3;
}
p:after {
  content: "aaa";
}

p {
    z-index: abs($number: -15);
    z-index: ceil($number: 4.2);
    z-index: max(5, 1, 5, 8, 3);
    opacity: random();
}

轉換為:

p {
  z-index: 15;
  z-index: 5;
  z-index: 8;
  opacity: 0.3833696362;
}