2. 程式人生 > 其它 >09-移動端開發教程-Sass入門

09-移動端開發教程-Sass入門

阿新 • • 發佈：2022-04-28

1. 引言

CSS3之前的CSS都大都是列舉屬性樣式，而程式語言強大的變數、函式、迴圈、分支等功能基本都不能在CSS中使用，讓CSS的程式設計黯淡無光，Sass就是一種增強CSS程式設計的擴充套件語言（CSS4也可以期待），有了像Sass這種預處理語言後，CSS的程式設計不再侷限在列舉屬性了，可以有更廣闊的舞臺。

2. Sass的原理

Sass本質就是在CSS的語法的基礎上增加了自定義的變數、迴圈、分支、函式、mixin、繼承、運算等功能，讓CSS程式設計變得異常強大。

當然瀏覽器是不認識Sass語法。開發人員寫完了Sass的語法檔案後需要通過工具轉成原始的CSS程式碼。

//sass 程式碼
//-------------------------------
$fontSize: 12px;
body{
    font-size:$fontSize;
}

// 通過工具將上面的sass程式碼可以轉成下面的CSS程式碼↓↓↓

//css 程式碼
//-------------------------------
body{
    font-size:12px;
}

3. Sass的編譯環境

Sass程式碼的編譯轉換工具可以用sass命令列工具、gulp、開發工具外掛、webpack等。

我推薦大家學習階段直接用開發工具的外掛自動生成即可。如果你是在專案階段使用，那肯定有自動化的流程構建工具比如：gulp、webpack都有對應的外掛或者loader，直接對應配置即可。

老馬推薦vscode的自動編譯Sass檔案的外掛：Live Sass Compiler

使用方法： 第一步： 用vscode開啟scss檔案。 第二步：ctrl+shift+p(mac ctrl→command）輸入sass選擇入下圖選項

4. Sass的兩種檔案字尾

sass有兩種字尾名檔案：一種字尾名為sass，語法要求不使用大括號和分號；另一種就是我們這裡使用的scss檔案，這種和我們平時寫的CSS檔案格式差不多，使用大括號和分號。

//檔案字尾名為sass的語法
body
  background: #eee
  font-size:12px
p
  background: #0982c1

//檔案字尾名為scss的語法  
body {
  background: #eee;
  font-size:12px;
}
p{
  background: #0982c1;
}

老馬推薦使用scss檔案字尾及使用括號和分號的編寫方式。

5. Sass中的變數和註釋

5.1 定義變數及使用

Sass的變數必須是$開頭，後面緊跟變數名，而變數值和變數名之間就需要使用冒號(:)分隔開（就像CSS屬性設定一樣）。

$a-color: blue; // 定義變數。
.box {
  color: $a-color; // => blue  使用變數
}

用vscode外掛轉換一下試試？

5.2 區域性變數和全域性變數。

變數支援塊級作用域，巢狀規則內定義的變數只能在巢狀規則內使用（區域性變數），不在巢狀規則內定義的變數則可在任何地方使用（全域性變數）。將區域性變數轉換為全域性變數可以新增 !global 宣告。

//sass style
//-------------------------------
$a-color: blue;  // 全域性變數

.box {
  $a-color: red; // 區域性變數，box內部不使用。
  color: $a-color; // => red  區域性變數
}

.child {
  color: $a-color; // => blue  全域性變數
  $main-width: 16em !global; // 在區域性定義全域性的變數。
}

.main {
  width: $main-width;  // 使用在內部定義的全域性變數。
}

/*===============生成的CSS程式碼===================*/
.box {
  color: red;
}

.child {
  color: blue;
}

.main {
  width: 16em;
}

從以上程式碼中也可以看到Sass支援CSS的註釋/**/之外還支援雙斜線的註釋: //

5.3 特殊變數

如果變數作為CSS屬性或在某些特殊情況下等則必須要以 #{$variables}形式使用。

//sass style
//-------------------------------
$side: top;
.box {
  border-#{$side}: 1px solid #09c;
}

//css style
//-------------------------------
.box {
  border-top: 1px solid #0098cc;
}

6. 巢狀(Nesting)

6.1 巢狀規則 (Nested Rules)

Sass 允許將一套 CSS 樣式巢狀進另一套樣式中，內層的樣式將它外層的選擇器作為父選擇器。

//sass style
//-------------------------------
#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

//css style
//-------------------------------
#main p {
  color: #00ff00;
  width: 97%;
}

#main p .redbox {
  background-color: #ff0000;
  color: #000000;
}

6.2 父選擇器 & (Referencing Parent Selectors: &)

在巢狀 CSS 規則時，有時也需要直接使用巢狀外層的父選擇器，可以用 & 代表巢狀規則外層的父選擇器。

//sass style
//-------------------------------
.box {
  border-#{$side}: 1px solid #09c;
  &::before {
    content: '';
    display: block;
    position: absolute;
    left: 100px;
    top: 5px;
  }
}
//css style
//-------------------------------
.box {
  border-top: 1px solid #09c;
}
.box::before {
  content: '';
  display: block;
  position: absolute;
  left: 100px;
  top: 5px;
}

& 必須作為選擇器的第一個字元，其後可以跟隨後綴生成複合的選擇器。

//sass style
//-------------------------------
#main {
  color: black;
  &-sidebar { border: 1px solid; }
}
//css style
//-------------------------------
#main {
  color: black;
}
#main-sidebar {
  border: 1px solid;
}

6.3 @at-root

@at-root用來跳出當前選擇器巢狀。

//sass style
//-------------------------------
.demo {
    ...
    animation: motion 3s infinite;
    @at-root {
        @keyframes motion {
          ...
        }
    }
}

//css style
//-------------------------------   
.demo {
    ...   
    animation: motion 3s infinite;
}
@keyframes motion {
    ...
}

7. 運算

Sass支援多種資料型別的變數，比如：

  • 數字，1, 2, 13, 10px
  • 字串，有引號字串與無引號字串，"foo", 'bar', baz
  • 顏色，blue, #04a3f9, rgba(255,0,0,0.5)
  • 布林型，true, false
  • 空值，null

所有資料型別均支援相等運算 == 或 !=，此外，每種資料型別也有其各自支援的運算方式。

7.1 數值運算

Sass支援數字的加減乘除、取整等運算 (+, -, *, /, %)，如果必要會在不同單位間轉換值。

//sass style
//-------------------------------
.box {
  height: 17px + 20px; // => 37px         數字加法運算
  width: (75rem/16);   // => 4.6875rem    除法運算
  color: #303030*2;  // => #606060;     乘法運算（顏色運算）
  padding: 20px - 3;   // => 17pex        數字減法
  font-family: sans- + "serif"; // => sans-serif 字串加法
  width: 1em + (2em * 3); // 帶括號的運算
}
//css style
//-------------------------------   
.box {
  height: 37px;
  width: 4.6875rem;
  color: #606060;
  padding: 17px;
  font-family: sans-serif;
  width: 7em;
}

8. Sass語句

Sass提供了常用的迴圈、判斷分支語句的相關指令，可以讓我們按照程式語言一樣編寫Sass程式碼。

8.1 if語句

當 @if 的表示式返回值不是 false 或者 null 時，條件成立，輸出 {} 內的程式碼。

//sass style
//------------------------------- 
$w: 960px;
$type: monster;
.box {
  @if 2*3 > 5 {  // 簡單if判斷語句
    color: red;
  }
  @if $w > 900px {
    width: $w;
  } @else {     // if  else 語句
    width: 900px;
  }

  @if $type == ocean {  // 多個if和else語句
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
//css style
//------------------------------- 
.box {
  color: red;
  width: 960px;
  color: green;
}

@if 聲明後面可以跟多個 @else if 宣告，或者一個 @else 宣告。 如果 @if 宣告失敗，Sass 將逐條執行 @else if 宣告，如果全部失敗，最後執行 @else 宣告

8.2 for迴圈語句

@for 指令可以在限制的範圍內重複輸出格式。類似for迴圈。 兩種格式：

  • @for $var from <start> through <end> :條件範圍包含 <start> 與 <end> 的值
  • @for $var from <start> to <end>: 圍只包含 <start> 的值不包含 <end> 的值
//scss style
//------------for througth迴圈------------------- 
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
//css style
//------------------------------- 
.item-1 {  width: 2em; }
.item-2 {  width: 4em; }
.item-3 {  width: 6em; }
//scss style
//------------for  to 迴圈------------------- 
@for $i from 1 to 3 {
  .item-#{$i} { width: 2em * $i; }
}
//css style
//------------------------------- 
.item-1 {  width: 2em; }
.item-2 {  width: 4em; }

8.3 each迴圈

@each 指令的格式是 $var in <list>, $var 可以是任何變數名，比如 $length 或者 $name，而 <list> 是一連串的值，也就是值列表。

//sass style
//------------------------------- 
@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
//css style
//-------------------------------
.puma-icon {
  background-image: url("/images/puma.png");
}
.sea-slug-icon {
  background-image: url("/images/sea-slug.png");
}
.egret-icon {
  background-image: url("/images/egret.png");
}
.salamander-icon {
  background-image: url("/images/salamander.png");
}

複雜對應each

//sass style
//------------------------------- 
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
    font-size: $size;
  }
}
//css style
//-------------------------------
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }

9. 混合指令 (Mixin Directives)

9.1 不帶引數的簡單Mixin

混合指令（Mixin）用於定義可重複使用的樣式，可以直接把一整段Sass程式碼替換到某個地方去。

//sass style
//------------------------------- 
// 定義mixin reset, 用@mixin開頭，後面跟空格和混合塊的名字。然後是語句塊
@mixin reset {  
  padding: 0;
  margin: 0;
}
html, body, div , input {
  @include reset(); // 引用 reset 混合塊。用@include指令引用混合塊。
}
//css style
//-------------------------------
html, body, div, input {
  padding: 0;
  margin: 0;
}

9.2 帶引數的Mixin

Mixin還可也新增引數，跟函式一樣使用。

//sass style
//------------------------------- 
@mixin sexy-border($color, $width) {
  border: $width solid $color;
}
p { @include sexy-border(blue, 1px); }

//css style
//-------------------------------
p {
  border: 1px solid blue;
}

10. 函式指令 (Function Directives)

雖然Mixin功能強大，但是某些場景下還是函式應用更方便，Sass也提供了自定義函式的用法。

//sass style
//------------------------------- 
$grid-width: 40px;
$gutter-width: 10px;

// 定義自定義函式 grid-width
@function grid-width($n) {  // 接受一個引數$n
  @return $n * $grid-width + ($n - 1) * $gutter-width;  // 返回值。
}
#sidebar { width: grid-width(5); }   // 在屬性中呼叫函式

//css style
//-------------------------------
#sidebar {
  width: 240px;
}

11. 繼承(擴充套件)

11.1 基本繼承

sass中，選擇器繼承可以讓選擇器繼承另一個選擇器的所有樣式，並聯合聲明。使用選擇器的繼承，要使用關鍵詞 @extend，後面緊跟需要繼承的選擇器。

//sass style
//-------------------------------
h1{
  border: 4px solid #ff9aa9;
}
.speaker{
  @extend h1;
  border-width: 2px;
}

//css style
//-------------------------------
h1, .speaker{
  border: 4px solid #ff9aa9;
}
.speaker{
  border-width: 2px;
}

11.2 佔位符%

可以定義佔位選擇器 %。這種選擇器的優勢在於：如果不呼叫則不會有任何多餘的css檔案，避免了以前在一些基礎的檔案中預定義了很多基礎的樣式，然後實際應用中不管是否使用了 @extend去繼承相應的樣式，都會解析出來所有的樣式。佔位選擇器以 %標識定義，通過 @extend呼叫。

//sass style
//------------------------------- 
%ir {    // 定義佔位符。沒有選擇器名字的一段程式碼而已。
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
#header{
  h1{
    @extend %ir;
    width:300px;
  }
}
.ir{
  @extend %ir;
}

//css style
//-------------------------------
#header h1, .ir {
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

#header h1 {
  width: 300px;
}

12. 匯入檔案

Sass的匯入( @import)Sass檔案規則和CSS的有所不同，編譯時會將 @import的scss檔案合併進來只生成一個CSS檔案。 但是如果你在Sass檔案中匯入css檔案如 @import 'reset.css'，那效果跟普通CSS匯入樣式檔案一樣，匯入的css檔案不會合併到編譯後的檔案中，而是以 @import方式存在。

所有的Sass匯入檔案都可以忽略字尾名 .scss。一般來說基礎的檔案命名方法以_開頭，如 _mixin.scss。這種檔案在匯入的時候可以不寫下劃線，可寫成 @import "mixin"。

例如： a.scss 檔案

//a.scss
//-------------------------------
body {
  background: #eee;
}

main.scss 主檔案。

//sass style
//------------------------------- 
@import "reset.css";  // 匯入css檔案，不會進行編譯。
@import "a";   // 匯入a.scss 檔案，字尾省略
p{
  background: #0982c1;
} 

//css style
//-------------------------------
@import "reset.css";
body {
  background: #eee;
}
p{
  background: #0982c1;
}

參考列表：

  1. Sass中文網文件
  2. Sass語法快速入門

相關推薦

09-移動端開發教程-Sass入門

1. 引言 CSS3之前的CSS都大都是列舉屬性樣式，而程式語言強大的變數、函式、迴圈、分支等功能基本都不能在CSS中使用，讓CSS的程式設計黯淡無光，Sass就是一種增強CSS程式設計的擴充套件語言（CSS4也可以期待），有了

06-移動端開發教程-fullpage框架

CSS3的新特性已經講完了，接下來我們看一下jQuery的一個全屏jQuery全屏滾動外掛fullPage.js。我們經常見到一些全屏的特絢麗頁面，手指或者滑鼠滑動一下就是一整屏切換，而且還有各種效果。比如：全屏滑動案例

07-移動端開發教程-移動端視口

老馬初始學習視口的概念的時候，看了很多的文章，看來很多的資料，鮮有人能把這個東西講的非常透徹的。老馬接下來就從初學者能看懂的角度去講解視口和適配的方案。

10-移動端開發教程-移動端事件

在前端的移動Web開發中，有一部分事件只在移動端產生，如觸控相關的事件。接下來給大家簡單總結一下移動端的事件。

08-移動端開發教程-移動端適配方案

由於移動端的特殊性，螢幕的尺寸碎片化嚴重，要想很好的適配不同的尺寸的裝置，需要我們前端開發相比PC端要做一些基層的適配方案。

HTML5：移動端開發入門

技術標籤：前端cssjavascripthtmlcssjavascript HTML5:移動端開發入門 一、前言 常見的移動端開發分為移動版網站和響應式設計。移動端開發可以讓技術人員專注於移動端的頁面優化，而無需在意桌面版的相容，但頁

移動端開發新趨勢Flutter

該文章屬於<簡書 — 劉小壯>原創，轉載請註明： <簡書 — 劉小壯> https://www.jianshu.com/p/1a90adc09e99

移動端開發基礎【18】小程式除錯和App除錯debug

一．使用各家小程式開發工具除錯 uni-app執行到微信web開發者工具等小程式開發工具裡，可在這些工具的控制檯檢視console資訊，網路請求等資訊等。

移動端開發基礎【19】pages.json的配置項globalStyle

一個uni-app專案中用來進行全域性配置的檔案就是pages.json，它決定了頁面檔案的路徑、視窗樣式、原生的導航欄、底部的原生tabbar等。它與微信小程式中app.json的頁面管理部分相似。需要注意的是定位許可權申請等內容

整理經常在H5移動端開發遇到的知識

viewport、強制瀏覽器全屏、IOS的Web APP模式、可點選元素出現陰影（這個我覺得真沒必要去掉，使用者點選是需要反饋的，而這個背景色剛剛好提供了一種反饋）等等，太多啦，這些相信大家百度一下就可以查到很多資料

移動端開發rem佈局之less+媒體查詢佈局的原理步驟和心得

rem： rem即是以html檔案中font-size的大小的倍數 rem佈局的原理： 通過媒體查詢設定不同螢幕寬度下的html的font-size大小，然後在css佈局時用rem單位取代px，從而實現頁面元素大小的動態適配，做出更漂亮整潔的頁面

想從事Python後端開發？如何入門和學習，這篇文章來告訴你。

想從事Python後端開發的你，不知道如何入門和學習，但首先必須知道什麼是“Python後端開發”。

移動端開發字型自動放大

一、概念 　　這是webkit核心移動瀏覽器特性導致的，這個特性被稱做Text Autosizer，又稱Font Boosting、Font Inflation，是webkit給移動端瀏覽器提供的一個特性：

移動端開發必須知道的小技巧

viewport <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0\">

H5 移動端開發注意事項

一、meta標籤的設定 viewport視口屬性設定 <meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover\">

移動端開發rem實現螢幕適配及處理頁面載入頁面坍塌樣式錯亂網頁閃爍問題

技術標籤：二、ECMA學習cssjavascriptjs rem佈局在載入的時候會出現元素一開始很小，閃爍一下恢復正常大小

移動端開發--》適配各種機型樣式大小

在移動端開發過中，會遇到一個問題，就是如何適配各種機型？ 看到好多資料，說是用媒體查詢@media來寫，但是現在這麼多手機型號，一個一個來匹配，感覺太傻了

移動端自動化 AutoJS 快速入門指南

1. 前言 大家好，我是安果！ 之前寫過很多 App 端自動化的文章，大都基於 Appium、Airtest、無障礙服務等技術來實現的

css移動端開發

​ 移動端瀏覽器主要對webkit核心相容，現在的移動端主要針對手機端開發，移動端碎片化比較嚴重，解析度和螢幕尺寸不一

移動端開發遇到的坑

1. new Date（）在IOS上出現值為NAN的問題 我們常用new Date()去獲取時間戳，例如 newDate(\"2017-08-1112:00:00\");