sass高級語法

来源:http://www.cnblogs.com/lily1010/archive/2016/08/29/5819628.html
-Advertisement-
Play Games

github地址:https://github.com/lily1010/sass/tree/master/course03 用到的sass語法是: sass --watch test.scss:test.css --style expanded 如下圖: 1 導入外部文件,預設文件尾碼預設是sas ...


github地址:https://github.com/lily1010/sass/tree/master/course03

用到的sass語法是:

sass --watch test.scss:test.css --style expanded

如下圖:

1 導入外部文件,預設文件尾碼預設是sass/scss文件,一般在頭部聲明

test.scss內容是:

@import "lili.scss";  //導入一個文件
@import "lili.scss", "haha.scss"; //導入兩個文件 
/*但在以下情況下， 僅作為普通的 CSS @import 規則語句，不會導入任何 Sass 文件。
*(1) 如果文件的擴展名是 .css。
*(2) 如果文件名以 http:// 開始。
*(3) 如果文件名是 url()
*(4)如果@import 中包含任何的媒體查詢（media queries)
*/
@import "lili.css";
@import "http://foo.com/bar";
@import url(lili);
@import "lili" screen;

/*在import裡面插入動態變數,但是僅適用於url方式*/
$name:family;
@import url("http://fonts.googleapis.com/css?family=#{$name}");

/*導入scss文件,卻不需要將它編譯為css文件做法:
 *(1)新建一個文件夾,為了將不需要編譯的文件和需要編譯的文件分開,這點千萬註意
 *(2)在已經建好的文件夾裡面,將不要編譯的*.scss文件命名為_*.scss
 *(3)導入的時候不要用下劃線,直接@import("新建文件夾名字/*.scss")
 */

其中lili.scss內容是:

.test1 {
    color: black;
}

其中haha.scss內容是:

.test11 {
    color: deeppink;
}

編譯成test.css內容是:

@import url(lili.css);
@import "http://foo.com/bar";
@import url(lili);
@import "lili" screen;
@import url("http://fonts.googleapis.com/css?family=family");
.test1 {
  color: black;
}

.test1 {
  color: black;
}

.test11 {
  color: deeppink;
}

 

2 extend函數,不只繼承類名選擇器的樣式,還繼承與它相關的樣式,包括繼承它的父選擇器

test.scss內容是:

.test2 {
  border: 1px #f00;
  background-color: #fdd;
}
.test2.test21 {
  background-image: url("/image/hacked.png");
}
.test2 .test22 {
  background-image: url("/image/haha.png");
}
html .test2 {
  width: 100px;
}
.lili {
  @extend .test2;
  border-width: 3px;
}

編譯成test.css內容是:

.test2, .lili {
  border: 1px #f00;
  background-color: #fdd;
}

.test2.test21, .test21.lili {
  background-image: url("/image/hacked.png");
}

.test2 .test22, .lili .test22 {
  background-image: url("/image/haha.png");
}

html .test2, html .lili {
  width: 100px;
}

.lili {
  border-width: 3px;
}

 

3 extend函數,繼承單元素選擇器樣式,同時繼承與它相關的樣式,包括繼承它的父選擇器

test.scss內容是:

a:hover {
    color: green;
}
a.class1:hover {
    height: 10px;
}
html a:hover {
    width: 10px;
}
.test3 {
    @extend a:hover;
    width: 20px;
}

編譯成test.css內容是:

a:hover, .test3 {
  color: green;
}

a.class1:hover, .class1.test3 {
  height: 10px;
}

html a:hover, html .test3 {
  width: 10px;
}

.test3 {
  width: 20px;
}

 

4 extend中鏈式擴展

test.scss內容是:

.test4 {
    width:20px;
}
.test41 {
    @extend .test4;
    height: 20px;
}
.test42 {
    @extend .test41;
    top:20px;
}

編譯成test.css內容是:

.test4, .test41, .test42 {
  width: 20px;
}

.test41, .test42 {
  height: 20px;
}

.test42 {
  top: 20px;
}

 

5 占位符%,%不會被編譯到css裡面

test.scss內容是:

.test5 a%name {
    width: 100px;
}
.lili {
    height: 200%;
    @extend %name;
}

編譯成test.css內容是:

.test5 a.lili {
  width: 100px;
}

.lili {
  height: 200%;
}

 

6 extend中防止繼承不存在的樣式出錯,用!optional直接跳過空樣式

test.scss內容是:

.test6 {
    @extend noexist!optional;
    height: 100px;
}

編譯成test.css內容是:

.test6 {
  height: 100px;
}

 

7 @at-root指令導致一個或多個規則被限定輸出在文檔的根層級上，而不是被嵌套在其父選擇器下

test.scss內容是:

.test7 {
    height: 20px;
    @at-root {
        .children1 {
            color: red;
        }
        .children2 {
            color: black;
        }
    }
}

編譯成test.css內容是:

.test7 {
  height: 20px;
}
.children1 {
  color: red;
}

.children2 {
  color: black;
}

 

8 @at-root(without:類名)將選擇器移動到嵌套指令之外

test.scss內容是:

.gaga {
    @media name {
      .page {
        width: 8px;
        @at-root (without: media) {  //註意此處目前測試是不支持類名的,比如.test8
          color: red;
        }
      }
    }
}

編譯成test.css內容是:

@media name {
  .gaga .page {
    width: 8px;
  }
}
.gaga .page {
  color: red;
}

 

9 if條件判斷,註意不支持if...else...

test.scss內容是:

.test8 {   //if...if..
    @if 1+1 == 2 {
        width: 20px;
    }
    @if 5 < 3 {
        width: 100px;
    }
}
.test81 {  //if...else if...
    @if 1+1 != 2 {
        width: 20px;
    }
    @else if 5 > 3 {
        width: 100px;
    }
}
.test82 {  //if...else if...else...
    @if 1+1 != 2 {
        width: 20px;
    }
    @else if 5 < 3 { 
        width: 100px;
    }
    @else {
        width: 10px;
    }
}

編譯成test.css內容是:

.test8 {
  width: 20px;
}

.test81 {
  width: 100px;
}

.test82 {
  width: 10px;
}

 

10 for迴圈語句

test.scss內容是:

//第一種格式 @for $var from <start> through <end>,註意範圍包括<start>和<end>的值
@for $i from 1 through 3 {
    .gray#{$i*3} {
        color: #333*$i; 
    }
}

//第二種格式 @for $var from <start> to <end>,註意範圍從<start>開始運行，但不包括<end>的值
@for $i from 1 to 4 {
    .gray2#{$i*3} {
        color: #333*$i; 
    }
}

編譯成test.css內容是:

.gray3 {
  color: #333333;
}

.gray6 {
  color: #666666;
}

.gray9 {
  color: #999999;
}

.gray23 {
  color: #333333;
}

.gray26 {
  color: #666666;
}

.gray29 {
  color: #999999;
}

 

11 each迴圈語句  @each $var in <list or map>

test.scss內容是:

$name:"lili","yaya","sansa";  //註意數組list的寫法
@each $i in $name {
    test9.#{$i} {
        width: 10px;
    }
}

$name2:(name21:"lili",name22:"yaya",name23:"sansa");  //註意對象map的寫法
@each $i in $name2 {
    test9.#{$i} {
        width: 10px;
    }
}

$name3:(name31:1,name32:2,name33:3);  //註意對象map的寫法
@each $key,$value in $name3 {
    test9.#{$key} {
        width: 10px*$value;
    }
}

編譯成test.css內容是:

test9.lili {
  width: 10px;
}

test9.yaya {
  width: 10px;
}

test9.sansa {
  width: 10px;
}

test9.name21 lili {
  width: 10px;
}

test9.name22 yaya {
  width: 10px;
}

test9.name23 sansa {
  width: 10px;
}

test9.name31 {
  width: 10px;
}

test9.name32 {
  width: 20px;
}

test9.name33 {
  width: 30px;
}

　　

12 while迴圈語句

test.scss內容是:

$i:3;
@while $i > 0 {
    .gray#{$i} {
        color: #333*$i;
    }
    $i:$i - 1; //註意此處不能寫成$i:$i-1,因為會被當成字元串
}

編譯成test.css內容是:

.gray3 {
  color: #999999;
}

.gray2 {
  color: #666666;
}

.gray1 {
  color: #333333;
}

　　

13 混入指令,實現代碼塊復用

test.scss內容是:

@mixin left01 {  //不帶參數
    float: left;
}
.test10 {
    @include left01; 
}

@mixin left02($left) {  //帶1個參數
    float: $left;
}
.test101 {
    @include left02(left); 
}

@mixin left03($left,$width) {  //帶2個參數,或者說參數為數組
    float: $left;
    .lili {
        width: $width;
    }
}
.test102 {
    @include left03(left,100px); 
}

@mixin left04($name31,$name32,$name33) {  //參數為對象,但是接受傳遞的參數必須是對象相對應key,同時需要用...傳遞參數
    .lili {
        width: $name31;
        height: $name32;
        top: $name33;
    }
}
$map:(name31:"1px",name32:"2px",name33:"3px");
.test103 {
    @include left04($map...); 
}

@mixin left05($left:right) {  //帶預設參數,不傳參的話就用預設參數
    float: $left;
}
.test104 {
    @include left05; 
}

@mixin box-shadow($shadows...) {  //不定參數,用...
      -moz-box-shadow: $shadows;
      -webkit-box-shadow: $shadows;
      box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

編譯成test.css內容是:

.test10 {
  float: left;
}

.test101 {
  float: left;
}

.test102 {
  float: left;
}
.test102 .lili {
  width: 100px;
}

.test103 .lili {
  width: "1px";
  height: "2px";
  top: "3px";
}

.test104 {
  float: right;
}

.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

　

14 傳遞內容塊@content到混入,傳遞到@content位置

test.scss內容是:

@mixin lala {
    html {
        color: #888;
        @content;
    }
}
@include lala {  //此處名字必須和上面保持一致
    .logo {
        font-size: 15px;
    }
}

編譯成test.css內容是:

html {
  color: #888;
}
html .logo {
  font-size: 15px;
}

 

15 變數在混入@mixin的作用域,即傳遞給混入（mixin）的內容塊在其被定義的作用域中進行運算，而不是混入（mixin）的作用域。這意味著混入（mixin）的局部變數不能傳遞給樣式塊使用

test.scss內容是:

$color: white;
@mixin haha($color:black) {
    background-color: $color;
    @content;
}
.test12 {
    @include haha{
        color: $color;
    }
}

編譯成test.css內容是:

.test12 {
  background-color: black;
  color: white;
}

 

16 函數,用法類似@mixin

test.scss內容是:

@function sasa($name) {
    @return $name;
}
.test13 {
    font-size: sasa(15px);
}

編譯成test.css內容是:

.test13 {
  font-size: 15px;
}

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

-Advertisement-
Play Games
更多相關文章
  • HTK計算mfcc/filter_bank源碼解析
    HTK計算mfcc/filter_bank源碼解析 HTK可以用簡單的 求取mfcc或者filter_bank 關於mfcc的原理在 http://my.oschina.net/jamesju/blog/193343 中有講解，這裡主要說HTK具體是如何用C實現的，因為HTK自身的龐大，文件嵌套不少 ...
  • eclipse使用Git插件
    折騰了會Git，記錄一下下。 1、安裝Git Help-->Install New Software 點擊Add，Name隨意，Location為http://download.eclipse.org/egit/updates，選中需要安裝的組件，一路Next，等待安裝完畢。 2、先建立Git本地倉 ...
  • 自己寫ORM框架 DBUtils_DG Java（C#的寫在鏈接里）
    ORM框架想必大家都比較熟知了，即對象關係映射（英語：Object Relation Mapping，簡稱ORM，或O/RM，或O/R mapping），是一種程式技術，用於實現面向對象編程語言里不同類型系統的數據之間的轉換。從效果上說，它其實是創建了一個可在編程語言里使用的“虛擬對象資料庫”。 當 ...
  • SQLAlchemy文檔翻譯
    想記錄一下SQLAlchemy的入門學習，然後突發奇想覺得：為什麼不直接翻譯一下文檔呢？於是順手查了查怎麼使用Gitbook，2333 於是就在Github開了項目，然後導入了Gitbook，開始寫。今天開始的，決定每天寫一部分，爭取早日完成。 Github鏈接：https://github.com ...
  • java環境變數的配置
    1.JAVA_HOME:該路徑為你自己安裝JDK的路徑 D:\ruanjian\jdk7 2.Path:是本身存在的 D:\ruanjian\jdk7\bin; 3.CLASSPATH:需要新建 .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar;%JAVA_HO ...
  • Perl的基本語法（轉）
    （原文來自：http://www.jb51.net/shouce/perl.htm） ...
  • tomcat中的URL參數為中文，servlet接收後顯示亂碼
    URL中參數的值為中文時，servlet接收後顯示為亂碼，如下圖： 這時候需要修改tomcat的中的server.xml文件。該文件路徑為 tomcat安裝目錄下的conf文件夾。 為修改前的server.xml文件。 修改後的server.xml文件。增加了一行： URIEncoding="UTF ...
  • css判斷不同解析度顯示不同寬度佈局實現自適應寬度
    一、CSS DIV網頁佈局中當解析度小於等於1024px（像素）時，DIV佈局對象顯示1000px寬度，當解析度大於1024px時候顯示1200px寬度等需求。使用CSS實現改變瀏覽器顯示寬度從而實現佈局的網頁寬度動態改變變化（網頁寬度自動隨瀏覽器顯示寬度而變寬變窄）。隨著發展，越來越多的電腦用戶顯 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類