SASS簡介及使用方法

来源:https://www.cnblogs.com/118p/archive/2018/08/05/9426530.html
-Advertisement-
Play Games

一、什麼是Sass Sass (Syntactically Awesome StyleSheets)是css的一個擴展開發工具，它允許你使用變數、條件語句等，使開發更簡單可維護。這裡是官方文檔。 二、基本語法 1）變數 sass的變數名必須是一個$符號開頭，後面緊跟變數名。 特殊變數：如果變數嵌套在 ...


一、什麼是Sass

Sass (Syntactically Awesome StyleSheets)是css的一個擴展開發工具，它允許你使用變數、條件語句等，使開發更簡單可維護。這裡是官方文檔。

二、基本語法

 1）變數

 sass的變數名必須是一個$符號開頭，後面緊跟變數名。

//sass 樣式
$red: #f00;
div {
   color: $red;   
}
// 編譯為css後
div {
    color:#f00;   
}

特殊變數：如果變數嵌套在字元串中，則需要寫在 #{} 符號裡面，如：

$top: top;
div {
    margin-#{$top}: 10px;       /* margin-top: 10px; */
}

預設變數：僅需在值後面加入 !default即可， 預設變數一般用來設置預設值，當該變數出現另外一個值時，無論定義先後，都會使用另外一個值，覆蓋預設值

$color: red;
$color: blue !default;
div {
    color: $color;    /* color:red; */
}

多值變數：多值變數分為list類型和map類型，list有點像js對象中的數組，map類型像js中的對象

list : 可通過空格，逗號或小括弧分割多個值，使用 nth($變數名, $索引)取值

//一維數據
$px: 5px 10px 20px 30px;

//二維數據，相當於js中的二維數組
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);

// 例子
$px: 10px 20px;
div {
    margin:nth($px, 1) 0 0 nth($px, 2);    /* margin:10px 0 0 20px; */
}

map: 數據以key和value組成，格式：$map: (key1: value1, key2: value2); 通過map-get($map, $key); 

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

2）計算功能

 sass允許使用算式。

div {
    padding: 2px * 4px;
    margin: (10px / 2);
    font-size: 12px + 4px;    
}

　　

3）嵌套

標簽嵌套

// sass 樣式
div {
    color: #333;
    a {
       font-size:14px; 
       &:hover {
          text-decoration:underline;
       }
    }
} 

// 編譯後css
div {
    color: #333;
}
div a {
    font-size:14px; 
}
div a:hover {
    text-decoration:underline;
}

　　屬性嵌套：

//sass 樣式
.fakeshadow {
  border: {
    style: solid;
    left: {
      width: 4px;
      color: #888;
    }
    right: {
      width: 2px;
      color: #ccc;
    }
  }
}

//css 編譯後樣式
.fakeshadow {
  border-style: solid;
  border-left-width: 4px;
  border-left-color: #888;
  border-right-width: 2px;
  border-right-color: #ccc; 
}

 4）註釋

 sass有兩種註釋風格

標準css註釋： /* 註釋 */， 會保留到編譯後的文件中，壓縮則刪除

單行註釋： // 註釋

在標準註釋 /*後面加入一個感嘆號，表示重要註釋，壓縮模式也會保留註釋，用於版權聲明等。

/*! 重要註釋 */

5）繼承

sass 中，選擇器繼承可以讓選擇器繼承另一個選擇器的所有樣式

// sass樣式
h1 {
    font-size:20px;
}
div {
    @extend h1;
    color:red;
}
// css編譯後樣式
h1 {
    font-size:20px;
}
div {
    font-size:20px;
    color:red;
}

使用占位符選擇器 % 

從sass3.2.0後，就可以定義占位選擇器%，這個的優勢在於，不調用不會有多餘的css文件

// sass樣式
%h1 {
    font-size:20px;
}
div {
    @extend %h1;
    color:red;
}
// css編譯後樣式
div {
    font-size:20px;
    color:red;
}

　　

6）混合(mixin)

 sass中使用@mixin聲明混合，可以傳遞參數，參數名義$符號開始，多個參數以逗號分開，如果參數有多組值，那麼在變數後面加三個點表示，如： $var...

//sass 樣式
@mixin opacity($opacity:50) {
  opacity: $opacity / 100;
  filter: alpha(opacity=$opacity);
}

.opacity{
  @include opacity;      //參數使用預設值  50/100 = 0.5
}
.opacity-80{
  @include opacity(80); //傳遞參數  80/100 = 0.8
}

//  css編譯後樣式
.opacity{
  opacity: 0.5;
  filter: alpha(opacity=50);
}

// ---------------------

// 多參數
@mixin center($width, $height) {
    position: absolute;
    left:50%;
    top:50%;
    width:$width;
    height:$height;
    margin:(-$height / 2) 0 0 (-$width / 2);
}
div {
    @include center(200px, 100px);
}
// css編譯後樣式
div {
    position: absolute;
    left:50%;
    top:50%;
    width:200px;
    height:100px;
    margin:-50px 0 0 -100px;
}

// -------------------

//多組值
@mixin box-shadow($shadow...) {
    -webkit-box-shadow: $shadow;
    box-shadow: $shadow;
}
div {
    @include box-shadow(0 1px 0 rgba(0,0,0,.4), 0 -1px 1px rgba(0,0,0,.4));
}
// css編譯後樣式
div {
    -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 -1px 1px rgba(0,0,0,.4);
    box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 -1px 1px rgba(0,0,0,.4);
}

@content：在sass3.2.0中引入， 可以用來解決css3中 @meidia 或者 @keyframes 帶來的問題。它可以使@mixin接受一整塊樣式，接收的樣式從@content開始

//sass 樣式               
@mixin max-screen($res){
  @media only screen and ( max-width: $res )
  {
    @content;
  }
}

@include max-screen(480px) {
  body { color: red }
}

//css 編譯後樣式
@media only screen and (max-width: 480px) {
  body { color: red }
}

　　使用@content解決@keyframes關鍵幀的瀏覽器首碼問題

// 初始化變數
$browser: null;
// 設置關鍵幀
@mixin keyframes($name) {
    @-webkit-keyframes #{$name} {
        $browser: '-webkit-'; @content;
    }
    @-moz-keyframes #{$name} {
        $browser: '-moz-'; @content;
    }
    @-o-keyframes #{$name} {
        $browser: '-o-'; @content;
    }
    @keyframes #{$name} {
        $browser: ''; @content;
    }
}

// 引入
@include keyframes(scale) {
    100% {
        #{$browser}transform: scale(0.8);
    }
}

// css編譯後
@-webkit-keyframes scale {
    -webkit-transform: scale(0.8);
}
@-moz-keyframes scale  {
   -moz-transform: scale(0.8);
}
@-o-keyframes scale  {
    -o-transform: scale(0.8);
}
@keyframes scale  {
    transform: scale(0.8);
}

　　

7）顏色函數

 sass提供了一些內置的顏色函數

lighten(#cc3, 10%)　　  // #d6d65c
darken(#cc3, 10%) 　　　// #a3a329
grayscale(#cc3) 　　　　// #808080
complement(#cc3) 　　　// #33c

　　

8）引入外部文件

使用 @import 命令引入外部文件， 引入後，可使用外部文件中的變數等。

@import "_base.scss";

　　

三、高級用法

1）函數 function

 sass允許用戶編寫自己的函數，以@function開始

$fontSize: 10px;
@function pxTorem($px) {
    @return $px / $fontSize * 1rem;
}
div {
    font-size: pxTorem(16px);
}
// css編譯後樣式
div {
    font-size: 1.6rem;
}

　　

 2）if條件語句

  @if語句可以用來判斷

// sass樣式
$type: monster;
div {
    @if $type == ocean {
        color: blue;
    } @else if $type == matador {
        color: red;
    } @else if $type == monster {
        color: green;
    } @else {
        color: black;
    }
}
// css編譯後樣式
div {
    color: green;
}

　　三目判斷：語法為 if($condition, $if_true, $if_false)。 三個參數分別表示： 條件，條件為真的值，條件為假的值

if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px

3）迴圈語句

for迴圈有兩種形式，分別為：@for $var from <start> through <end> 和 @for $var from <start> to <end>。 $var 表示變數，start表示開始值，end表示結束值，兩種形式的區別在於 through 包括 end 的值，to 不包括 end 值。

// sass樣式
@for $i from 1 to 4 {
    .item-#{$i} {width: 2em * $i;}
}
// css編譯後樣式
.item-1 {
    width: 2em;
}
.item-2 {
    width: 4em;
}
.item-3 {
    width: 6em;
}

　　 while迴圈 

// sass樣式
$i: 2;
@while $i > 0 {
    .item-#{$i} {width: 2em * $i;}
    $i: $i - 1;
}
// css編譯後樣式
.item-2 {
  width: 4em;
}
.item-1 {
  width: 2em;
}

　　

@each迴圈：語法為@each $var in <list or map>。 其中$var表示變數，而list和map表示數據類型，sass3.3.0新加入多欄位迴圈和map數據迴圈

單欄位list數據迴圈

//sass 樣式
$animal-list: puma, sea-slug, egret;
@each $animal in $animal-list {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
//css 編譯後樣式
.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'); 
}

　　 多欄位list數據迴圈

//sass 樣式
$animal-data: (puma, black, default),(sea-slug, blue, pointer);
@each $animal, $color, $cursor in $animal-data {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}
//css 編譯後樣式
.puma-icon {
  background-image: url('/images/puma.png');
  border: 2px solid black;
  cursor: default; 
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
  border: 2px solid blue;
  cursor: pointer; 
}

　　多欄位map數據迴圈

//sass 樣式
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}
//css 編譯後樣式
h1 {
  font-size: 2em; 
}
h2 {
  font-size: 1.5em; 
}
h3 {
  font-size: 1.2em; 
}

　　


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 怎樣進行大數據的入門級學習？
    大數據方向的工作目前分為三個主要方向:01.大數據工程師02.數據分析師03.大數據科學家04.其他（數據挖掘本質算是機器學習，不過和數據相關，也可以理解為大數據的一個方向吧） 本回答目錄:一、大數據工程師的技能要求二、大數據學習路徑三、學習資源推薦（書籍、博客、網站） 推薦一個大數據學習群 119 ...
  • 如何成為一個大數據工程師？ 學習路線圖是什麼？
    看到很多小伙伴都在學習大數據開發的路上很迷茫，不知道該如何成為一名合格的大數據開發工程師，也不知道該學習哪些技術，下麵就給大家談談如何成為一個大數據開發工程師! 想要成為大數據工程師，首先要更新自己的技術庫，也就是說需要將自己以前學習的技術知識找回來，還要增加一些大數據專業技術知識，先讓自己對大數據 ...
  • wamp中mysql安裝時能啟動，重啟後無法啟動的解決辦法
    第一次安裝wamp之後，所有服務可以正常使用，但是重啟之後wamp的圖標就變成黃色的了，重裝了也這樣 查看一下錯誤日誌： 日誌顯示的錯誤是這樣的： 日誌提示可能是3306埠被占用的錯誤，那來看一下是哪個程式占用了3306埠： windows下運行cmd ，輸入 可以看到是pid為2092這個程式 ...
  • Node複習
    簡單複習下node，不過很多重要的知識點是圖，文字無法展示出來。 1.Node的特點 非同步I/O 事件與回調函數 單線程 跨平臺（libuv） 2.Node的應用場景 I/O密集型（事件迴圈、非同步I/O） CPU密集型（可以採用子進程） 3.CommonJS的模塊規範 模塊引用 模塊定義 模塊標識 ...
  • js 面向對象 ES5 AND ES6
    1. ES5實現 父類： 子類繼承父類： 2. ES6實現 父類： 子類繼承： ...
  • 第一次使用mpvue的小記
    ​ 昨晚睡前打開了半個月沒打開的知乎, 看到了一個專欄文章 "再見jquery,我的老朋友" ,突然想到之前github傳出,github已經徹底刪除jquery,這似乎標志著前端已經完全進入了一個新的時代,js從最開始的小丑語言,現在已經成為一個非常優秀的編程語言,開發者的目光從相容性一步步的轉向 ...
  • 我的ASP.NET學習筆記07JQuery基礎知識
    JQuery_1_選擇器 什麼是JQuery JQuery實際上就是一個javascript文件，它是一堆由javascript寫好的工具程式，一個被封裝好的js工具庫。它在js基礎之上做了很多的優化，讓網頁腳本的編寫過程更加的便捷高效。 JQuery有很多的版本，但各版本之間的差異都不是太大，基礎 ...
  • Vuex的使用
    Vuex Vuex是專為Vue.js應用程式開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。 應用場景 對於深層嵌套組件，依靠props進行父子組件的傳遞顯得太過臃腫，而且難以維護。而vuex的出現就是為瞭解決數據傳遞的問題。Vuex作 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類